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 to manage API access for your storefront and get a public access token.

See the playground for more complete examples.

Anchor to attributesAttributes

Anchor to store-domain store-domain string required: The myshopify.com domain of the store.
Anchor to buyNow buyNow (e: Event, options?: ) => void: A method to open the checkout page with a selected product.
Anchor to country country CountryCode: The country of the store.
Anchor to customer-access-token customer-access-token string: The customer access token for the current customer. See how to obtain one for Hydrogen or Headless. Not needed in a theme.
Anchor to language language LanguageCode: The language of the store.
Anchor to public-access-token public-access-token string: The public access token from the Headless channel for the store. This attribute is required if you want to access product inventory count, metafields, metaobjects, or customer accounts.

Examples

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>

<shopify-context

type="product"

handle="handle-of-product"

</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"

</shopify-context>

</shopify-store>

Examples

Description

This is the default example

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>

Was this page helpful?

shopify-store

Anchor to attributesAttributes

BuyNowOptions

Target

HTML