How to Add a Shopify Buy Button to a Classic Builder Page

You can sell Shopify products directly from a Classic Builder page by embedding Shopify's Buy Button. This lets you test product landing pages without changing your store. The Buy Button can open a cart drawer on the page and can appear in more than one section.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML and JavaScript.

Before you start

You need a Shopify store with the free Buy Button app installed from the Shopify App Store.

Generate the Buy Button embed code

1. In the Buy Button app, click Select product and choose the product the button should sell.
2. Style the button to match your page.
3. Set Action on click to Add to cart.

4. Click Generate code, then click Copy embed code to clipboard.

   

Add the button to your page

1. Add a Custom HTML element and paste in the embed code.
2. Position the element on both the desktop and mobile versions of the page.
3. Save, republish, and test the checkout on desktop and mobile.

(Optional) Open checkout in the same window

By default, the Buy Button opens checkout in a new window, which can make it hard for mobile visitors to return to your page. To keep checkout in the same window, find the following line in the embed code:

<script type="text/javascript">

Replace it with the following:

<script data-shopify-buy-ui="">
window.open = function (open) {
return function (url, name, features) {
// Pass through non-shopify URLS
if (url.indexOf("myshopify") < 0) {
return open.call(window, url, name, features);
}
// Use current window
console.log("Redirecting to:", url);
window.location.href = url;
return null;
};
}(window.open);

With this change, checkout opens in the current window: