Skip to content
Memberships & Communities

New Theme Customizer for Courses

The New Theme Customizer is a powerful new feature that enables users to personalize the appearance of their course sites with ease. From logos and…

4 min read851 words8 explained images
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. How to Use the New Theme Customizer
  2. Key Features and Customization Options
  3. Additional Customization Options

The New Theme Customizer is a powerful new feature that enables users to personalize the appearance of their course sites with ease. From logos and search bars to hero sections and course sidebars, users have full control over key design elements to create a visually appealing and branded learning experience.

With intuitive visibility toggles, color and text overrides, custom content blocks, and template-saving options, users can effortlessly design course sites that align with their brand identity—without needing coding expertise. Real-time previews ensure that changes are instantly reflected, while system and custom templates offer flexibility for quick deployment.

This document provides a detailed breakdown of each feature and customization option available.

TABLE OF CONTENTS

How to Use the New Theme Customizer

1. Navigate to the "Customize" option in your Course Outline.

How to Use the New Theme Customizer (image 1 of 8) What this shows 1. What this shows Illustrates the "How to Use the New Theme Customizer" section of "New Theme Customizer for Courses". This screenshot appears in the "How to Use the New Theme Customizer" section of "New Theme Customizer for Courses". The text alongside this image reads: 1. Navigate to the "Customize" option in your Course Outline. Immediately after, the guide continues: 2. Click on "Browse System Templates". Image 1 of 8 What this covers1. Navigate to the "Customize" option in your Course Outline.
Buttons and menus referenced Save as TemplateMy Templates (Empty State)Loading state for activated theme nameTemplate editor CTA and tooltip updates
Next step2. Click on "Browse System Templates".

2. Click on "Browse System Templates".

3. Select "Neo Classic" Theme to utilize the New Customizer.

Note: When you apply Neo Classic from Browse Templates, the theme displays as Neo Classic Theme to help you distinguish it from your saved templates.

Save as Template

Use Save as Template to save your current customized theme for reuse.
1. In the theme editor, click Save as Template.
2. Enter a template name in the naming modal.
3. Click Save.
4. After saving, you are redirected to the newly created template.
My Templates (Empty State)

If you do not have any saved templates yet, My Templates shows an improved empty state with clearer guidance.
Loading state for activated theme name
When you activate a theme, the activated theme name can show a shimmer loading effect while the change applies.
Template editor CTA and tooltip updates

- The primary CTA is now Activate Template.
- Button labels and tooltips are updated to be more descriptive.

How to Use the New Theme Customizer (image 2 of 8) What this shows Save as Template Use Save as Template to save your current customized theme for reuse. What this shows Illustrates the "How to Use the New Theme Customizer" section of "New Theme Customizer for Courses". This screenshot appears in the "How to Use the New Theme Customizer" section of "New Theme Customizer for Courses". The text alongside this image reads: Save as Template Use Save as Template to save your current customized theme for reuse. 1. In the theme editor, click Save as Template. 2. Enter a template name in the naming modal. 3. Click Save. 4. After saving, you are redirected to the newly created template. My Templates (Empty State) If you…. Immediately after, the guide continues: 4. You can do modifications as per the available customization options and then save this for future use. Image 2 of 8 What to fill inSave as Template Use Save as Template to save your current customized theme for reuse. 1. In the theme editor, click Save as Template. 2. Enter a template name in the naming modal. 3. Click Save. 4. After saving, you are redirected to the newly created template. My Templates (Empty State) If you do not have any saved templates yet, My Templates shows an improved empty state with clearer guidance. Loading state for activated theme name When you activate a theme, the activated theme name can show a shimmer loading effect while the change applies. Template editor CTA and tooltip updates - The primary CTA is now Activate Template. - Button labels and tooltips are updated to be more descriptive.
Buttons and menus referenced Save as TemplateMy Templates (Empty State)Loading state for activated theme nameTemplate editor CTA and tooltip updates
Next step4. You can do modifications as per the available customization options and then save this for future use.

4. You can do modifications as per the available customization options and then save this for future use.

5. If you choose to Save it, you can later find this under "My Templates" option on the main "Customize" Screen.

Key Features and Customization Options

1. Logo (Mandatory)

  • Visibility: Show/Hide option
  • Category Types: Text, Image
  • Logo Action: Set action for clicking the logo to redirect users to:
    • Site Home
    • Product Home
  • Height Options: Small, Medium
  • Placement: Typically in the top-left or center of the header

2. Search Bar (Mandatory)

  • Visibility: Show/Hide option
  • Search Helper Text: Add instructional text inside the search bar to guide users
  • Appearance Properties:
    • Background Colour Override
    • Text Colour Override
      Step 2 of 2: Text Colour Override What this shows Step 2 of 2: Text Colour Override What this shows Shows what this covers for step 2 of 2 in the "Key Features and Customization Options" section of "New Theme Customizer for Courses". This screenshot accompanies step 2 of 2 in the "Key Features and Customization Options" section of "New Theme Customizer for Courses". At this point in the walkthrough you text Colour Override. For context, this section explains: Visibility: Show/Hide option Category Types: Text, Image Logo Action: Set action for clicking the logo to redirect users to: Height Options: Small, Medium Placement: Typically in the top-left or center of the header. This part of the guide covers 12 fields, listed below. Step 2 of 2Image 3 of 8 What this coversText Colour Override
      Fields in this part of the guide Visibility: Show/Hide optionCategory Types: Text, ImageSite HomeProduct HomeHeight Options: Small, MediumPlacement: Typically in the top-left or center of the headerAppearance Properties:Background Colour OverrideText Colour OverrideAppearance Types:Image backgroundColour Picker for solid backgrounds
      Buttons and menus referenced 1. Logo (Mandatory)2. Search Bar (Mandatory)3. Hero Section (Mandatory)4. Welcome Body (Add Section)5. Course Syllabus (Mandatory)6. Course Sidebar
      All 2 steps in this procedure
      1. Background Colour Override
      2. Text Colour Override this image

3. Hero Section (Mandatory)
Customize the hero section of your Course page to change the appearance of the top-most section of your page.

  • Visibility: Show/Hide option
  • Appearance Types:
    • Image background
    • Colour Picker for solid backgrounds
  • Overlay Options:
    • No Overlay (Checkbox)
    • Overlay Colour and Opacity customization
  • Course Info Customization:
    • Title: Text, Colour Override, Bold/Italics, Alignment (Left, Center, Right)
    • Description: Text, Colour Override, Bold/Italics, Alignment
  • Spacing Options:
    • Full Height
    • Medium
    • Small
  • Start Button Customization:
    • Text: Colour Override, Content
    • Button: Colour Override, Alignment
Key Features and Customization Options (image 4 of 8) What this shows Visibility: Show/Hide option Appearance Types: Overlay Options: Course Info Customization: Spacing Options: Start Button Customization: What this shows Illustrates the "Key Features and Customization Options" section of "New Theme Customizer for Courses". This screenshot appears in the "Key Features and Customization Options" section of "New Theme Customizer for Courses". The text alongside this image reads: Visibility: Show/Hide option Appearance Types: Overlay Options: Course Info Customization: Spacing Options: Start Button Customization. This part of the guide covers 12 fields, listed below. Immediately after, the guide continues: Users can add multiple content blocks to the welcome body, including images, text, videos, and CTAs. Image 4 of 8 What this coversVisibility: Show/Hide option Appearance Types: Overlay Options: Course Info Customization: Spacing Options: Start Button Customization:
Fields in this part of the guide Visibility: Show/Hide optionCategory Types: Text, ImageSite HomeProduct HomeHeight Options: Small, MediumPlacement: Typically in the top-left or center of the headerAppearance Properties:Background Colour OverrideText Colour OverrideAppearance Types:Image backgroundColour Picker for solid backgrounds
Buttons and menus referenced 1. Logo (Mandatory)2. Search Bar (Mandatory)3. Hero Section (Mandatory)4. Welcome Body (Add Section)5. Course Syllabus (Mandatory)6. Course Sidebar
Next stepUsers can add multiple content blocks to the welcome body, including images, text, videos, and CTAs.
All 5 steps in this procedure
  1. Visibility: Show/Hide option
  2. Category Types: Text, Image
  3. Logo Action: Set action for clicking the logo to redirect users to:
  4. Height Options: Small, Medium
  5. Placement: Typically in the top-left or center of the header

4. Welcome Body (Add Section)

Users can add multiple content blocks to the welcome body, including images, text, videos, and CTAs.

  • Image Block:
    • Upload an image
    • Set an image action (URL link on click)
  • Text Block:
    • Text Alignment (Left, Center, Right)
    • Colour Override, Bold, Italic
  • Video Block:
    • Upload a video directly to be displayed
  • Custom Block:
    • Text: Alignment, Colour Override, Bold, Italic
    • Image: Upload an image, add an action URL
    • CTA Button: Customize button colour, text colour, content, and destination link.Guide learners with strategic CTAs for maximum engagement.
    • Video: Upload a video

5. Course Syllabus (Mandatory)

The Course Syllabus is the outline of your Course Modules and Lessons.

  • Visibility: Show/Hide option
  • Syllabus Type Selection:
    • Categories: Organize courses by category
    • Posts: Display syllabus as a list of course posts
  • Customizable Text Fields:
    • Categories Label
    • "Coming Soon" Text
    • "Show More" Text

6. Course Sidebar

Key Features and Customization Options (image 5 of 8) What this shows Visibility: Show/Hide option Syllabus Type Selection: Customizable Text Fields: What this shows Illustrates the "Key Features and Customization Options" section of "New Theme Customizer for Courses". This screenshot appears in the "Key Features and Customization Options" section of "New Theme Customizer for Courses". The text alongside this image reads: Visibility: Show/Hide option Syllabus Type Selection: Customizable Text Fields. This part of the guide covers 12 fields, listed below. Immediately after, the guide continues: Progress Bar: Instructor Section: Cross-Sell Section: Promote another Offer directly from your Course Product to encourage your existing customers to purchase. Customize the appearance of your Offer within the Cross Sell block in your…. Image 5 of 8 What to fill inVisibility: Show/Hide option Syllabus Type Selection: Customizable Text Fields:
Fields in this part of the guide Visibility: Show/Hide optionCategory Types: Text, ImageSite HomeProduct HomeHeight Options: Small, MediumPlacement: Typically in the top-left or center of the headerAppearance Properties:Background Colour OverrideText Colour OverrideAppearance Types:Image backgroundColour Picker for solid backgrounds
Buttons and menus referenced 1. Logo (Mandatory)2. Search Bar (Mandatory)3. Hero Section (Mandatory)4. Welcome Body (Add Section)5. Course Syllabus (Mandatory)6. Course Sidebar
Next stepProgress Bar: Instructor Section: Cross-Sell Section: Promote another Offer directly from your Course Product to encourage your existing customers to purchase. Customize the appearance of your Offer within the Cross Sell block in your Sidebar Custom Blocks:Add a custom block onto your Sidebar to build in another Offer, display a promotion, communicate an announcement, and more! The custom block is yours to design. With the custom block you can choose to include
All 5 steps in this procedure
  1. Visibility: Show/Hide option
  2. Category Types: Text, Image
  3. Logo Action: Set action for clicking the logo to redirect users to:
  4. Height Options: Small, Medium
  5. Placement: Typically in the top-left or center of the header
  • Progress Bar:
    • Show/Hide
    • Colour Override
    • Custom Text Override (with an info icon displaying description)
  • Instructor Section:
    • Show/Hide
    • Headshot Display: Show/Hide, Upload Image
    • Instructor Info: Heading, Name, Title, Bio
  • Cross-Sell Section:
    Promote another Offer directly from your Course Product to encourage your existing customers to purchase. Customize the appearance of your Offer within the Cross Sell block in your Sidebar
    • Select an Offer
    • Set a CTA Text to encourage sign-ups
  • Custom Blocks:
    Step 4 of 4: Custom Blocks:Add a custom block onto your Sidebar to build in another… What this shows Step 4 of 4: Custom Blocks:Add a custom block onto your Sidebar to build in another Offer, display a promotion, communicate an announcement, and more! What this shows Shows where to go for step 4 of 4 in the "Key Features and Customization Options" section of "New Theme Customizer for Courses". This screenshot accompanies step 4 of 4 in the "Key Features and Customization Options" section of "New Theme Customizer for Courses". At this point in the walkthrough you custom Blocks:Add a custom block onto your Sidebar to build in another Offer, display a promotion, communicate an announcement, and more! The custom block is yours to design. With the custom block you can choose to include. This part of the guide covers 12 fields, listed below. Step 4 of 4Image 6 of 8 Where to goCustom Blocks:Add a custom block onto your Sidebar to build in another Offer, display a promotion, communicate an announcement, and more! The custom block is yours to design. With the custom block you can choose to include
    Fields in this part of the guide Text: Customize content, colour, style, and alignmentImage Block: Upload an image and assign an action URLCTA Button: Customize content and destination linkVisibility: Show/Hide optionCategory Types: Text, ImageSite HomeProduct HomeHeight Options: Small, MediumPlacement: Typically in the top-left or center of the headerAppearance Properties:Background Colour OverrideText Colour Override
    Buttons and menus referenced 1. Logo (Mandatory)2. Search Bar (Mandatory)3. Hero Section (Mandatory)4. Welcome Body (Add Section)5. Course Syllabus (Mandatory)6. Course Sidebar
    Example values
    Image Block: Upload an image and assign an action URL
    https://northgatedental.com

    Illustrative values showing the expected format. They are not read from the screenshot.

    All 4 steps in this procedure
    1. Progress Bar:
    2. Instructor Section:
    3. Cross-Sell Section: Promote another Offer directly from your Course Product to encourage your existing customers to purchase. Customize the appearance of your Offer within the Cross Sell block in your Sidebar
    4. Custom Blocks:Add a custom block onto your Sidebar to build in another Offer, display a promotion, communicate an announcement, and more! The custom block is yours to design. With the custom block you can choose to include this image
    Add a custom block onto your Sidebar to build in another Offer, display a promotion, communicate an announcement, and more! The custom block is yours to design. With the custom block you can choose to include
    • Text: Customize content, colour, style, and alignment
    • Image Block: Upload an image and assign an action URL
    • CTA Button: Customize content and destination link

Additional Customization Options 

Lesson Page Customization

  • Breadcrumb Navigation: can be displayed to act as a trail leading back to the Course homepage.
    Step 1 of 3: Breadcrumb Navigation: can be displayed to act as a trail leading back… What this shows Step 1 of 3: Breadcrumb Navigation: can be displayed to act as a trail leading back to the Course homepage. What this shows Shows what this covers for step 1 of 3 in the "Additional Customization Options" section of "New Theme Customizer for Courses". This screenshot accompanies step 1 of 3 in the "Additional Customization Options" section of "New Theme Customizer for Courses". At this point in the walkthrough you breadcrumb Navigation: can be displayed to act as a trail leading back to the Course homepage. This part of the guide covers 9 fields, listed below. The next step is to lesson Player Settings. Step 1 of 3Image 7 of 8 What this coversBreadcrumb Navigation: can be displayed to act as a trail leading back to the Course homepage.
    Fields in this part of the guide Show/HideLesson Player Settings:Background Colour OverrideAuto Advance (On/Off)Text Alignment: Left, Right, CenterText Colour OverrideCategories Sidebar:Progress Bar: Show/Hide, Colour OverrideText Override (with "i" icon for tooltips)
    Buttons and menus referenced Category Page Customization
    Next stepLesson Player Settings:
    All 3 steps in this procedure
    1. Breadcrumb Navigation: can be displayed to act as a trail leading back to the Course homepage. this image
    2. Lesson Player Settings:
    3. Lesson Body: allows you to configure the appearance of your Lesson Body to adjust the text alignment, the Mark as Complete button, etc
    • Show/Hide
  • Lesson Player Settings:
    • Background Colour Override
    • Auto Advance (On/Off)
  • Lesson Body: allows you to configure the appearance of your Lesson Body to adjust the text alignment, the Mark as Complete button, etc
    Step 3 of 3: Lesson Body: allows you to configure the appearance of your Lesson… What this shows Step 3 of 3: Lesson Body: allows you to configure the appearance of your Lesson Body to adjust the text alignment, the Mark as Complete button, etc What this shows Shows what this covers for step 3 of 3 in the "Additional Customization Options" section of "New Theme Customizer for Courses". This screenshot accompanies step 3 of 3 in the "Additional Customization Options" section of "New Theme Customizer for Courses". At this point in the walkthrough you lesson Body: allows you to configure the appearance of your Lesson Body to adjust the text alignment, the Mark as Complete button, etc. This part of the guide covers 9 fields, listed below. Step 3 of 3Image 8 of 8 What this coversLesson Body: allows you to configure the appearance of your Lesson Body to adjust the text alignment, the Mark as Complete button, etc
    Fields in this part of the guide Text Alignment: Left, Right, CenterText Colour OverrideShow/HideLesson Player Settings:Background Colour OverrideAuto Advance (On/Off)Categories Sidebar:Progress Bar: Show/Hide, Colour OverrideText Override (with "i" icon for tooltips)
    Buttons and menus referenced Category Page Customization
    All 3 steps in this procedure
    1. Breadcrumb Navigation: can be displayed to act as a trail leading back to the Course homepage.
    2. Lesson Player Settings:
    3. Lesson Body: allows you to configure the appearance of your Lesson Body to adjust the text alignment, the Mark as Complete button, etc this image
    • Text Alignment: Left, Right, Center
    • Text Colour Override

Category Page Customization

  • Categories Sidebar:
    • Progress Bar: Show/Hide, Colour Override
    • Text Override (with "i" icon for tooltips)

Was this guide helpful?

Related guides

Adding Closed Captions and Subtitles to your video courses3 min readAutomate Group Join Requests with Workflows7 min read · 4 imagesCheckout Orchestrator2 min readCourse Announcements3 min read · 5 images