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 create and embed a Shopify buy button on your SpaceCraft website.

1. Login to your Shopify admin area, then select 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 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.
Note

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

9. From the Embed Code dialog, copy the embed code, or select the blue "Copy embed code to clipboard" button:

buy.png

10. Now, access your SpaceCraft Dashboard and navigate into 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, now paste the code you copied 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 right now.

Powered by Zendesk