Previous Article - Step #3 - Creating Your First Sticky Checkout Funnel
Shopify Redirect & Code Embed
In this article, we'll walk through the steps to embed our Sticky.io Checkout Code in your Shopify Theme.
This includes instructions for targeting various checkout buttons across different Shopify themes, including the checkout cart, cart slideout, and product detail page (PDP) buttons, while dynamically including product IDs, variant IDs, and quantities in the redirect URL.
Not a coder? Don't worry! We're quite literally copying and pasting 1 thing.
Without further ado, let's begin!
Where to find Shopify Theme Code
To begin, login into your Sticky.io Services Dashboard accessible by logging into your Sticky.io Account > Services > Sticky Checkout.
Once loaded, Checkout > Funnels > Shopify > ⚙️ > Copy.
Once we've copied the code, let's segue over to your Shopify Store and embed it in your Shopify Theme Code.
Embedding Code in Shopify Theme
Once logged into your Shopify Store, navigate over to Online Store > Themes.
It's highly encouraged to duplicate your Store Theme so that if mistakes occur you can easily revert the changes without impacting traffic on your production store.
Next Customize > click the Ellipsis > Duplicate.
Following click Edit Code.
From here we'll be taken to your Shopify Store Theme liquid. If this is your first time seeing Theme Liquid it can certainly be intimidating. But below I'll show you exactly where to copy and paste.
On the left navigation menu expand Layout > theme.liquid.
We're looking for where the </head> ends. This is typically found towards the bottom of your theme.liquid file.
To narrow down our search, click anywhere in the theme.liquid file and:
Windows: CTRL + F - And type head
MacOS: Command + F - And type head
Once you've found it, we'll press enter beside </script> to create a new row and copy and paste the code from our clipboard.
And we're done! If done correctly the redirect is complete and the funnel we made in the last article is now live for testing.
Testing & Confirming Redirect
Next is testing that the embedded code is actually redirecting to Sticky.io Checkout and working as intended.
Testing
Cart Page:
Navigate to
/cart.Add products with multiple variants and quantities to the cart.
Click the checkout button and verify the redirect URL includes
pidandqtywith quantities correctly aggregated for each variant.
Cart Slideout:
Add products with multiple variants and quantities to the cart.
Open the cart slideout.
Click the checkout button and confirm the redirect URL includes
pidandqtyparameters.
Product Detail Page (PDP):
Navigate to a product detail page.
Click the "Buy it now" button and verify the redirect URL includes the product ID, variant ID, and quantity.
Debugging:
Use browser developer tools to inspect the checkout buttons and verify the script is targeting the correct elements.
Check the console for any errors or logs.
As outlined in the first step of testing, when adding a product to cart and navigating to checkout, we can see that URL changes and we subsequently take over of the Shopify cart to Sticky.io Checkout takes place.
Before Redirect
After Redirect
Redirect Happening in Real-Time
And that is it. We've completely integrated your Shopify Store to Sticky Checkout and everything is operable. From this point forward all transactions will redirect to Sticky and subsequently the gateways you've added.
Everything from recurring to dunning and email delivery is being handled by Sticky.
Have any further questions? Take a peek at our FAQ Article - Sticky Checkout for Shopify - Frequently Asked Questions