---
title: Components
source_url:
  html: 'https://shopify.dev/docs/api/storefront-web-components/components'
  md: 'https://shopify.dev/docs/api/storefront-web-components/components.md'
api_name: storefront-web-components
---

# Components

[shopify-account](https://shopify.dev/docs/api/storefront-web-components/components/shopify-account)

[The \<shopify-account> component displays an avatar on your website.](https://shopify.dev/docs/api/storefront-web-components/components/shopify-account)

[shopify-cart](https://shopify.dev/docs/api/storefront-web-components/components/shopify-cart)

[The cart component provides a mini shopping cart functionality for your website.](https://shopify.dev/docs/api/storefront-web-components/components/shopify-cart)

[shopify-context](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context)

[The context component defines which Shopify data should be available in different parts of your page.](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context)

[shopify-data](https://shopify.dev/docs/api/storefront-web-components/components/shopify-data)

[The shopify-data component is used to display Shopify data on your page.](https://shopify.dev/docs/api/storefront-web-components/components/shopify-data)

[shopify-list-context](https://shopify.dev/docs/api/storefront-web-components/components/shopify-list-context)

[The list context component allows you to display multiple items in a repeating format.](https://shopify.dev/docs/api/storefront-web-components/components/shopify-list-context)

[shopify-media](https://shopify.dev/docs/api/storefront-web-components/components/shopify-media)

[Accepts a reference to an Image or Media reference and generates an image or video element with srcset and sizes attributes.](https://shopify.dev/docs/api/storefront-web-components/components/shopify-media)

[shopify-money](https://shopify.dev/docs/api/storefront-web-components/components/shopify-money)

[Accepts query a reference to a Money object, and uses the store's country and language market to format it correctly.](https://shopify.dev/docs/api/storefront-web-components/components/shopify-money)

[shopify-store](https://shopify.dev/docs/api/storefront-web-components/components/shopify-store)

[Use the \<shopify-store> component to set up your credentials and market configuration for a storefront.](https://shopify.dev/docs/api/storefront-web-components/components/shopify-store)

[shopify-variant-selector](https://shopify.dev/docs/api/storefront-web-components/components/shopify-variant-selector)

[Use the \<shopify-variant-selector> component to display a form for selecting product options.](https://shopify.dev/docs/api/storefront-web-components/components/shopify-variant-selector)

***