Adding a buy button or embedded cart to your website

After you've added the Buy Button sales channel in your Shopify admin, you can create a new Buy Button for a product or a collection. This generates either a snippet of embed code for you to embed in the source HTML of your webpage, or a URL for you to add to your email campaign. After you embed it, the code displays a Buy Button.

Buy Buttons overview

There are a few different ways that you can use Buy Buttons. To get started, choose the one you want from the Buy Button page in your Shopify admin:

Choose buy button type

When you embed a product, it displays a Buy Button for a single product from your Shopify store:

Buy button example
When customers click the Buy Button, they are either taken to a checkout, shown a shopping cart, or are shown a product dialog, depending on how you customize the Buy Button in your Shopify admin. You can embed a product image with a Buy Button, or embed only the button itself.

When you embed a collection, it displays all of the products within one of your store's collections. Your customer can click the products to see their details and an Add to cart button:

Embedded collection example

When you embed a product in email, it displays a Buy Button in an email message or campaign. When a customer clicks an email Buy Button, the checkout page for the product appears.

Create a Buy Button

To create a Buy Button:

  1. From your Shopify admin, click Buy Button.

  2. In the Embed a product section, click Select product.

  3. From the Select a product dialog, select a product from your catalog or use the search to find a specific product:

    Buy button product collection modal
    When you're done, click Select product at the bottom of the dialog.

  4. From the Create page, you can choose a template and customize the button's color, text, and appearance:

    Buy button creation

  5. In the Template section, use the buttons to choose which type of embed you want to create:

    Icon of a t-shirt with a button below it Product image, price and button Select this template to display a product image and price beside the buy button.
    Icon of a cursor clicking a rounded button Buy Button only Select this template to add a buy button without any product image. You might want to do this if you already display your products elsewhere online but want to add a checkout link.
    Icon of a t-shirt with text and a button on the right side Product image, price, description, and button Select this template to display a product image, price, and description beside the buy button.
  6. If your product has multiple variants (like size or color), then you can use the Product variants drop-down menu to let your customer choose which variant they want to buy, or select a specific variant to associate with the Buy Button.

  7. In the Action on click section, use the drop-down menu to select what will happen when a customer clicks the buy button:

    • Add to cart adds the product to the embedded cart, which your customers can open by clicking the cart tab on the left-hand side of the page.
    • Direct checkout brings the customer to a checkout page, where they can purchase the product. If a customer chooses this option, then they aren't able to add additional products to their order.
    • Show product details displays a dialog with a description of the product, and an Add to cart button.
  8. After you choose a template, you can customize its appearance:

    • Button style and text includes style and color options for the Buy Button.
    • Typography includes font and color options for the text of the Buy Button and its product information.
    • Shopping cart includes text and color options for the embedded shopping cart.

      Note

      You can customize these settings later by editing the embed code.

  9. When you're done, click Generate code.

  10. From the Embed Code dialog, copy the embed code, or click Copy embed code to clipboard:

    Buy button embed code

  11. Open the source HTML of the webpage where you want to display the Buy Button. Learn more ›.

  12. Paste the embed code within the HTML where you want the button to appear, then save your changes.

Create an embedded collection

To create an embedded collection:

  1. From your Shopify admin, click Buy Button.

  2. In the Embed a collection section, click Select collection.

  3. From the Select a Product dialog, click Select collection, and then choose the collection you want to embed:

    Buy button product collection modal
    When you're done, click Select collection at the bottom of the dialog.

  4. On the Create page, you can choose a template and customize the button's color, text, and appearance:

    Buy button collection creation

  5. In the Action on click section, use the drop-down menu to select what will happen when a customer clicks the buy buttons:

    • Add to cart adds the product to the embedded cart, which your customers can open by clicking the cart tab on the left-hand side of the page.
    • Direct checkout brings the customer to a checkout page, where they can purchase the product. If a customer chooses this option, then they aren't able to add additional products to their order.
    • Show product details displays a dialog with a description of the product, and an Add to cart button.
  6. After you choose a template, you can customize its appearance:

    • Button style and text includes style and color options for the Buy Button.
    • Typography includes font and color options for the text of the Buy Button and its product information.
    • Shopping cart includes text and color options for the embedded shopping cart.

      Note

      You can customize these settings later by editing the embed code.

  7. When you're done, click Generate code.

  8. From the Embed Code dialog, copy the embed code, or click Copy embed code to clipboard:

    Generate collection embed code

  9. Open the source HTML of the webpage where you want to embed the collection. Learn more ›.

  10. Paste the embed code within the HTML where you want the collection to appear.

  11. Save your changes to the source HTML.

Create an email Buy Button

To create a Buy Button for your email campaign:

  1. From your Shopify admin, click Buy Button.

  2. In the Embed a product in email section, click Select product.

  3. From the Select a product dialog, click the product you want to feature in your email campaign, and then click Select product:

    Product page email embed

  4. If your product has more than one variant, choose the variant that you want to sell using the Buy Button. Each email Buy Button can feature only one product variant.

  5. From the Embed email link page, click Copy Link to copy the link to your Buy Button:

    Email copy link

  6. If you want to see how it will look to your customers, click Buy now in the preview:

    Email button preview

  7. Paste the link into your email campaign. For example, you can add email Buy Buttons to your email campaign in MailChimp.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free