Customizing Your Catalog and Product Pages: A Step-by-Step Guide to Adding Custom Headers and Color Schemes
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.
Navigate to the catalog page from your dashboard.
Catalog Display Style:
Basic Catalog: Displays search functionality and blocks.
Advanced Catalog: Displays the filter option along with the basic catalog.
Similarly, the text and text color of the page can be modified here.
Customizing Button and Tab Colors:
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.
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.
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'.
Customizing Product Page Hero Header
Open the course displayed under the catalog.
The same method can be used to edit bundles, tests, live classes, and products in the catalog.
Once the text color is set, you will see a message as displayed below.
Now, the product page is customized according to your necessity.