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.

string
required

The myshopify.com domain of the store.

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

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

CountryCode

The country of the store.

LanguageCode

The language of the store.

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>