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

6 years ago
25 April 2018
50 replies
1289 views

Userlevel 7

Stefano
627 replies

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

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

Step 3. Paste embed code into Unbounce Page

Create a custom HTML block & copy paste the embed code
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?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

Show first post Hide first post

50 replies

Page 2 / 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

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?

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

Stefano
Author
627 replies
5 years ago
26 March 2019

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

Jess
Former Community Manager @ Unbounce
831 replies
5 years ago
26 March 2019

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!

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…

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

Hi @Abeer_Iqbal ! Great question! You can absolutely do this. The Buy Button in Shopify allows you to select viewing options before it generated the script/embed code. You would be able to select the option to display all variant options on the landing page thanks to this option.

@Jonathan This is great! I remember a couple of years ago, working in an agency, and for ecomm clients that used Shopify, it was always the biggest dread, because we couldn’t do our regular best practices on Shopify.

I’m thinking about running this for my current company because it seems like it’d be a welcome improvement to our current Shopify store experience.

However, I just want to confirm, before I go down this route, is conversion tracking (in this case, purchases), on Google Ads, on Google Analytics, and on Facebook, working? I understand we may not be able to track on Unbounce itself, but we can track sales because it should lead to our regular Thank You Page, correct?

Hi @Brian_D! It’s definitely a struggle having to deal with some of the stores out there, and best of all this actually works so much better.

The tracking works! Just make sure you pass URL parameters if you’re using a click-through button. We personally like to use Google Tag Manager to setup all our tracking for both Facebook ads and Google ads. We also make sure to trigger an event whenever someone clicks/taps on the call to action (i.e. Buy Now, Add to cart, etc).

Keep in mind there is no actual cart. That’s the only thing that won’t be part of your tracking.

Does anybody know how to track conversions in Unbounce when purchases are made from the buy button?

Hi @Daniel_Peterson! Sadly tracking the purchase conversion IN Unbounce itself isn’t possible for the moment (I say for the moment because I’m hopeful it will be 😀 ). If you want to conduct an AB test regardless, Facebook and Google will both track the purchase and will still attribute it to a user who landed on the Unbounce page. You could do your test in Facebook or Google. Let me know if you need help doing so. Cheers!

Hi @Jonathan, thank you for the reply. How could I go about doing that test in Google? Would I need to create different pages for the variants in Unbounce?

You could do that, but I prefer keeping them as variants. It makes it easier to create other iterations later. You can link directly to a variant. This is how you’d do that:

unbouncepages.com/landing-page-name/a.html
unbouncepages.com/landing-page-name/b.html

Where the “a” and the “b” are the variants.

@Jonathan, beautiful! Thank you. Is there a way you usually go about doing that on Google? Or do you stick with one variant for a week and then switch out for the other?

You’d need to create a experiment for a real AB test. You can learn more here:
https://support.google.com/optimize/answer/6211930?hl=en

I also take back using the variant URL! (sorry) I remember there being a reason why that’s not a good idea. Best to stick to 2 different pages in that case.

Thank you for the help, will definitely be implementing an A/B test on Google!

Thanks Jonathan - no way to do it via the javascript to count click throughs instead of actual views of the next stage of the funnel? We don’t have access to editing the checkout.

If you make the CTAs on your page click-through to a unique checkout URL, you can definitely count the Button Click as a conversion yes! That doesn’t mean they are actually letting the checkout page load, but it’s better than nothing! I’d make sure to a have CTA that is very clear about the action. For instance “Buy Now” or “Checkout”. “Add to cart” might be misleading if the user is taken straight to checkout, which will put off your numbers.

Hi, I’m a little confused as to why Shopify is even involved in this situation. If you want a Buy button why not just have a PayPal Buy Now button and not bother with all the Shopify integration?

Thanks for the quick response @Jonathan! So if I’m understanding right, you would create a unique checkout URL that would pass the product ID through to the main website?

So the user would ultimately have to leave the Unbounce landing page to view the cart on the primary site and ultimately checkout?

Actually we try to keep most of the experience in our pages. Often we don’t have a cart. Through the landing pages we can create upsells for quantity or for other products, and then redirect to the checkout by skipping the cart. However there are situations where this might not be ideal. We haven’t found a solution similar to Shopify yet sadly, where the cart rolls over the page from the right hand side.

Page 2 / 2

Step 1. Log Into Shopify

Step 2. Generate Buy Button Embed Code

Step 3. Paste embed code into Unbounce Page

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

Reply

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded