---
title: shopify-store
description: >-
  Use the <shopify-store> component to set up your credentials and market
  configuration for a storefront.
source_url:
  html: >-
    https://shopify.dev/docs/api/storefront-web-components/components/shopify-store
  md: >-
    https://shopify.dev/docs/api/storefront-web-components/components/shopify-store.md
api_name: storefront-web-components
---

# shopify-store

Use the `<shopify-store>` component to set up your credentials and market configuration for a storefront. You can optionally add a public access token, which gives you access to your store's inventory, metafields, and metaobjects. Use [the Headless channel](https://apps.shopify.com/headless) to manage API access for your storefront and get a public access token.

See the [playground](https://webcomponents.shopify.dev/playground) for more complete examples.

#### Attributes

* **store-domain**

  **string**

  **required**

  The myshopify.com domain of the store.

* **buy​Now**

  **(e: Event, options?: BuyNowOptions) => void**

  A method to open the checkout page with a selected product.

* **country**

  **CountryCode**

  The country of the store.

* **customer-access-token**

  **string**

  The customer access token for the current customer. See how to obtain one for [Hydrogen](https://shopify.dev/docs/storefronts/headless/building-with-the-customer-account-api/hydrogen) or [Headless](https://shopify.dev/docs/storefronts/headless/building-with-the-customer-account-api/authenticate-customers). Not needed in a theme.

* **language**

  **LanguageCode**

  The language of the store.

* **public-access-token**

  **string**

  The public access token from the [Headless channel](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/manage-headless-channels) for the store. This attribute is required if you want to access product inventory count, metafields, metaobjects, or customer accounts.

### BuyNowOptions

* discountCodes

  ```ts
  string[]
  ```

* target

  ```ts
  Target
  ```

### Target

The anchor target attribute for a link.

```ts
"_blank" | "_self" | "_parent" | "_top" | "_unfencedTop"
```

Examples

### Examples

* ####

  ##### Description

  This is the default example

  ##### HTML

  ```html
  <!-- Optionally define market configuration, which defaults
   to US/EN. The public-access-token attribute is optional,
   and only necessary to access product inventory count, metafields,
   metaobjects, or customer accounts.
  -->
  <shopify-store
    store-domain="https://your-store.myshopify.com"
    public-access-token="optional-access-token"
    country="CA"
    language="FR"
  >
  </shopify-store>

  <!-- The context is bound to the store -->
  <shopify-context
    type="product"
    handle="handle-of-product"
  >
    <template> ... </template>
  </shopify-context>

  <!-- If you want to display products from multiple
    storefronts on the same page, nest contexts inside
    multiple store components-->
  <shopify-store
    store-domain="https://your-other-store.myshopify.com"
    country="CA"
    language="FR"
  >
    <shopify-context
      type="product"
      handle="handle-of-product"
    >
      <template> ... </template>
    </shopify-context>
  </shopify-store>
  ```

***