Skip to main content

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>

<!-- 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?