---
title: Common patterns
description: 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](/docs/api/storefront-web-components/components/shopify-cart).
api_name: storefront-web-components
source_url:
  html: https://shopify.dev/docs/api/storefront-web-components/common-patterns
  md: https://shopify.dev/docs/api/storefront-web-components/common-patterns.md
---

# 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](https://shopify.dev/docs/api/storefront-web-components/components/shopify-cart).

***

## Buy 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](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context) 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](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context).
   * 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.

"Buy now" button example

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

Include discount codes

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

Sell 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.

Set 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.

### Examples

* #### Buy now button example

  ##### Default

  ```html
  <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> 
  ```

## Add 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](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context) 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](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context).

3. Display the cart using a native [HTML `<dialog>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog).

   * 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](https://shopify.dev/docs/api/storefront-web-components/components/shopify-cart#examples)

Note

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

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/storefront-web-components/components/shopify-cart)

[API docsshopify-cart component](https://shopify.dev/docs/api/storefront-web-components/components/shopify-cart)

### Examples

* ####

  ##### Add to cart example

  ```html
  <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>
  ```

## Product 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](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context) 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](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context) that's associated with a product.

3. Add a click event listener to the button that calls the [update method](https://shopify.dev/docs/api/storefront-web-components/components/shopify-context#attributes-propertydetail-update) 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`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) method.

### Examples

* ####

  ##### Product details example

  ```html
  <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>
  ```