Skip to main content

Common patterns

Storefront Web Components can be customized for many different applications. This guide covers some of the most common ways they can be used to sell online, and includes ready-to-use examples that you can adapt to your own storefront. To learn more, see the component documentation.

Anchor to buy-now-buttonBuy now button

Add a button that redirects the customer to a Shopify-hosted checkout page. This is useful when you want to sell a single product.

To create a "Buy now" button:

  1. Add a button component inside a shopify-context component that's associated with a product.

  2. Call the buyNow() method in the button component's onclick attribute.

    • The method needs an event object where the event target must be inside a product context component.
    • The component will redirect the customer to the checkout page with the selected product.

  3. Customize the state and location of the checkout page:

    • Add discount codes by passing them in the options parameter: {discountCodes: ['CODE1', 'CODE2']}
    • Set the target window or tab for the checkout page: {target: '_blank'}
    • Combine both: {discountCodes: ['SAVE10'], target: '_blank'}

  4. Configure the button state with the shopify-attr--disabled attribute. You can use this to automatically disable the button when the product variant is not available for sale.

Note

You can mix "Buy now" buttons from different stores on the same page. Each button will open the checkout page of its own store.

Anchor to buy-now-button-"buy-now"-button-example"Buy now" button example

Add a button that redirects the customer to a Shopify-hosted checkout page.

Anchor to buy-now-button-include-discount-codesInclude discount codes

Add discount codes to the checkout. This applies the discount codes automatically when the customer reaches checkout.

Anchor to buy-now-button-sell-from-multiple-storesSell from multiple stores

Use "Buy now" buttons from multiple stores on the same page. Each button will open the checkout page of its own store.

Anchor to buy-now-button-set-a-custom-target-windowSet a custom target window

Choose where the checkout page opens by setting the target as a new tab or the same tab. You can also specify discount codes that will be applied to the cart.

Buy now button example

<shopify-store
id="store"
store-domain="https://your-store.myshopify.com"
>
</shopify-store>

<!-- The context is bound to the store -->
<shopify-context
type="product"
handle="handle-of-product"
>
<template>
<shopify-variant-selector></shopify-variant-selector>
<!-- The product added will be whatever
variant is selected for the context product handle.
The disabled attribute is added if the variant is not available for sale.
-->
<button
onclick="getElementById('store').buyNow(event);"
shopify-attr--disabled="!product.selectedOrFirstAvailableVariant.availableForSale"
>
Buy now
</button>
</template>
</shopify-context>

Anchor to add-to-cartAdd to cart button

Add a button that lets customers add your products to their cart. This is useful when you want to sell multiple products, because it lets customers add products to their cart without being redirected from your site to the checkout page.

To create an "Add to cart" button:

  1. Add a button component inside a shopify-context component that's associated with a product.

  2. Call the addLine() method in the button component's onclick attribute to add the product to the customer's cart.

    • This method requires an event object or a product data object.
    • If using an event, the event target must be inside a product context component.

  3. Display the cart using a native HTML <dialog> element.

    • To show it as a popup modal, call the showModal() method.

  4. Customize the cart's styling and content with CSS parts and slots. View examples

Note

The cart component doesn't support mixing products from multiple stores.

API docsshopify-cart component

Add to cart example

<shopify-store
store-domain="https://your-store.myshopify.com"
>
</shopify-store>

<!-- The context is bound to the store -->
<shopify-context
type="product"
handle="handle-of-product"
>
<template>
<shopify-variant-selector></shopify-variant-selector>
<!-- The product added will be whatever
variant is selected for the context product handle.
The disabled attribute is added if the variant is not available for sale.
-->
<button
onclick="getElementById('cart').addLine(event).showModal();"
shopify-attr--disabled="!product.selectedOrFirstAvailableVariant.availableForSale"
>
Add to cart
</button>
</template>
</shopify-context>

<shopify-cart id="cart"></shopify-cart>

Anchor to product-details-dialogProduct details dialog

Add a button that lets customers view details about a product on a separate dialog. This is useful if you have limited space on your page, but still want to provide a way for customers to view product details.

To create a "View details" button":

  1. Add an HTML <dialog> element to your page. Inside the dialog, place a product shopify-context component with a wait-for-update attribute. The wait-for-update attribute prevents the dialog from loading product details until a specific product is selected. Include a template and components within the product context to display the product information.

  2. Add a button element inside another shopify-context component that's associated with a product.

  3. Add a click event listener to the button that calls the update method on the product context inside the dialog. This links the dialog's product context (destination) with the product context nearest to the button (source), allowing the dialog to display details for the selected product.

  4. Display the dialog by calling the native showModal method.

Product details example

<shopify-store
store-domain="https://your-store.myshopify.com"
country="CA"
language="FR"
>
</shopify-store>

<script>
function showProductDetails(event) {
// Update a dialog context with a selected product
document.getElementById('dialog-context')
.update(event);

// Show the dialog
document.getElementById('dialog')
.showModal();
}
</script>

<!-- A list of products -->
<shopify-list-context
type="product"
query="products"
first="10"
>
<!-- This template is repeated for each product-->
<template>
<!-- A button that shows the product details -->
<button
onclick="showProductDetails(event)"
>
<shopify-data
query="product.title"
></shopify-data>
</button>
</template>
</shopify-list-context>

<dialog id="dialog">
<!-- A product context that waits for an update to render -->
<shopify-context
id="dialog-context"
type="product"
wait-for-update
>
<template>
<div>
<shopify-data
query="product.description"
></shopify-data>
</div>
</template>
<div
shopify-loading-placeholder
>
Loading...
</div>
</shopify-context>
</dialog>