shopify-storecomponent
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. You can get a public access token by adding the Headless channel in your Shopify admin.
See the playground for more complete examples.
Anchor to attributesAttributes
- Anchor to store-domainstore-domainstringrequired
The myshopify.com domain of the store.
- Anchor to buyNowbuyNow(e: Event, options?: ) => void
A method to open the checkout page with a selected product.
- Anchor to countrycountryCountryCode
The country of the store.
- Anchor to languagelanguageLanguageCode
The language of the store.
- Anchor to public-access-tokenpublic-access-tokenstring
The public access token from the Headless channel for the store. This attribute is required if you want to access product inventory count, metafields, or metaobjects.
StoreAttributes
- buyNow
A method to open the checkout page with a selected product.
(e: Event, options?: BuyNowOptions) => void - country
The country of the store.
CountryCode - language
The language of the store.
LanguageCode - public-access-token
The public access token from the [Headless channel](/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, or metaobjects.
string - store-domain
The myshopify.com domain of the store.
string
interface StoreAttributes {
/**
* The myshopify.com domain of the store.
**/
"store-domain": string;
/**
* The public access token from the [Headless channel](/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, or metaobjects.
**/
"public-access-token"?: string;
/**
* The country of the store.
**/
country?: CountryCode;
/**
* The language of the store.
**/
language?: LanguageCode;
/**
* A method to open the checkout page with a selected product.
*
* @param event - An event object. The event target should be an element that is
* a descendant of a product context. That product, and any selected variant inside it,
* is used to open the checkout page.
*
* @param options - Optional configuration including discount codes and target window.
*/
buyNow?: (e: Event, options?: BuyNowOptions) => void;
}BuyNowOptions
- discountCodes
string[] - target
Target
interface BuyNowOptions {
discountCodes?: string[];
target?: Target;
}Target
The anchor target attribute for a link.
"_blank" | "_self" | "_parent" | "_top" | "_unfencedTop"Example
HTML
examples
example
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 inventory, metafields, and metaobjects. --> <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>