Add Checkout Page to Kajabi
In this help article, you will learn how to add Checkout Page to your Kajabi landing page.
With Checkout Page, it is easy to create a one-page checkout and add it to your site in different ways.
Here are the instructions to add your checkout to Kajabi.
Add a Buy button
You can add a Buy button that links to your checkout to open it in the same or new window.
Follow these steps to do it:
- Open the page builder on Kajabi
- Click on the text element you'd like to edit and scroll down to Block Settings
- Click Call To Action and select Go to URL under Button Action
- From your Checkout Page dashboard, click on the checkout you want to link to
- Then click on Share & embed in the top right corner and copy the Payment link
- Paste this link in the URL field on Kajabi
![image-032593.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F1828efe4a24b2f586257ce10c1a01eeafa5755a3-2746x1374.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Save and preview your page
Add a pop-up checkout
Adding a pop-up checkout is a great way to let your customers check out on your site while hiding the checkout from those just browsing. Kajabi offers two ways to add your Checkout Page pop-up.
Option 1
Turn your Kajabi button into a Checkout Page pop-up by adding a small snippet of code. Here's how to do it:
- From your Checkout Page dashboard, click on the checkout you want to link to
- Then click on Share & embed in the top right corner and go to Pop up
- Choose Custom website and copy the Script code
- From your Kajabi dashboard, go to Settings on the bottom left and scroll down to Page scripts
- Paste the script code into Header Page Scripts and scroll down further to Save
![image-bf4a45.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F39e6ca5f13cca94963c6a11cdf0feb9efae8d79d-3150x1330.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Open the page builder on Kajabi
- Click on the text element you'd like to edit and scroll down to Block Settings
- Click Call To Action and select Go to URL under Button Action
- From your Checkout Page dashboard, click on the checkout you want to link to
- Then click on Share & embed in the top right corner and copy the Payment link
- Paste this link in the URL field on Kajabi and save
![image-ee7a12.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F6559b2212ae2c205136d7198f4182d79f7671106-2746x1374.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Return to Pages section in your dashboard
- Click on the three dots on the right of your landing page and choose Modify code
![image-70d995.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F2db7cca8f8e4d74e82454a663adb2ce3df1b8cc8-3124x1386.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Under Snippets, find block_cta.liquid
- Type cp-button as in the screenshot below and click Save (*see below)
![image-d50638.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F98782a4700033b17d8132db4ba6bcd4504b7ba24-1762x1134.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Preview your page to test the pop-up
*Please note: If you choose this option and modify the code as per Steps 13-15, your Call To Action block can then only be used for Checkout Page buttons on the page you're modify the code on.
Option 2
Create your own button leading to your Checkout Page pop-up. This pop-up is better suited for customization, however, it might require some CSS coding skills to style it.
- From your Checkout Page dashboard, click on the checkout you want to link to
- Then click on Share & embed in the top right corner and go to Pop up
- Choose Custom website and copy the Script code
- From your Kajabi dashboard, go to Settings on the bottom left and scroll down to Page scripts
- Paste the script code into Header Page Scripts and scroll down further to Save
![image-d004a5.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F8ba7e1f5814a8148fa2a50f40f8485ba6c7b041a-3150x1330.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Open the page builder on Kajabi
- Scroll down to Add section
![image-509b00.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F3016dc73c983215c5b951767b717af19fa6415cd-2764x1346.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Add a Custom code block
![image-58073d.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F182c76570bff1378cfa19f60d48055f1843c80b9-2710x1236.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- From your Checkout Page dashboard, click on the checkout you want to link to
- Then click on Share & embed in the top right corner and go to the Pop up section
- Select Custom website and copy Link code to open pop up
- Return to Kajabi and paste this code into Code field in your custom block
![image-16b3f3.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F5b4dacd3db7f15eaa3de05e4e410ae6ad348abee-3438x1408.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Apply a background colour and style it as you wish
- Preview your page to test the pop-up
Embed your checkout
Embed your checkout on your landing page for your customers to finish their purchases on your site.
- Open the page builder on Kajabi
- Scroll down to Add section
![image-84fdb9.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F847e4e0e6265027f4ae44910c06b0b9ad2122949-2764x1346.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Add a Custom code block
![image-717326.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F77654ee02aeac1f15f9d7f42b967e765bd524cda-2710x1236.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- From your Checkout Page dashboard, click on the checkout you want to link to
- Then click on Share & embed in the top right corner and go to the Embed section
- Select Custom website and copy Embed code
- Return to Kajabi and paste this code into Code field in your custom block
![image-298bb6.png](/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2F1n2jytol%2Fproduction%2F8132d7df5d53a23107cdd95b6b8810ee192e5d31-3090x1588.png%3Fw%3D1536%26fit%3Dmax%26auto%3Dformat&w=3840&q=75)
- Save your page