Get more layouts and integrations for your Kajabi checkout pages.Get more layouts and integrations for your Kajabi checkout pages.Learn more →
- Meiring de Wet
This post shows how to add a simple custom script to Kajabi to reorder the elements on a Kajabi checkout page so that the pricing & checkout box (where the customer enters their email and selects a payment option) displays below the offer details on mobile devices.
What is the problem
The Kajabi checkout page design doesn't currently allow changing the order of the elements on the page, which means that the payment and pricing section is diplayed at the top on mobile devices.
This creates a poor checkout experience as the customer is immediately slammed with the pricing & signup flow instead of being led through the checkout journey first with the sales pitch.
On top of that, I've seen feedback from Kajabi site owners that this has serious implications on the conversion rates of their offers.
How to fix this
Adding this script to your Kajabi checkout pages changes the order of the elements on mobile devices and tablets so that the offer details are displayed at the top of the page, followed by the pricing and payment section at the bottom.
This works on all major browsers and will swop the elements for mobile devices and tablets. The contents of the script can be viewed here.
Adding the script to the checkout pages
The script is added to your checkout pages by adding this line of code to the Checkout Tracking Code section of your Kajabi checkout settings.
You can place the snippet in either the Header Tracking Code or Footer Tracking Code sections. If you already have custom code in those sections, simply add the line to the end of the existing code sections. Note that this will change the layout for all your checkout pages.
It doesn't matter where you place the code - it just needs to be there :)
Note - the script is minified and hosted on CDN for performance - but you can view the contents of the script here -https://gist.github.com/mdwt/810433397da804779021d5d3cd6c69cd
This is a simple script to change the layout of your Kajabi checkout pages so that the payment details section is shown after the offer details for Kajabi checkout pages on mobile devices.
Here's the Gist link again - https://gist.github.com/mdwt/810433397da804779021d5d3cd6c69cd