[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/


#9

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


#10

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?


#11

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


#12

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


#13

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 :slight_smile:


#14

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


#15

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


#16

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


#17

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.


#18

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?