My Profile
Sign Out
Tickets
Knowledge Base
Login
Create Ticket
Articles in this section
Category / Section
  1. Home
  2. Engage
  3. Courses

Customizing Your Catalog and Product Pages: A Step-by-Step Guide to Adding Custom Headers and Color Schemes

Published:
1 min read
Customizing the Catalog and Product page allows users to change the appearance of their eLearning platform, providing a personalized and branded learning experience for students and enhancing overall engagement.

Enhance user engagement by diving into our KB article on customizing product and catalog pages. Learn how to personalize your eLearning platform, complete with theme branding colors for an immersive learning experience.


Customizing Catalog Page

The catalog page displays the available courses, bundles, tests, live classes, and products providing learners with an organized and visually appealing overview of the diverse learning opportunities offered on the eLearning platform.

Here are the steps to customize the catalog page.

Step 1:

Navigate to the catalog page from your dashboard.1.png
Catalog Display Style:

Catalog display style can be selected under the 'Catalog Settings' in 'Global Settings'.

Basic Catalog: Displays search functionality and blocks.

Advanced Catalog: Displays the filter option along with the basic catalog.

3.png

When 'Advanced Catalog' is enabled, it shows the filter option as displayed in the below image.
2.png


Step 2:

The background image can be customized by clicking on the 'Change photo' button.
4.png


Step 3:

Select 'Choose from library' to set the image.
Similarly, the text and text color of the page can be modified here.
5.png


Step 4:

Once the image is selected, adjust the position of the image and click on the 'Save Position' button.
6.png


Customizing Button and Tab Colors:

Step 5:

The button and tab colors can be changed according to your theme.

  • Navigate to 'Global Settings' and open 'Branding'. Under 'LMS theme' you have the option to change the colors of the text and background that suit your theme.
  • Click on 'Primary Button Color' and set the color of your choice. Remember to 'Save' the changes.

7.png


























Once the changes are saved, the color of the primary button will be changed on the catalog page as displayed below.

Similarly, the color of the secondary button can be changed.
8.png


Step 6:

The header background, menu text, and menu hover color can be changed using the last three options in the list. 

To change the color of the tab, click on 'Marketing pages Menu Hover Color' and set the preferred color. Finally, click on 'Save'.

10.png
When you select the tab in the catalog, the chosen color will be visible.
11.png

Reset: 

You can reset the changes anytime by selecting the 'Reset' option at the bottom of the page.
12.png


Customizing Product Page Hero Header

Step 1:

Open the course displayed under the catalog. 

Note: 

The same method can be used to edit bundles, tests, live classes, and products in the catalog.

13.png
Step 2:

Click on 'Change photo' to change the background image of the product page.

14.png
Step 3:

Open 'Choose from library' to set the image and 'Change text color' to change the color of the text of the main header on the page.
15.png
​Once the text color is set, you will see a message as displayed below.
16.png
Now, the product page is customized according to your necessity.
17.png
Indulge in personalizing the catalog and product pages to align with your preferences and theme.
Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Access denied
Access denied