Adding a Shopify Buy Button to Smart Builder

Adding a Shopify Buy Button to your landing page allows your page visitors to purchase your products seamlessly, without ever having to leave your landing page. 

This article will explain how to install a Shopify-generated buy button onto any Smart Builder page using Unbounce Apps. 

What You'll Need:

1. A Shopify account,
2. A Shopify Buy Button, that you've set up in your Shopify account,
3. A page in Smart Builder, and
4. An SSL-secure domain (https://) linked to your landing page.

Customizing Your Buy Button in Shopify

You will need to build your Buy Button in Shopify. 

Creating a Buy Button in Shopify will provide you with an embed code that you'll later paste into your Smart Builder page.

Because you'll be building this button outside of Unbounce, be sure to customize it to your liking; this includes the button's appearance (color, size, font, text, etc.), the button actions, and which Shopify product the button is linked to. 

Once you've created your Buy Button in Shopify, copy the embed code, and navigate to Smart Builder. 

Shopify Button and Unbounce Conversions

The Buy Button Actions you have set up in Shopify will determine how Unbounce will record that action as a conversion.

For example, if your Buy Button action is set to Add product to cart action, adding a product to your cart will send a conversion back to Unbounce.

Whilst setting up your Buy Button, be sure to toggle the Conversion Tracking button. See Enabling Conversion Tracking for Shopify Buy Buttons at the end of this article to learn more.

Installing the Shopify Buy Button App in Smart Builder

1. Navigate to the Apps tab on the left-hand side of Smart Builder.
2. Search and locate the Shopify Buy Button App.
3. Click the plus button next to Shopify Buy Button to install the app.
4. The Shopify Buy Button app will appear in the Add tab in Smart Builder:
   
   

You can now drag and drop the app anywhere on your page. To learn more about drag and drop, see this article: Using Drag and Drop in Smart Builder.  

Adding the Buy Button Embed Code into Smart Builder

1. Drag and drop the Buy Button app into a section in Smart Builder. 
2. Click the gear icon to launch the Settings:
   
3. Click Add a Shopify Button.
4. In the box that appears, paste your Buy Button embed code:
   
5. Click Add a Shopify Product to set these changes.
6. The button will appear on the landing page.

Testing the Buy Button

Toggle the Preview button at the top of Smart Builder to view & test your Buy Button in real time.

Be sure to Save and Publish your page when you're happy with these updates. 

Enabling Conversion Tracking for Shopify Buy Buttons

To enable conversion tracking on your Buy Button,

1. Single-click the Buy Button.
2. Click the Settings icon.
3. Toggle the Conversion Tracking button:
   

Be sure to Save your page to finalize these changes. 

Updating the Buy Button

According to Shopify's documentation, once you've embedded the Buy Button onto your landing page, you can no longer change the button. 

To update the button, you must create a new button in Shopify, and replace the code in Unbounce with the updated embed code.