Customizing Your Checkout Page

Kajabi Cart: Setup Guide

Learn how to enable the cart on your website and landing pages as well as best practices we have seen from successful Heroes using Kajabi Cart!

Customize Your Kajabi Cart

Before enabling Cart, you’ll need to configure your Cart settings. This ensures your checkout looks and functions the way you want it to.

To customize Kajabi Cart:

Open the Sales tab from your Dashboard.
Select Cart.
Customize your Cart Settings:
1. Button colors, text, and styling - Edit in both the Cart and Checkout views.
2. Payment providers - Select the payment options that will be available on your Cart checkout page.
  1. This setting will override the payment provider settings on your offers.
3. Sales tax handling - If you are using Kajabi Payments’ Sales Tax tool:
  1. Check “Include tax in the offer’s price” if you want tax to be inclusive in the offer price. If left unchecked, all cart orders will be tax-exclusive and added on top of the price at checkout.
  2. This setting overrides individual offer tax settings and applies to all card orders. Learn more about charging tax with Kajabi Payments.
4. Customer fields - Choose any additional customer fields you want to collect at checkout (Name, Address, Phone)
  1. Note:
    1. An email address is always required and cannot be deselected.
    2. If you are using Kajabi Payments’ Sales Tax tool, the address field will still appear in the checkout, even if it’s not selected here, in order to calculate tax accurately.
5. Service agreements (optional) - Customize to require your customers to consent to the Terms and Conditions policy for your business.

Styling Options Explained

You can style all buttons in both the Cart and Checkout views. Use the tabs to switch between them.

Button Background: Select the color of the button background from your site color palette or enter a custom hex/RGB color.
Button Label: Set the color and custom text to display on your CTA button for your cart checkout page. Use this opportunity to communicate to your users what the button will do.
Outline Button: Adjust the border color.
Border Radius: Use this to round the button edges from square to round.
Button Text: Customize the CTA to reflect your brand voice (e.g., “Join Now,” “Add Offer”)

When editing button styling:

Click the pre-selected color swatch next to the field you want to update
Use the color wheel to pick a custom color or enter an RGB code
The vertical bar allows you to select the hue.
The square box allows you to select the brightness.
The horizontal bar allows you to select the opacity of your color.

Setting up Kajabi Cart on your Website and Landing Pages

Now that you’ve set up your Cart settings, it’s time to enable your website to support the new Kajabi Cart so that your customers can start checking out using your new cart!

1. Update Your Website and Landing Page Themes

Kajabi cart is supported on Encore Site 1.7.0 and Encore Page 2.7.0 or above. To enable Cart or use Add to Cart buttons on your existing pages, you’ll first need to update to these theme versions:

Learn how to update your website and landing page themes.

Want to test Cart without updating your current pages?

You can create a new storefront or standalone landing pages using the latest themes. This is a great way to try Cart for a limited-time promotion or to explore the experience before making sitewide changes. Learn more about how to creating a seamless shopping experience with Kajabi Cart here.

2. Enable Kajabi Cart in Your Website Header

Turn on the Cart icon so customers can view their cart and check out at any time.
You can enable the cart so that it appears on any of your website or landing pages.

To enable cart so that your customers can view and manage their cart while browsing:

Select the Website Pages or Landing Pages tab.
Open the page editor for your Page. Learn more
Click on the Header section
Check the box to Enable Cart
Click Save to keep your changes.

Learn more about customizing your website header here.

3. Add “Add to Cart” Buttons to Your Pages

Add to Cart buttons let customers select multiple offers and check out in one transaction. They can be placed anywhere you use a CTA block.

Use Offer Blocks, Pricing Cards, or CTA blocks to let your customers shop freely and purchase multiple offers in one checkout. Learn how to add a Call to Action block to your website and landing pages.

To create an Add to Cart button using the Call to Action block:

Select the Website Pages or Landing Pages tab.
Open the page editor for your Page. Learn more
Click the Section you want to edit or create a new Section.
In the sidebar, click Add Content.
From the list choose any block that contains a Call to Action such as the offer block, call to action block or pricing card.
Your newly created Block will generate at the bottom of the Section.
Under Button Action, select Add to Cart and choose the associated offer.
Customize the text to display in your CTA button.
Click Save to keep your changes:

Best Practices

Optimize Your Page Header

Make sure your site header is visible across all devices. Hiding the header on desktop or mobile can create friction and make it harder for customers to find their cart.

For the best experience, we recommend:

Keeping the header visible on both desktop and mobile views
Making the header sticky so it stays at the top of the screen as customers scroll.
Ensuring customers can access their cart from any page, not just cart-enabled ones. To do this you’ll need to go into the Header section and enable the cart on every published Website and Landing Page.

This helps customers easily access their cart and check out at any point in their journey, improving conversion and reducing drop-off.

Learn more about customizing your website header here.

Choosing the Right Block Type for Your Add to Cart Buttons

There are many different ways that you can incorporate Add to Cart buttons throughout your sites. Here are some of the options we’ve seen be successful:

Pricing Card Blocks

Pricing Cart Blocks are great for showcasing multiple CTAs or price comparisons. The secondary CTA can link to an Offers Details Page or open a modal with more information about the offer, helping customers stay on the page while exploring details.

Learn how to add a Pricing Card Block to your website and landing pages.

Offer Blocks

This is a clean and simple way to display cart-enabled offers. Simply add the title of your offer, some description text, and price so your customers can easily understand what they’re purchasing before clicking Add to Cart.

Learn how to add an Offer Block to your website and landing pages.

Call To Action Blocks

Use this block in custom sections for even more layout flexibility. Great for storefront-style displays or bundled experiences. These various blocks provide maximum flexibility to match your page design and business model.

Learn to add a custom section to your website and landing pages.

Important: No matter which block you use, be sure to display the price clearly. Prices are included by default in Offer and Pricing Card Blocks, but if you're using custom sections or CTA blocks, you’ll need to add the price manually so customers know exactly what they’re adding to their cart:

Build an Offer Details Page

An Add to Cart button makes it easy for customers to take action, but they still need to feel confident in what they’re buying before they click.

Make sure you're clearly answering the essentials somewhere on the page:

What is the offer?
Why should they buy it?
How much does it cost?

You can present this information directly in your site blocks (like Offer Blocks or Pricing Cards), or create a dedicated offer details page to go deeper. A well-crafted offer details page can:

Share in-depth information about the offer
Highlight testimonials, FAQs, or bonus content
Suggest related offers for bundling
Let customers add to cart and continue browsing without interruption

This approach mirrors a traditional e-commerce experience and often leads to stronger conversions.

Learn more about best practices for building an offer details page and what to consider.

Demo site:

Interested in seeing Kajabi Cart in action on a live Kajabi Website?
Check out our Kajabi Cart Demo Page and Sample Offer Details Page.

You’re all set! With Kajabi Cart configured, styled, and added to your pages, you can create a powerful shopping experience that supports multiple offers and reduces checkout friction.

Need more help? Check out Kajabi Cart FAQs here.