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 a Buy Button page, you can customize the button's color, text, and appearance:

    Buy button creation new
    Product image, price and button Select this to display a product image and price beside the buy button. If you want to display a button without a price or an image, then you can customize these settings by editing the embed code.
    Buy Button only Select this to add a 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.
    Where the Buy Button links to
      Checkout opens a checkout dialog, without giving customers the option to add other products to their order.

      Cart links to your page's shopping cart, which is included when you add a buy button.

      Product Modal displays a modal window that shows the product image, the product's details, and an Add to cart button.
    Button text Edit the text that appears on the Buy Button. The wording you use can make a difference.

    Did you know?

    Your page's shopping cart receives items only from Buy Buttons that you've configured to send the user to the cart. You can do this by setting the Where the button links to option to Cart when you create a buy button in your Shopify admin. You can also edit the embed code of an existing Buy Button and set its data-redirect_to attribute to cart.

  5. If your product has multiple variants (like size or color), then you can select Include Variants to let your customer choose which variant they want to buy, or select a specific variant to associate with the Buy Button from the drop-down menu.

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

    Did you know?

    You can change these settings later by editing the embed code in the source HTML.

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

    Buy button embed code

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

  9. 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. When you're done setting up the collection, click Generate embed code.

    Did you know?

    You can change these settings later by editing the embed code manually.

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

    Generate collection embed code

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

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

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