1. Documentation
  2. Unbounce Apps
  3. Purchase & E-Commerce Apps

Adding a Shopify Buy Button to Smart Builder

Follow
Avatar
Tas Kurtu
Last Updated

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.

Customize Your Buy Button in Shopify

Do note that this step is entirely outside of Unbounce. 

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 back to Smart Builder. 

Note:

Note: At this time, this Shopify Buy Button App will not fire conversions back to Unbounce. For custom reporting on the number of purchases, you will need to refer back to Shopify. 

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. You may see a dialog box that appears, explaining that you can swap an element on your page with this App:
    A pop-up on top of Smart Builder explaining that this App is swappable.

To learn more about changing elements, see our documentation: Changing Elements on your Smart Builder Page. 

Once you've installed the App, you can apply it to the landing page.

Embedding the Buy Button Code into Smart Builder

Once you've installed the Shopify Buy Button App, you can replace any other element on your page - an image, button, headings, etc. - with this Buy Button. 

For this example, let's replace a snippet of text with a Shopify Buy Button.

  1. Single-click the element in Smart Builder you'd like to replace with the Buy Button.
  2. Click the Swap Element icon that appears at the bottom of the element: 
  3. A drop-down menu will appear with different element options to swap the existing one with; select Shopify:
    A drop-down menu with different swappable elements listed, including Shopify.
  4. Click Add a Shopify Product:Gif demo of user clicking the swappable element icon and selecting Shopify from the list. A button appears with the label 'Add a Shopify Product'.
  5. In the box that appears, paste your Buy Button embed code:
    Field to paste Shopify Buy Button embed code.
  6. Click Add a Shopify Product to set these changes.
  7. The button will appear on the landing page:
    Blue Shopify Buy Button appearing on Smart Builder 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. 

Updating your Shopify Buy Button

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

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

To replace the Buy Button embed code in Smart Builder, 

  1. Single-click the Buy Button. 
  2. Click the three dots icon, and select Change Buy Button:
    Red arrow pointing to the 'Change buy button' next to element.
  3. The embed code window will re-appear, where you can replace the existing code with a new one.

Be sure to Save your page to finalize these changes. 

Related articles