---
title: Storefront Web Components
description: >
  Storefront Web Components let you bring Shopify-powered commerce capabilities
  to any website. Display products, showcase collections, and offer a checkout,
  all with a few lines of embedded HTML.
api_name: storefront-web-components
source_url:
  html: 'https://shopify.dev/docs/api/storefront-web-components'
  md: 'https://shopify.dev/docs/api/storefront-web-components.md'
---

# Storefront Web Components

Storefront Web Components let you bring Shopify-powered commerce capabilities to any website. Display products, showcase collections, and offer a checkout, all with a few lines of embedded HTML.

## How Storefront Web Components work

Storefront Web Components are a set of HTML components that handle the complexity of querying Shopify's Storefront API, letting you display products, collections, and shopping cart functionality on your website without having to write complex JavaScript code.

After you add the `<shopify-store>` and `<shopify-context>` components to your markup and configure their attributes, you can access your store's data and then style it using CSS or HTML to create tailored shopping experiences.

Storefront Web Components are built for a wide range of use cases, from embedding your products and collections within existing content to building new pages for your site.

[Full page - Collection page](https://webcomponents.shopify.dev/playground?view=editor\&preset=product-cards-discover)

[Full page - Blog post](https://webcomponents.shopify.dev/playground?view=editor\&preset=blog-post)

[Embedded - Product card](https://webcomponents.shopify.dev/playground?view=editor\&preset=ready-product-card-first)

![How Storefront Web Components work](https://shopify.dev/assets/assets/images/api/storefront-web-components/storefront-web-components-example-o7UgYKdg.png)

***

## Resources

Follow the step-by-step guide to add Storefront Web Components to your project or browse sample code with live previews in the playground.

[Learn more - Getting started guide](https://shopify.dev/docs/api/storefront-web-components/getting-started/)

[Explore - Storefront Web Components playground](https://webcomponents.shopify.dev/playground)

***