Getting started

Open the HTML file in the project where you want to use Storefront Web Components, and add the script tag shown here. Beneath it, add a <shopify-store> component, with the domain of your store (for example, https://demostore.mock.shop/).

The <shopify-store> component supports optional country and language attributes that let you display pricing and content for a specific market.

You don't need an access token to use Storefront Web Components. However, if you want to display the inventory count or any custom data about a product, then you need to add an access token to the <shopify-store> component as well. To get an access token:

1. Install the Headless channel from the Shopify App Store.
2. To generate an access token, navigate to the Headless channel in your Shopify admin and click Create storefront.
3. In the Manage API access section, click Manage for the Storefront API, and then copy the public access token.
4. In your project, add a public-access-token attribute with your token to the <shopify-store> component (for example, public-access-token="your-access-token").

After adding the script tag and <shopify-store> component, add a <shopify-context> component. This defines which Shopify data will be available.

Each <shopify-context> component requires two attributes:

• type: Specifies what kind of data you want (for example, product).
• handle: Identifies the specific item. For example, the handle for the URL demostore.mock.shop/products/men-t-shirt is men-t-shirt.

If you're working with a single storefront, then you can add the <shopify-context> component anywhere on your page (it doesn't need to be inside the <shopify-store> component). If you're working with multiple storefronts, then nest the context inside its corresponding store component.

Every <shopify-context> component also requires a template component, which contains the data you want to display. That template won't render until the context loads. You'll populate this component in the next step.

Inside a context template, you can use any standard HTML markup along with Shopify's data components.

The shopify-data component is used to display Shopify data on your page. Here's how it works:

• It requires a query attribute that specifies which data to display.
• The query uses dot notation to access data fields (for example, query="product.title").
• It looks for the nearest matching <shopify-context> component to find the data.
• It outputs plain text that you can style with your own HTML elements.

In this example, <shopify-data query="product.title"> finds the nearest product context (based on its handle attribute), accesses its title property, and displays it as text.

Since the component outputs a text node, to match your site's design you can wrap it in any necessary HTML elements. The component also supports rich text fields like product.descriptionHtml.

Some types of data , like currency and media, require extra formatting to display properly. For these types of data, you can use the following components:

• shopify-money: Accepts a query reference to a money object, and uses the store's country and language market to format it correctly.
• shopify-media: Accepts an image reference and generates an image element with srcset and sizes attributes.

You can add buttons to your components that let customers buy products, view product details, or add products to their cart.

To add a "Buy now" button that redirects the customer to the checkout page:

1. Add a button component inside a shopify-context component that's associated with a product.

2. Call the buyNow() method in the button component's onclick attribute, and make sure it includes an event object whose target is inside a shopify-context component.

When the customer clicks the button, the component will redirect them to the checkout page with the selected product.

To learn more about different button actions, see Common patterns.

Now that you've set up the basic Storefront Web Components, you can use others to add new types of data or functionality to your website. Components are available for common commerce features and design patterns, including:

• shopify-list-context: Displays multiple items in a repeating format, like a list of products or collections.
• shopify-cart: Provides simple shopping cart using a native HTML <dialog> element.
• shopify-variant-selector: Creates a form that lets customers choose between different product options (like sizes, colors, or materials).