Breaking News: Kajabi rolled back all checkout forms to Version 2.0. They opted to go back to the old redirect problem instead of tweaking little UI quirks of the Version 2.5. Read the rest of the article if you don't understand the situation.
I have the fix to make your checkout pages look like Version 2.0 again.
Okay sometime this week Kajabi rolled out the "Version 2.5" of the Checkout Pages. I say it's 2.5 because the improvements do not warrant a big leap to Version 3. In my opinion, the Version 3 should have the option to do stepped checkout, have option for more payment integration, and a full pledge checkout page editor that can move elements like Moses.
So for everybody's consistent naming purposes, the checkout page versions are the following.
Version 1.0 - The Big Multi-Step Form
Version 2.0 - The New Look, Checkout Side Form
Version 2.5 - The Integrated Login Form
The #1 issue in #2
We all know that in 2.0 when someone tries to buy a product and enters their email, if that email address is registered already, Kajabi will prompt the user to login first.
That login routine means being redirected to another page and going out of the checkout experience.
There are even instances where the user never goes back to the checkout page and instead being redirected to their Library of courses.
What's New in Version 2.5
This is what Version 2.5 solved this week. The new checkout form looks the same but underneath it has integrated the login routine in the form itself.
So what happens now when an existing user buys another product?
First the checkout form asks the user to "Login or Signup". Then Kajabi will check the email if it exists. If it does, Kajabi will hide the other field and ask for a password to login. Once logged, the other fields appear again and the user can continue typing their information.
No more confusing redirects.
The UI in the Haystack
In just a couple of days, a handful of comments in FB groups surfaced around the new Kajabi Checkout improvements. The very same improvement that should solve the UI concerns in version 2.0 makes confusion with some clients.
Some Kajabi users even saw a dip in their conversions just this week.
They believe the following UI concerns are the culprit.
Is it a Login Form, Sign-in Form, or Sign-up Form?
So how do we buy? This might be the single most hated text in the new Kajabi checkout page. Someone in the FB groups even commented "Looks like I'm presented with a login form or an opt-in form and not a checkout form..."
For users who are not used to buy products online, this might confuse them and leave the checkout page thinking that only previously registered users are allowed to buy.
Is Submit Button a login button or a buy button?
The answer is neither. Clicking the Submit button besides the email address verifies the email if it's previously registered.
But for some segment of users, they may be reluctant to submit their email simply because they don't know what will happen next. Submit means what? Sure, for the majority of seasoned online buyers it's straightforward but for some cold leads who are very anxious to give you their $499, seeing an ambiguous Submit button, plus the PayPal button, or the radio buttons PayPal vs. Card, it's too much.
Hey, aren't PayPal accepting credit cards as well? So which credit card radio button should I pick? Let's reserve that for another blog post. Moving on...
The checkout form becomes a login form, haalpp!
Nope, you are still on the checkout page, doing the login, to checkout again.
Kajabi hides the other input fields and transforms the checkout form into a login form. What I did with my fix is to place a welcome message alongside with the Forgot Password text so that users know this is still part of the checkout process.
If the form is disabled, does it mean I can't buy?
Some Kajabi members argued that a disabled form fields looks like they are not welcome to buy. Couple that with the "Login or Sign Up" conundrum, it looks uninviting and sends a signal that only registered users can buy.
Personally I wanted this to remain because disabling the other parts of the checkout form ensures that the email is supplied correctly. When a user does not submit their email for verification, enabling the other input fields will give the user a false understanding that it's okay to just submit any email without verifying. This will also cause input error warnings which adds up to the confusion. So let's just leave it as it is.
What I propose with my fix is to remove the "Login or Sign Up" header, then put a Step 1 and Step 2 text so they know these are steps to checkout. I believe these are enough signals for them to decrease doubt about why the fields are disabled.
Does "Change Email" means my email is incorrect or wrong?
It may not come obvious for some but it's a valid inference to note. Especially if the primary accent color of your page is close to red or orange, the Change Email submit button also becomes red. It may send a false impression that something is wrong.
The fix below changes that button into an edit icon. It appears sleek and friendly while being familiar with most users.
WARNING: These codes will not work with Version 2.0. Since Kajabi rolled back every one to Version 2.0, then all these codes is just a piece of history.
Using the UI pain points mentioned above, let's make some UI improvements on top of Version 2.5 to make it look like 2.0 without losing the integrated login feature.
First go to your Kajabi Settings, then click Checkout Settings. Go to the Footer Tracking Code textbox and follow the instructions below.
To remove the "Log in or Sign Up" header, put the following code:
If you want it to show a different text like "Step 1: Enter Your Email", then use the following code instead:
To change the email submit button from "Submit" to "Go to Step 2" or "Proceed to Pay", use the following code:
To put a welcome message during the integrated login, put the following code. This helps the user orient themselves that "hey, I'm still in the checkout process, I'm not being redirected to a login form to go to my Library or somewhere else..." Your users will know that they will proceed to Step 2 once they log in.
Instead of the "Change Email" button to an Edit icon, put the following code:
Put Everything In One Piece
Here's the combined codes from above. You may remove some of the codes that you need. Even if you are not a programmer, referencing the right codes from above then below will make you know what these codes are doing, hence you can edit them.
The welcome message shows when you are prompted to sign-in:
It should look like this when the email is validated:
What if you want the text Step 1 and Step 2 appear in your form? Well you know how to do the Step 1 text using the variation of the code above, remember?
Now here's every code above plus the codes that places the Step texts. It also auto-detects whether there are really input fields aside from email. If it finds no other fields then it will not show the Step texts.
If you loved what we did here then subscribe to my blog below. I only send cool stuff so you'll be okay!