[How To] Add A Shopify Checkout to Your Unbounce Landing Page

shopify
ecommerce

#1

754c875d94735208fe1bb00aae97e2a5d44f8737_1_690x137

Customers have been coming to us with a one main recurring challenge. Some are acutely aware of their problem, others simply blame it on their ads. The problem, we knew, was that their product pages weren’t converting as well as they should.

Our solution was both budget-friendly and proven to increase conversion rates, that is, ecommerce landing pages. This solution allowed us to quickly A/B test product landing pages and customize our pages based on our audiences, without having to deep dive into our customers’ websites and pitch them expensive redos.

Initially, we had to customize the Shopify embed code to allow the checkout drawer to appear on the unbounce landing page, as well as have the button appear in multiple sections. Thankfully Shopify has improved their button since and these functionalities are now possible with their base embed code.

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Heads up :point_right: this script requires a shopify account.


Step 1. Log Into Shopify

Log into your shopify store and install the “Buy Button” app from the app store (free).

Step 2. Generate Buy Button Embed Code

  1. Click on “select product”
  2. Select the product you’d like the button to direct to
  3. Style the button to match your landing page design
  4. Action on click: select “add to cart”
  5. Hit Generate code
  6. Hit Copy embed code to clipboard

Step 3. Paste embed code into Unbounce Page

  1. Create a custom HTML block & copy paste the embed code
  2. Position the HTML block on desktop & mobile

Step 4 (Optional). Allow users to checkout in the same window

By default, the Shopify button will open a new window for your checkout process. We find that this isn’t ideal, specifically on mobile, where certain users may have difficulty going back to the page.

If you’d like users to checkout in the same window, replace the following line of code:

<script type="text/javascript">

with

<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);

That’s it! Make sure to publish + test on Desktop & Mobile :rocket:

Custom current-window checkout:

Default checkout:

Want to take your Unbounce landing pages + convertables to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


#2

#3

@Stefano!! THIS. IS. HUGE!!! I remember @waseembashir, @Ashwin_Satyanarayana, @Adam_Lundquist, and @MPatterson22 have mentioned their marketing stacks involving ecommerce experiences a while back. This may be helpful for them to know about as well.

Nicely done!!! :muscle:


#4

This is GOLD! Thank you @Stefano!


#5

:raised_hands: “Small” disclosure! This simple addition to our e-commerce landing pages has in some cases doubled our conversion rate! We’ll have a case study going up shortly telling you the entire story. Stay tuned!


#6

This is very cool indeed. I wish there is a similar way to hack woocommerce.


#7

We can always try! It would be a much more custom approach.


#8

WOOHOO!! :partyparrot:

Full breakdown on our blog here:
https://unbounce.com/landing-pages/shopify-landing-page/