Adding a Buy Button or embedded collection 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 an option from the Buy Button page in your Shopify admin:

  • When you choose Select product, you can create a Buy Button to feature a single product:

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 choose Select a collection, you can create a Buy Button to feature all 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 an email, you can create a Buy Button to include in an email message or campaign. When a customer clicks the Buy Button in an email, the checkout page for the product appears.

Create a Buy Button

To create a Buy Button:

  1. Click Select product.

  2. From the Select a product dialog, select a product from your catalog or use the search to find a specific product. Click Select product at the bottom of the dialog.

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

    Buy button creation

  4. In the Template area, use the buttons to choose the layout for your Buy Button:

    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.
  5. In the Action on click list, 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. If a product has multiple product images, then these will also display.
  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:

    Buy button embed code

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

  10. 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. Click Select collection.

  2. In the Select a collection dialog, select the collection you want to feature:

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

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

    Buy button collection creation

  4. In the Action on click list, 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. If a product has multiple product images, then these will also display.
  5. 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.

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

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

    Generate collection embed code

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

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

  10. Save your changes to the source HTML.

Create an email Buy Button

To create a Buy Button for your email campaign:

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

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

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

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

    Email copy link

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

    Email button preview

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