@shopify/storefront-components v0.0.12

Shopify Storefront Components

Easily add Shopify products to any website.

Setup

Either npm install or add the script to your HTML:

<script
  type="module"
  src="https://unpkg.com/@shopify/storefront-components@latest/dist/components.standalone.js"
></script>

Then add a shopify-context element to your HTML:

<shopify-context
  store-domain="https://your-store.myshopify.com"
  public-access-token="your-public-access-token"
></shopify-context>

Now you can add Shopify storefront components to your page.

Note: you can use multiple <shopify-context> components to render products from separate storefronts at the same time.

Example

See an example deployed at: https://shopify.github.io/storefront-components/standalone-build.html

Available Components

• shopify-product-title
• shopify-product-description
• shopify-product-price
• shopify-product-form
• shopify-checkout-button
• shopify-product-rating
• shopify-product-image-carousel

Customizing

You can customize the components using CSS variables. Some components have additional slots that you can use to add your own content. And some components have CSS parts that you can style using CSS selectors. See each component's documentation for more information.