How do I add a Shopify Buy button to my site?

Adding a Shopify buy button is simple by using the HTML block we provide you. Please follow the steps below to add a Shopify buy button to your site.

1. From your Shopify admin, click Buy Button.

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

8. When you're done, click Generate code.

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

buy.png

10. Now, go to your SpaceCraft Dashboard and access the Content area.

11. Enter the page you want to add a buy button to.

12. Select the green (+) icon to view your block options.

13. Select the HTML block option.

buybb.png

14. Inside the HTML block, paste the code from Shopify into the large code box.

15. Select the blue Save button.

16. Select the green Publish button if you want to make your changes live now.

Powered by Zendesk