---
title: Getting started
description: This guide provides step-by-step instructions for adding Storefront Web Components to your website. If you want to use an LLM to generate code, include the [LLMs.txt](https://webcomponents.shopify.dev/llms.txt) file with your prompt to guide the model's output.
api_name: storefront-web-components
source_url:
  html: https://shopify.dev/docs/api/storefront-web-components/getting-started
  md: https://shopify.dev/docs/api/storefront-web-components/getting-started.md
---

# Getting started

This guide provides step-by-step instructions for adding Storefront Web Components to your website. If you want to use an LLM to generate code, include the [LLMs.txt](https://webcomponents.shopify.dev/llms.txt) file with your prompt to guide the model's output.

***

## Step 1: Connect your store

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](https://shopify.dev/docs/api/storefront-web-components/components/shopify-store), 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](https://apps.shopify.com/headless) 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"`).

Using LLMs with Storefront Web Components

If you want to use an LLM to generate code, include the [LLMs.txt](https://webcomponents.shopify.dev/llms.txt) file with your prompt to guide the model's output.

### Examples

* #### Storefront Web Components setup

  ##### Storefront Web Components setup

  ```html
  <script src="https://cdn.shopify.com/storefront/web-components.js">
  </script>

  <shopify-store
    store-domain="https://your-store.myshopify.com"
    country="US"
    language="en"
  >
  </shopify-store>
  ```

## Step 2: Set the context

After adding the script tag and `<shopify-store>` component, add a [`<shopify-context>` component](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context). 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`](https://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.

### Examples

* ####

  ##### Setup context

  ```html
  <script src="https://cdn.shopify.com/storefront/web-components.js">
  </script>

  <shopify-store
    store-domain="https://your-store.myshopify.com"
  >
  </shopify-store>

  <shopify-context
    type="product"
    handle="your-product-handle"
  >
    <template>
      <!-- This template won't be rendered until the context is loaded -->
    </template>
  </shopify-context>
  ```

## Step 3: Load Shopify data

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

The [`shopify-data`](https://shopify.dev/docs/api/storefront-web-components/components/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`.

### Examples

* ####

  ##### Data loading

  ```html
  <script src="https://cdn.shopify.com/storefront/web-components.js"></script>

  <shopify-store
    store-domain="https://your-store.myshopify.com"
  >
  </shopify-store>

  <shopify-context
    type="product"
    handle="your-product-handle"
  >
    <template>
      <!-- shopify-data renders a text node -->
      <h1 class="your-style">
        <shopify-data query="product.title">
        </shopify-data>
      </h1>

      <p>
        <!-- This renders a rich text description -->
        <shopify-data query="product.descriptionHtml">
        </shopify-data>
      </p>
    </template>
  </shopify-context>
  ```

## Step 4: Format components

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`](https://shopify.dev/docs/api/storefront-web-components/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`](https://shopify.dev/docs/api/storefront-web-components/components/shopify-media): Accepts an image reference and generates an image element with `srcset` and `sizes` attributes.

### Examples

* ####

  ##### Formatting components

  ```html
  <script src="https://cdn.shopify.com/storefront/web-components.js">
  </script>

  <shopify-store
    store-domain="https://your-store.myshopify.com"
  >
  </shopify-store>

  <shopify-context
    type="product"
    handle="your-product-handle"
  >
    <template>
      <!-- Display the product price -->
      <shopify-money
        query="product.selectedOrFirstAvailableVariant.price"
        format="money_with_currency">
      </shopify-money>

      <!-- Display the product image -->
      <shopify-media
        query="product.selectedOrFirstAvailableVariant.image"
        width="400"
        height="400"
      >
      </shopify-media>
    </template>
  </shopify-context>
  ```

## Step 5: Connect to checkout

You can add buttons to your components that let customers buy products, view product details, or [add products to their cart](https://shopify.dev/docs/api/storefront-web-components/components/shopify-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](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context) 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](https://shopify.dev/docs/api/storefront-web-components/common-patterns).

### Examples

* ####

  ##### Buy now button example

  ```html
  <shopify-store
    id="store"
    store-domain="https://your-store.myshopify.com"
  >
  </shopify-store>

  <!-- The context is bound to the store -->
  <shopify-context
    type="product"
    handle="handle-of-product"
  >
  <template>
    <shopify-variant-selector></shopify-variant-selector>
    <!-- The product added will be whatever
    variant is selected for the context product handle.
    The disabled attribute is added if the variant is not available for sale.
    -->
    <button
      onclick="getElementById('store').buyNow(event);"
      shopify-attr--disabled="!product.selectedOrFirstAvailableVariant.availableForSale"
    >
      Buy now
    </button>
  </template>
  </shopify-context> 
  ```

## Next steps

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`](https://shopify.dev/docs/api/storefront-web-components/components/shopify-list-context): Displays multiple items in a repeating format, like a list of products or collections.
* [`shopify-cart`](https://shopify.dev/docs/api/storefront-web-components/components/shopify-cart): Provides simple shopping cart using a native [HTML `<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog).
* [`shopify-variant-selector`](https://shopify.dev/docs/api/storefront-web-components/components/shopify-variant-selector): Creates a form that lets customers choose between different product options (like sizes, colors, or materials).

[![](https://shopify.dev/images/icons/32/custom-storefronts.png)![](https://shopify.dev/images/icons/32/custom-storefronts-dark.png)](https://webcomponents.shopify.dev/playground)

[ExploreStorefront Web Components playground](https://webcomponents.shopify.dev/playground)

[![](https://shopify.dev/images/icons/32/tutorial.png)![](https://shopify.dev/images/icons/32/tutorial-dark.png)](https://shopify.dev/docs/api/storefront-web-components/components/shopify-cart)

[Learn moreStorefront Web Components reference](https://shopify.dev/docs/api/storefront-web-components/components/shopify-cart)