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.
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 display. For example, you might want to add the Buy Button to your Wordpress blog or Squarespace website.
The appearance of the Buy Button can't be changed after you embed it on your website. If you want to change it, then you must create a new button in the channel and replace the original code with the new code.
On this page
Customizing Buy Buttons
You can customize a Buy Button's appearance and how it behaves:
- its color
- its size
- its font
- the action that happens when the button is clicked
- whether the checkout opens in a new browser window
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.
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, then 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 isn't available when you choose the Full view layout because the Full view layout already displays all of the product details.
You can also choose if the checkout opens in a new browser window or if it opens in the same tab as your website. The default behavior is that the checkout opens in a new window.
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 include 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:
Desktop
From your Shopify admin, go to Settings > Apps and sales channels.
From the Apps and sales channels page, click Buy Button.
Click Open sales channel.
Click Create a Buy Button.
Click Product Buy Button.
Select the product from your catalog or use the search to find a product. Click Select.
-
Optional: customize the Buy Button.
- If your product has variants, then select All variants or select the variant that you want to include.
- Choose a layout style and the action that happens when a customer clicks the button. You can also customize the button's appearance.
- By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click Advanced settings > Redirect in the same tab.
Click Next.
Click Copy code.
Open the HTML editor for the webpage where you want to display the Buy Button. Refer to Adding Buy Button code to HTML.
Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.
iPhone
- From the Shopify app, tap the … button.
- In the Sales channel section, tap Buy Button.
- Tap Create a Buy Button.
- Tap Product Buy Button.
- Select the product from your catalog or use the search to find a product, and then tap Select.
- Optional: Tap Customize.
- If your product has multiple variants, then select All variants or select a variant from the drop-down list.
- Choose a layout style and the action that happens when a customer clicks the button. You can also customize the button's appearance.
- By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Tap Advanced settings > Redirect in the same tab.
- Tap Done.
- Tap Copy code.
- Open the HTML editor for the webpage where you want to display the Buy Button. Refer to Adding Buy Button code to HTML.
- Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.
Android
- From the Shopify app, tap the … button.
- In the Sales channel section, tap Buy Button.
- Tap Create a Buy Button.
- Tap Product Buy Button.
- Select the product from your catalog or use the search to find a product, and then tap Select.
- Optional: Tap Customize.
- If your product has multiple variants, then select All variants or select a variant from the drop-down list.
- Choose a layout style and the action that happens when a customer clicks the button. You can also customize the button's appearance.
- By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Tap Advanced settings > Redirect in the same tab.
- Tap Done.
- Tap Copy code.
- Open the HTML editor for the webpage where you want to display the Buy Button. Refer to Adding Buy Button code to HTML.
- Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.
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:
- Added the products in your Shopify Admin,
- Made the products available to the Buy Button sales channel
- Created the collection.
Steps:
Desktop
From your Shopify admin, go to Settings > Apps and sales channels.
From the Apps and sales channels page, click Buy Button.
Click Open sales channel.
Click Create a Buy Button.
Click Collection Buy Button.
Select the collection or, use the search to find the collection. Click Select.
-
Optional: customize the Buy Button.
- Choose the action that happens when a customer clicks the button. You can also customize the button's appearance.
- By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click Advanced settings > Redirect in the same tab.
Click Next.
Click Copy code.
Open the HTML editor for the webpage where you want to display the Buy Button. Refer to Adding Buy Button code to HTML.
Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.
iPhone
- From the Shopify app, tap the … button.
- In the Sales channel section, tap Buy Button.
- Tap Create a Buy Button.
- Tap Collection Buy Button.
- Select the collection or, use the search to find the collection, and then tap Select.
- Optional: Tap Customize.
- Choose the action that happens when a customer clicks the button. You can also customize the button's appearance.
- By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Tap Advanced settings > Redirect in the same tab.
- Tap Done.
- Tap Copy code.
- Open the HTML editor for the webpage where you want to display the Buy Button. Refer to Adding Buy Button code to HTML.
- Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.
Android
- From the Shopify app, tap the … button.
- In the Sales channel section, tap Buy Button.
- Tap Create a Buy Button.
- Tap Collection Buy Button.
- Select the collection or, use the search to find the collection, and then tap Select.
- Optional: Tap Customize.
- Choose the action that happens when a customer clicks the button. You can also customize the button's appearance.
- By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Tap Advanced settings > Redirect in the same tab.
- Tap Done.
- Tap Copy code.
- Open the HTML editor for the webpage where you want to display the Buy Button. Refer to Adding Buy Button code to HTML.
- Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.