Published on

Changing the Layout of your Kajabi Checkout Pages for Mobile Devices

Authors
  • Name
    Meiring de Wet
    Twitter

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.

Changing the layout of your Kajabi checkout pages for mobile devices

Tablet view:

Changing the layout of your Kajabi checkout pages for mobile devices

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.

<script src="https://cdn.checkoutjoy.com/checkout-layout.js"></script>

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/mdw2000/11a9e220290c2c11c63fd02d9b54ffa8Changing the layout of your Kajabi checkout pages for mobile devices

Wrapping up

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/mdw2000/11a9e220290c2c11c63fd02d9b54ffa8

Want more updates like this?

Sign up for our newsletter to stay up to date.

We care about the protection of your data. Read our Privacy Policy.