Overview
You now have the option to personalize the appearance of your product pages by selecting from a curated collection of themes. These themes enable you to create a unique brand identity and enhance the user experience.
With these customizations, you can apply various styles to your products, giving them a distinct and appealing look. For more detailed instructions on customizing your memberships using themes, refer to the provided help article.
Step 1: Choose a product theme
When creating a product, the classic theme will be selected by default. However, we offer a selection of different system themes for you to choose from, allowing you to align your digital product with your unique personal brand. Each theme offers a distinct look, feel, and overall experience for your members, providing you with a range of options to enhance the presentation of your product.
How to select a theme
Select the Product you wish to apply a theme
Click Customize
The theme gallery serves as a collection of system themes included in this release. User-created themes (My Themes) will be introduced in future updates. With the theme gallery, users can select and apply a theme or customize existing themes to suit their preferences.
Step 2: Customize your theme
Personalize the product page of the selected theme by following these steps:
Click the "customize" option in the theme gallery to access the customizations builder.
Customize the theme settings according to your preferences.
To further customize specific sections of your page, click on the desired section in the sidebar editor on the left-hand side. Once inside a section, you will find various customization options to modify.
The following set of properties can be changed under theme settings
Primary Color - This color setting applies to various elements such as buttons, top icons, lesson progress indicators, course titles, category titles, and instructor titles.
Secondary Color - The secondary color applies to elements like instructor names, instructor descriptions, lesson descriptions, category descriptions, and button texts.
Primary Font - This font selection affects buttons, top icons, lesson progress indicators, course titles, category titles, and instructor titles.
Secondary Font - The secondary font applies to instructor names, bios, lesson descriptions, category descriptions, and button texts.
Logo Placement - This setting determines whether the logo will be positioned in the header or hero section of the page.
The following set of properties can be changed under Sections on the product page
Header Customization:
Navigation: Go to Membership->Products->Customize->Gallery>Customize>Sectionsâ> Header
Background: Choose a background color using the color picker.
Alignment: Align the header content to the left, right, or center.
Hero Customization:
Navigation: Go to Membership->Products->Customize->Gallery>Customize>Sectionsâ> Hero
Size: Select the size of the hero section, such as extra small, small, medium, or large.
Course Title: Customize the font and alignment for the course title.
Course Description: Customize the font and alignment for the course description.
Background: Customize the hero section background by selecting an image, adjusting its size, transparency, or choosing a color using the color picker.
Button: Customize the button's content, font, background color, and alignment.
Lesson Progress Customization:
Navigation: Go to Membership->Products->Customize->Gallery>Customize>Sectionsâ> Lesson Progress
Background: Choose a color for the lesson progress section.
Font: Customize the font for the lesson progress section.
Progress Color: Select the color for the progress indicator.
Course Body Customization:
Navigation: Go to Membership->Products->Customize->Gallery>Customize>Sectionsâ> Course Body
Category Font: Customize the type, size, and color for category headings.
Sub-Category Font: Customize the type, size, and color for sub-category headings.
Category Description Font: Customize the type, size, and color for category descriptions.
Lesson Font: Customize the type, size, and color for lesson headings.
Lesson Description Font: Customize lesson descriptions' type, size, and color.
Background: Customize the course body background by selecting an image or color and adjusting transparency.
Instructor Customization:
Navigation: Go to Membership->Products->Customize->Gallery>Customize>Sectionsâ> Instructor
Background: Choose a color for the instructor section background.
Heading Font: Customize the color, type, and size for the instructor section headings.
Name Font: Customize the color, type, and size for the instructor's name.
Title Font: Customize the instructor's title's color, type, and size.
Bio Font: Customize the color, type, and size for the instructor's biography.
The following set of properties can be changed under Sections on the Lesson page
Lesson Body Customization:
Navigation: Go to Membership->Products->Customize->Gallery>Customize>Lesson>Sectionsâ> Lesson Body
Background: Choose a background color for the lesson body.
Title: Customize the font type and font color for lesson titles.
Description: Customize the font type and font color for lesson descriptions.
Button: Customize the button content, color, font type, and font color.
Next Lesson: Customize the background color, title font, title color, next lesson button color, next lesson button font type, and next lesson button font color.
Lesson title: Customize the font color for lesson titles.
Course Navigation Customization:
Background: Choose a background color for the course navigation section.
Category: Customize the font type and font color for category names.
Lesson: Customize the font type and font color for lesson names.
Highlight: Customize the color and font color for highlighted elements.
Bread Crumb: Customize the font type and font color for bread crumbs.
Next Category: Customize the background color, font type, and font color for the next category.
Instructor Customization:
Navigation: Go to Membership->Products->Customize->Gallery>Customize>Sectionsâ> Instructor
Background: Choose a color for the instructor section background.
Heading Font: Customize the color, type, and size for the instructor section headings.
Name Font: Customize the color, type, and size for the instructor's name.
Title Font: Customize the instructor's title's color, type, and size.
Bio Font: Customize the color, type, and size for the instructor's biography.
Please be aware of the following:
After customizing any aspect of the theme settings, clicking the "save changes" button will immediately reflect those changes in the preview.
Using the "Reset to Default" option will revert all the settings to the default values of the theme.
If sections within the product page are customized after changing the theme settings, the customizations made at the section level will take precedence over the theme setting customizations.
Step 3: Apply or save your theme
Now that you have selected and customized a theme for your Product Pages, the final step is to apply it to your membership site. Once the theme is applied, this will be the preview that your members will see and interact with.
To apply the theme, follow these steps:
Select the Product you want to apply the theme to.
Click on the "Customize" option.
Browse the theme gallery and click on "Apply" for the theme you wish to use. Alternatively, you can customize the theme first and then apply it by clicking "Apply" in the top right corner after making the desired customizations.
Save Theme Button:
To save the theme for global use in your location, click the "Save Theme" button. Please note that when you click "Save Changes," the modifications will only be stored for the specific theme and won't be applied globally. To make the theme available for all locations, use the "Save Theme" button.
Please be aware of the following:
"Save Theme" will only store the most recent changes made after clicking "Save Changes." Any "unsaved changes" will not be applied.
Customizing and saving a template for global use will not impact other products using the same theme.
When a user applies the theme again to a product, the new changes will be reflected and take effect.
Applying the theme
Apply a theme to a specific product, Clicking on "Apply" from the theme gallery will apply the theme to the product directly.
After customizing the theme, click the "Save Changes" button. Once saved, you can click the "Apply" button to apply the theme to the specific product. Once applied, the "Apply" button will change to "Applied," indicating that the theme has been successfully applied to the product.
Please be aware that when you apply a theme using the "Apply" button, it will only be applied to the selected product. The customizations made for that product won't be available globally to other products in the location.
Save Changes
You can customize a theme at the product level and save it as a draft without applying it to any products. Clicking "Save Changes" will store the changes as a draft for the theme.
The drafted theme with changes can be applied to the product later. It's important to note that draft themes are not global and will only be available across some locations. They are specific to the product they were created for.
Please be aware that clicking "Save Changes" for a theme not currently applied to any product will update the theme with the changes. This updated theme can be used in the same product later. However, saving the changes will not modify the theme properties globally across all products or locations.
Instructor details, Favicon, and Logo
Navigate to product details
Click on customizations
Update the instructor details, favicon, and logo