Add a Shopify Button

Adding a Shopify buy button is simple by using the HTML block.

1. Login to your Shopify admin area, then select Buy Button.

2. Click Select product.

3. Select a product from your catalog or use the search to find a specific product in your business. Click Select product at the bottom of the dialog.

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

Buy button creation

5. In the Template menu, 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.


6. In the Action on click field, use the drop-down menu to 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.

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

8. When you're done, select the blue Generate code button.

9. Copy the embed code, or select the blue Copy embed code to clipboard button.

buy.png

10. Now, within your website, click on the Content tab in the gray navigation bar and choose the Page you want to add your Buy Button to.

Screen_Shot_2018-10-02_at_12.49.11_PM.png

11. Select the green (+) icon to view your block options, and add the HTML block.

Screen_Shot_2018-10-02_at_12.49.30_PM.png

12. Inside the HTML block, paste the code you copied from Shopify into the large text field.

13. Select the blue Save button, and then click the green Publish button to take your changes live!

Powered by Zendesk