Creating a Buy Button

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

Buy button example

After you create a Buy Button, you copy the automatically generated code and then add the code to the webpage or blog post where you want the button to appear. For example, you might want to add the Buy Button to your Wordpress blog or Squarespace website.

The appearance of the Buy Button cannot be changed once you embed it on your website. If you want to change it, you must create a new button in the channel and replace the original code with the new code.

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.

As you customize the button, you can preview your changes. You can test the behavior of the Buy Button by clicking the preview.

Layout style

You can choose the layout of the Buy Button.

Available layouts for Buy Buttons
Basic Select this layout to add a Buy Button without any product image. You might want to do this if you already display your products elsewhere online but just want to add button to make the purchase.
Classic Select this layout to display a product image and price beside the Buy Button. This layout is useful for a quick product preview, such as in a blog post.
Full view Select this layout to display a product image, price, and description beside the Buy Button. This layout emulates a product details page in your online store.

Buy Button actions

When you create a Buy Button, you can select the action that occurs when the button is clicked.

If the Buy Button is for a collection, the action applies to each product in the collection.

  • Add product to cart adds the product to a shopping cart. Customers can continue shopping and add additional products to the cart.
  • Direct 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.
  • Open product details displays a View product button. When the customer clicks the button, they can see the description of the product, select any available product variants, and add the product to the cart. If a product has multiple product images, then these also display.

    This option is not available when you choose the Full view layout because the Full view layout already displays all of the product details.

Buy Button appearance

  • Button style includes shape, color, and typography for the button part of the Buy Button.
  • Layout Depending on the layout style that you choose, you can customize settings such as button alignment, image size, button text, font, color, and size.
  • Shopping cart includes text and color options for the embedded shopping cart. You can also enable and customize the label for the Order note field. You can use order notes to collect special instructions from customers about how to prepare and deliver an order. The Additional information field lets you communicate a message to your customers.

    You can only edit the settings for the shopping cart if you have chosen Add product to cart or Open product details as the button's action.

  • Detailed pop-up includes the settings for the product details pop-up window. You can customize the text of the button, whether or not to show the quantity field, the colors used for the background and labels, and the font and font size of the labels. You can only edit these settings if you have chosen Open product details as the button's action.

Create a Buy Button for a single product

You can create a Buy Button for a single product. The Buy Button can include one or all of the product's variants. When you create the Buy Button, you choose a layout style 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.

Before you create a Buy Button for a product, you must have added the product in your Shopify Admin and made it available to the Buy Button sales channel.

Steps:

Create a Buy Button for a collection

When you create a Buy Button for a collection, you are actually creating a button for each product in the collection.

When you create the Buy Button, you choose a layout style 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.

Before you create a Buy Button for a collection, you must have:

Steps:

Ready to start selling with Shopify?

Try it free