Add custom code to one page, a block on a page, or every page of your website to embed widgets, load fonts, add analytics, or change how your pages look. To edit the template files behind your pages, use the code editor, available only on the Kajabi Pro plan.
Warning: Be careful when adding custom code to your site. If you're adding code from a third party, make sure you trust them. Their custom code might cause problems on your site.
Add custom code to a single page
Add code in page Settings
From the Dashboard, open Website.
Locate the Website Page or Landing Page you want to edit.
Next to the page, click Customize.
In the page builder, click the Settings tab.
Click the Custom Code section.
Add your Custom CSS or Custom JavaScript in the panel.
Click Save.
Note: Do not include <style> or <script> tags in the Custom CSS or Custom JavaScript sections within page Settings.
Add code in a Custom Code block
Adding custom code in a block is useful for embedding content on your page, such as a calendar booking widget.
From the Dashboard, open Website.
Locate the Website Page or Landing Page you want to edit, and click its Page Title.
In the page builder, open a Section.
Click Add block.
Click Custom Code.
Add your custom CSS or JavaScript in the Code field.
Set the block's Background, Layout, Animations, and Time reveal options as needed.
Click Save.
Note: In a Custom Code block, use <style> (for CSS) and <script> (for JavaScript) tags for your code to work.
Add code to a Checkout page
From the Dashboard, click Sales, then Pricing.
Click the Offer Title of the Offer whose Checkout page you want to edit.
Click Edit checkout at the top of the page.
Click the Settings tab.
Click the Custom Code section.
Add your Custom CSS or Custom JavaScript in the panel.
Click Save.
Add code to an Upsell page
From the Dashboard, click Sales, then Pricing.
Click the Upsells tab.
Click the Upsell you want to edit.
Click Customize.
Click the Settings tab.
Click the Custom Code section.
Add your Custom CSS or Custom JavaScript in the panel.
Click Save.
Add custom code to all pages
Custom code on all pages is useful for adding a cookie disclaimer, custom fonts, analytics, and more.
From the Dashboard, open Settings.
Under Site settings, click Site details.
Under Page scripts, enter your custom code in the Header Page Scripts field.
Click Save.
Note: Code in Header Page Scripts goes in the <head> tag of every page except offer checkout pages and upsell pages. To track checkout pages, see Add JavaScript tracking code to Checkout pages.
Access the code editor
Learn to access and edit the code in your Website, Product, and Landing Pages.
The code editor lets you view and edit the Liquid template files behind your pages. Kajabi template code is written in Liquid. With code editor access, Modify code appears in the more options (...) menu for your pages and templates. You can also open a Website Page's file directly from the page list this way.
Note: If you update your template, changes you made in the code editor are overwritten. Customizations made in the theme builder are preserved. Learn how to update a template.
Open the code editor for a website template
To edit the code for your Standard Website Pages:
From the Dashboard, open Website.
Under Design, locate the template you want to edit.
Click the down arrow on your live template, or open the more options (...) menu on a saved template.
Select Modify code.
Open the code editor for a Course template
From the Dashboard, click Products, then Courses.
Select the Course you want to edit.
Click Customize.
Locate your Course template.
Open its more options (...) menu.
Select Modify code.
Open the code editor for an Upsell page
From the Dashboard, click Sales, then Pricing.
Click the Upsells tab.
Click the Upsell you want to edit.
Open the more options (...) menu next to Customize.
Select Edit code.
Show every lesson in a Course syllabus
By default, the syllabus lists the first 10 lessons per module, then shows a Show More link. To show every lesson, edit product_syllabus.liquid in the Snippets folder. This applies only when the syllabus section's Syllabus Type setting is Posts. On the default Categories setting, the syllabus lists modules only, so there's no lesson limit to edit.
Find the lesson loop and change the limit so every lesson shows:
{% for post in category.posts limit:10 %}Update the Show More link to match. If you set a custom number, use the same number here. If you removed the limit, delete this whole
{% if %}block, or the link will show or hide at the wrong point:{% if category.posts.size >= 10 %}
To change how many modules appear per page instead, edit this line separately:
{% paginate product.categories by 10 %}
Warning: Kajabi's own theme settings warn that removing the lesson limit can cause a Liquid error on Courses with many lessons. Preview the page before saving.
Open the code editor for a Landing Page template
From the Dashboard, open Website.
Click Landing Pages.
Locate the page you want to edit.
Open its more options (...) menu.
Select Modify code.
Note: Modify code is unavailable while a Landing Page has an A/B test in progress.
Edit template code
Refer to Kajabi's template documentation for an overview of each template directory.
Open the code editor for your template, using the steps above.
Select a directory.
Select a file.
Modify your code.
Click Save.
Optional: Click Preview.
Note: Kajabi Support can't help create or modify custom code. If you're new to editing code, consider hiring a professional.