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.
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:
5. In the "Template" menu, use the buttons to choose the layout for your Buy Button:
|Product image, price and button||Select this template to display a product image and price beside the Buy 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.|
|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. From the Embed Code dialog, copy the embed code, or select the blue "Copy embed code to clipboard" button:
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.
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.