Edbound allows advanced users to customise the appearance and behaviour of their checkout page using custom CSS and JavaScript. This can be used for advanced visual changes such as modifying fonts, spacing, borders, buttons, backgrounds and other checkout elements, as well as supported custom behaviours or integrations using JavaScript.

Accessing Checkout Head Code

The custom code editor is available from the following location in your Edbound dashboard:

• Go to Site Builder > Custom Code > Checkout Head Code
• Add your custom code in the editor
• Click Save

The code added here is embedded in the checkout forms just before the closing </head> tag.

Note: Custom code added here is universally applied to all checkout pages across your courses and bundles. Make sure the code you add is written with this in mind, as any changes will apply across all applicable checkout pages.

Important Considerations

• You could use AI to draft the custom code for you. For example, provide the AI tool with a screenshot of your existing checkout page, your brand colours, and a clear description of the design or styling you want to achieve. The AI can then help generate custom CSS or JavaScript based on your requirements, which you can add to the Checkout Head Code section.
• Checkout Head Code is an advanced feature intended for users who are comfortable working with HTML, CSS and JavaScript.
• Edbound support does not provide troubleshooting or development support for custom code. Incorrect or incompatible code may affect the appearance or functionality of your checkout forms. For complex customisations, we recommend working with a qualified web developer.
• Always test your checkout thoroughly after adding or modifying custom code to ensure that the checkout continues to work as expected.
• For information on adding and formatting content when using Enhanced Checkouts, see Adding and Formatting Enhanced Checkout Page Content.