Adding a Buy Button or embedded collection to your website

After you add the Buy Button sales channel in your Shopify admin, you can create a new Buy Button for a product or a collection:

Buy button example

There are two ways to create Buy Buttons:

  • You can generate code to embed in the HTML of a webpage, which displays a Buy Button on that page. You can customize the appearance of Buy Buttons, and link them to your Shopify checkout, a shopping cart, or a product description. The Buy Button code can feature a single product or a collection.

  • You can generate a checkout link to add to an email campaign, direct message, or social media post.

Create a Buy Button for a single product

You can create a Buy Button that features a single product that includes one or all of the product's variants. When you create the Buy Button, you can choose a template and customize the button's color, text, and appearance, as well as the action that happens when a customer clicks it. Learn more about customizing Buy Buttons.

Steps:

  1. Click Create Buy Button.

  2. Select a product from your catalog or use the search to find a product. Click Select product.

  3. If your product has multiple variants, then select All variants or select a variant from the drop-down list.

  4. Choose a template and customize the button's color, text, and appearance, as well as the action that happens when a customer clicks the button:

    Buy button creation

    To learn more about the different ways that you can customize Buy Buttons, see Customizing Buy Buttons

  5. Click Generate code.

  6. Click Copy code to clipboard to copy the code.

  7. Open the HTML editor for the webpage where you want to display the Buy Button. See Adding Buy Button code to HTML.

  8. Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.

Create an embedded collection

You can create an embedded collection to feature the products in a collection with Buy Buttons:

The embedded collection displays each product in the collection with its own Buy Button, so that customers can choose any product from the collection. When you create the embedded collection, you can customize the color, text, and appearance of the Buy Buttons on the featured products, as well as the action that happens when a customer clicks the button. The button for each product in the collection uses the same customizations. Learn more about customizing Buy Buttons.

Steps:

  1. Click Create Buy Button.

  2. Click Collections.

  3. Select a collection, and then click Select collection.

  4. Customize the buttons' color, text, and appearance, as well as the action that happens when a customer clicks the button:

    To learn more about the different ways that you can customize Buy Buttons, see Customizing Buy Buttons.

  5. Click Generate code.

  6. Click Copy code to clipboard to copy the code.

  7. Open the HTML editor for the webpage where you want to display the embedded collection. See Adding Buy Button code to HTML.

  8. Paste the embed code within the HTML where you want the embedded collection to appear, and then save your changes.

Customizing Buy Buttons

You can customize a Buy Button's color, size, and appearance, as well as select the action that happens when the button is clicked. When you create a Buy Button for a single product, you can also choose a template for the Buy Button. You can preview your choices before you generate the code from the Create page.

Buy Button Templates

When you create a Buy Button for a single product, you can choose from the following templates:

Icon of a product image with a button Basic template Select this template to display a product image and price beside the Buy Button.
Icon of only a rounded button Button template 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 product image with text and a button on the right side Enhanced template Select this template to display a product image, price, and description beside the Buy Button.

Buy Button actions

When you create a Buy Button, you can select an action from the Action on click list. When someone clicks the Buy Button on a page, one of the following things will happen:

  • Adds product to cart adds the product to a shopping cart. Customers can continue shopping and add additional products to the cart.
  • Directs shoppers to checkout brings the customer directly to your checkout, where they can purchase the product. Customers aren't able to add additional products to their order.
  • Shows product details displays a description of the product with an Add to cart button. If a product has multiple product images, then these will also display.

Buy Button size and alignment

You can select the size and alignment of the parts of the Buy Button from the Size and Alignment drop-down menus. You can preview the Buy Button to help you decide which options will fit best on your webpage.

Buy Button appearance

  • Button style and text includes style and color options for the button part of the Buy Button.
  • Font style 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.

You can use the Buy Button channel to create checkout links, which your customers can click to add a single product variant to a checkout. You can add checkout links to email messages, social media posts, or direct messages, to easily share a product with customers.

Steps:

  1. Click Create checkout link.

  2. Select the product, and then click Select product.

  3. If your product has more than one variant, then select a variant. Each checkout link can feature only one product variant.

  4. Click Copy Link to copy the link.

  5. Paste the link directly in a message, email, or social media post.

You can share checkout links in email campaigns, social media posts, or direct messages. After you create the link, you can copy the link text and paste it anywhere to share the direct checkout with customers.

The following examples show a few different ways that you can use checkout links:

  • Paste the link in a Twitter post to let your followers easily buy a product on sale.
  • Text the link to a customer who messages you asking how to buy a product.

Ready to start selling with Shopify?

Try it free