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

6 years ago
25 April 2018
50 replies
1285 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

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!

Hi all - any advice on if this is possible to implement wit the smart traffic feature? I have had promising results from smart traffic, and I want to implement a variant that uses this checkout. The problem is that Unbounce doesn’t count conversions.

Is there a way to tweak the javascript so Unbounce will count click throughs to initiated checkout as a conversion?

You can do that if you have access to the liquid for Shopify’s checkout/purchase pages. You would add Unbounce’s external tracking script. You would need to be on Shopify’s Advanced or Plus plan in order to be able to do that however.

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?

Userlevel 7

Hey @gijeet,

I’m really not sure where your confusion comes from since the post here is a how to on adding a shopify checkout to your Unbounce page.

Paypal is essentially a payment processor while Shopify is an eCommerce platform. Two completely different things.

The intended purpose of the post is to help existing Shopify store owners build dedicated landing pages for their products all the while keeping consistency with their brand and checkout flow.

If you don’t already have a Shopify store, it makes little sense to open one up just to be able to accept payments so that’s where PayPal and a slew of other options come in.

Best,
Hristian

Hi @gijeet, @Hristian beat me to it. His response is 10/10.

Hi All,

I’ve used this functionality with great success, however, our company has decided to change storefronts from Shopify to WooCommerce. Do any of you know how to replicate this functionality for Woo?

Thanks in advance!

Hi @Brummsy, glad to hear it worked well for you! For Woo we usually create a unique checkout URL and create a click-through CTA on the landing page.

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.

@Jonathan using a custom html for “add to cart” button on an unbounce page. After clicking “add to cart”, product appears in the cart. When hitting checkout, I get the notification “store.myshopify.com refused to connect”. Is this a shopify or unbounce issue?

Fairly certain this is a Shopify issue, mainly because your cart seems to be functioning properly!

Hi @Stefano @Jonathan I can’t seem to find this buy button app on the Shopify store! Did it get taken down? If so, do you know of a workaround? I’d love to be able to keep as much of the customer journey on the landing page to remove as many steps as possible and this seems like a good possible solution.

Update: As of August 2022 the Shopify Buy Button sales channel offers same window checkouts as a built-in feature.

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