Skip to main content

shopify-store
component

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-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 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, or metaobjects.

Was this section helpful?

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>