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


Userlevel 7
Badge +4

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.

🚨
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 👉 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 🚀

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


50 replies

Userlevel 7
Badge +1

@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!!! 💪

This is GOLD! Thank you @Stefano!

Badge +2

🙌 “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!

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

Badge +2

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

Userlevel 7
Badge +1

WOOHOO!! :partyparrot:

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

This is getting closer to exactly what I’m looking for. BUT, is there a way to have the Add to Cart button then take you to a second page for an Upsell Product? Then to a third page for a Downsell Product? Then go to check out.

Appreciate the response on this! Thanks!

tom

Badge +2

Hi @americancolors! Good Q! We have not tried that YET, but we are planning on finding a workaround for it. Theoretically it’s possible. Would you like me to ping you as soon as we test this out?

Yes, please! If you check Leadpages, they have templates and integration with Shopify (which I use), and it’s making me real tempted to use their service.

I think that a ecommerce sales funnel landing page function would really be good–right now there’s just two for Shopify that are good (funnel buildr and zipify) and both pretty pricey.

thanks,
tom

Okay Jonathan,
I tried the script replacement as in the above. Everything works UNTIL I try to check out (granted this is in preview mode). Do I need to publish it in order to confirm that checkout and beyond pages work?

Thank you!
tom

Badge +2

It might be. Try to publish (make sure you’re not sending paid traffic to the page). If it doesn’t work send me a screen grab of what’s happening and of the script you copy pasted 🙂

@stefano

Great concept but I can’t find that Shopify App?

I found one that’s called “Buy Button Channel” by Shopify on https://apps.shopify.com/collections/made-by-shopify

But, it doesn’t look like the one in your screenshot and only has 2 stars?!

Badge +2

Hi @Justin1, it’s not a Shopify app. It’s a functionality that Shopify offers. You can read more about it here:

This is awesome, but how did you guys track the purchase conversions from your Shopify thank you page?

Badge +2

Good question @Victor! Sadly, for now, there is no straight integration to track conversions in Unbounce. However, we did it by looking at Shopify’s analytics and seeing what sales came through the Shopify button. You can filter your sales to see those numbers in Shopify.

Userlevel 6
Badge +4

This is amazing, @Stefano! Do you also have some tips as to how to track conversions back to a landing page in Google Analytics?

I have followed your excellent guide and have the following scenario

Landing page with Buy Button: go.customerdomain.com/product/
Shopify store: customerdomain.myshopify.com

As always I want to track everything in Google Analytics. I have succesfully defined a goal based on target url “thank_you” and verified that it fires. However my setup is not tracking the conversion back to the landing page and showing that the conversion came from source/medium=direct/none

What do I need to do to make the completed checkout count towards the landing page /product/ and the correct traffic source?

Hey @Jonathan, did you find any work around in order to track Facebook events, like ATCs or Purchase? I’d like to run ads optimized for Purchase, but can’t seem to find a way to track conversions (besides ‘PageView’ that loads with the landing page itself), even spoke to Shopify, but as it’s outside the platform, they don’t support it.

Any insights on how to solve this?

Badge +2

Hi Gabriel! If your goal is to track these events within Facebook, they will still get attributed even if you’re using a landing page. For multiple products/bundles on the same landing page, we create a unique checkout link for each product and link to it through our CTA button. This way you are at least tracking Initiate Checkouts and Purchases in Facebook (you’d be skipping the ATC step). Alternatively you can also use the Shopify Button. This will also skip the ATC, but will track/attribute Initiate Checkouts and Purchases. The conversion won’t be reported in Unbounce itself, but if your goal is to AB test, just create a split test in Facebook and use the landing page variant URLs (i.e. http://www.abc.com/a.html and http://www.abc.com/b.html). I’d love to know what you’ve tried and potentially find out where you might be going wrong.

Hi @Jonathan is there a way to do this exact thing same this with Recharge subscriptions?

Userlevel 7
Badge +4

Hi there! I don’t think it is possible out of the gate with ReCharge, but I believe it was possible with Bold Subscriptions. @Jonathan can you confirm?

Userlevel 7
Badge +1

Hey folks! Assuming some of you have had some experience with using Unbounce for your ecommerce strategy, I wanted to drop a post on your radar.

One of Unbounce’s product managers (@Jordana) is doing some research into the process behind ecommerce setup using Unbounce. If you have a moment, please chime in!

Badge +2

Hey @mike_wgac Recharge does not connect with the Shopify Buy Button sadly.

As an alternative solution, you can duplicate your product (and hide it in your store), and use a subscription app that works with the Shopify Button. In the future this would mean you’re able to generate purchases for subscriptions on any page/site outside of the store (such as Unbounce).

This is the app we would use:

@Jonathan
Hi, we sell customize items on shopify where people need to upload their picture, names etc. Can i use unbounce lander and have the same option?

I am a current user for unbounce and doing led gen.

Thank you…

Badge +2

Hi @Khorshed_Alam! I would definitely recommend Unbounce. However perhaps it’s better to maintain the uploading component in your store, in order to keep all data centralized in one place. This depends on how your are currently setup. Can I have a look at the store/website?

Hey all! This looks great and would work really well for me, however, what happens if your product comes in multiple colours and sizes? Would the user be able to select the variant prior to clicking “add to cart”? Any advice is appreciated

Reply