Rebrand 2023 Learn more 

  • Cx Studio/
    Component Development/
    Custom Themes

    Custom Themes

    How to make your site look exactly like you want.

    CX Studio provides a number of tools — both code and no-code — to customize your site's appearance. These include:

    Style Guide

    You must have the Admin role to view and edit the style guide.

    The CX Studio style guide provides a quick way to customize the branding and styles of your site without using code. It's designed to be so simple that anyone can use it:

    Frontend Style Guide

    Many aspects of your theme can be customized in the Style Guide, including:

    • Branding
    • Typography
    • Button styles
    • Forms styles
    • Layout
    • And more...

    If you're not sure if CX Studio has a no-code way of customizing your theme, the Style Guide is a great place to start. Component developers will especially want to be familiar with what's exposed here.

    Headers & Footers

    Within the app, CX Studio provides a way of customizing your header and footer without code:

    Frontend header and footer

    This allows you to customize your menus, styles, and the basic layout of your header. The built-in header and footer do have some limitations, but they are excellent for customizing your header or footer without code.

    If the built-in header and footer don't meet your needs, you can also build your own header and footer components with code. See Header and Footer.

    Custom Integrations

    If you need a way to add custom code to every page, custom integrations are the way to go.

    Custom integrations

    Custom integrations can be used to:

    • Tweak global CSS for things not customizable in the Style guide
    • Add additional scripts for analytics or functionality
    • Add a global banner at the top or bottom of the page
    • And more...

    A custom integration can be inserted before or after the content of the page, or in the <head> of the HTML. See Custom Integrations.

    Custom Code Blocks

    If you only need to add custom code to a single page, CX Studio includes a Custom Code component that can be easily inserted into a page with the Add Section button within the page editor.

    Custom code block

    To add a custom code block:

    1. Click the Add section button
    2. Navigate to the Custom Code category
    3. Select the Custom Code component

    See Custom Integrations.

    Custom Components

    Building your own components will give you the ultimate flexibility. CX Studio provides a simple component editor where you can develop components in a live preview environment:

    Component EditorAnyone with a small amount of HTML knowledge will feel at home in the component editor.

    The component editor can be used to build a few different types of components:

    • Sections - The main building blocks of CX Studio pages.
    • Headers & Footers - If the built-ins don't work for you you can go custom.
    • Banners - Place anywhere on the page even above or below headers and footers.