# How to use membership themes > Looking for a way to customize your courses. We got you covered with our membership themes V1. More to come - Source: https://docs.ghlcustomercare.com/docs/memberships-and-communities/membership-courses-sites/how-to-use-membership-themes - Section: Memberships & Communities / Membership/Courses Sites - Reading time: 5 min - Images: 10, each explained below --- **[](#overview-2)** ### [**Overview**](#overview-2) ### [**Step 1:** Choose a product theme](#step-1-choose-a-product-theme) ### [**Step 2:** Customize your theme](#step-2-customize-your-theme) ### [**Step 3** : Apply or save your theme](#step-3-apply-or-save-your-theme) ### [**Instructor details, Favicon, and Logo:**](#instructor-details-favicon-and-logo) --- # **Overview** You can now customize the feel of your product pages using handpicked themes. Themes help you establish a custom brand identity and experience. The customizations allow you to add a variety of styles to the products. Check out the help article below for more info on how to customize your memberships. ## **Step 1: Choose a product theme** Creating a product will by default select the classic theme, but we provide different system themes to choose from to best match your digital product with your personal brand! Keep in mind that each Theme will provide a different look, feel, and overall experience for your Members ## **How to select a theme** - Select the Product you wish to apply a theme  - Click Customize [ ![Step 2 of 2: Click Customize](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48191005712/original/e9uAdV5JSWNAnovGfRQJdxV32xGiYtckdA.png) **Step 2 of 2: Click Customize** This screenshot accompanies step 2 of 2 in the "How to select a theme" section of "How to use membership themes". At this point in the walkthrough you click Customize. For context, this section explains: Theme gallery is the placeholder for system themes which is part of this release and user-created themes (My Themes) will be coming in subsequent releases. Theme gallery allows users to apply a theme or customize an existing theme. - What to click: Click Customize Full procedure: 1. Select the Product you wish to apply a theme 2. Click Customize <- this image ](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48188471292/original/GMC5baHrqCQj9pqR_TqqD34yp1WB-mKVCQ.jpeg?1644413785) [ ![How to select a theme (image 2 of 10)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48191005790/original/75hPFK2cz-g23Uxz8bJuiEudySAtnwDe_Q.png) **How to select a theme (image 2 of 10)** This screenshot appears in the "How to select a theme" section of "How to use membership themes". The text alongside this image reads: Select the Product you wish to apply a theme Click Customize. Immediately after, the guide continues: Theme gallery is the placeholder for system themes which is part of this release and user-created themes (My Themes) will be coming in subsequent releases. Theme gallery allows users to apply a theme or customize an existing theme. - What to choose: Select the Product you wish to apply a theme Click Customize - Next: Theme gallery is the placeholder for system themes which is part of this release and user-created themes (My Themes) will be coming in subsequent releases. Theme gallery allows users to apply a theme or customize an existing theme. Full procedure: 1. Select the Product you wish to apply a theme 2. Click Customize ](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48188471320/original/lPVFsn8Nl2PkRQ8KV6Ombx0SOojGK1QjUQ.jpeg?1644413789) - Theme gallery is the placeholder for system themes which is part of this release and user-created themes (My Themes) will be coming in subsequent releases. Theme gallery allows users to apply a theme or customize an existing theme. # **Step 2: Customize your theme** Customize the product page of the theme - In the theme, gallery click on customize to open the customizations builder. - Customize the theme settings. - To customize the sections of your page, simply click into the Section you would like to edit in the sidebar editor on the left-hand side. Once you have clicked inside of a section, you can see all of the different customization options laid out. ### **The following set of properties can be changed under theme settings ** 1\. **Primary Color -** This Applies to Button, Top Icons, Lesson Progress, Course Title, Category Title, Lesson title, Instructor Title         2. **Secondary Color -** Instructor Name, Instructor Description, Lesson Description, Category Description, Button Text         3. **Primary Font -** This Applies to Button, Top Icons, Lesson Progress, Course Title, Category Title, Lesson title, Instructor Title         4. **Secondary Font -** Instructor Name, Instructor Bio, Lesson Description, Category Description, Button Text         5. **Logo placement -** It decides if the logo will be placed in the header or hero section  [ ![The following set of properties can be changed under theme settings (image 3 of 10)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48191006243/original/wR9k1SGeptyjeLxxDn_norNQvVW52WoAwA.png) **The following set of properties can be changed under theme settings (image 3 of 10)** This screenshot appears in the "The following set of properties can be changed under theme settings" section of "How to use membership themes". The text alongside this image reads: 5. Logo placement - It decides if the logo will be placed in the header or hero section. Immediately after, the guide continues: Sites->Membership->Products->Customize->Gallery>Customize>Sections—> Header. - What this covers: 5. Logo placement - It decides if the logo will be placed in the header or hero section - Controls: Primary Color -, Secondary Color -, Primary Font -, Secondary Font -, Logo placement - - Next: Sites->Membership->Products->Customize->Gallery>Customize>Sections—> Header ](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48188471406/original/cbZfodBRGhNiiVchaRteUZmqRNaxz5Pt7Q.jpeg?1644413795) [ ![The following set of properties can be changed under theme settings (image 4 of 10)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48189521763/original/VnOdZw_1Oms4ZeX6olQzg_ZPHbIeqvCunA.jpeg) **The following set of properties can be changed under theme settings (image 4 of 10)** This screenshot appears in the "The following set of properties can be changed under theme settings" section of "How to use membership themes". The text alongside this image reads: 5. Logo placement - It decides if the logo will be placed in the header or hero section. Immediately after, the guide continues: Sites->Membership->Products->Customize->Gallery>Customize>Sections—> Header. - What this covers: 5. Logo placement - It decides if the logo will be placed in the header or hero section - Next: Sites->Membership->Products->Customize->Gallery>Customize>Sections—> Header ](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48188471370/original/tWFsddzjOdWeqlvQ4e-KDuGWmUvVaeQIcw.jpeg?1644413790) ## **The following set of properties can be changed under Sections in product page:** 1. Header: Navigation: Sites->Membership->Products->Customize->Gallery>Customize>Sections—> Header Background:  Background color picker Alignment:  Can be left, Right or Center 2. Hero Navigation:  Sites->Membership->Products->Customize->Gallery>Customize>Sections—> Hero Size:  Extra Small, Small, Medium, Large Course Title:  Font, Alignment Course Description:  Font, Alignment Background:  Image-Size Dev team, Transparency, Color Picker Button: Content, Font, BG Color, Alignment 3. **Lesson Progress** Navigation:  Sites->Membership->Products->Customize->Gallery>Customize>Sections—> Lesson  Progress Background:  Color Font Progress Color: Colour 4. **Course Body** Navigation: Sites->Membership->Products->Customize->Gallery>Customize>Sections—> Course Body Category Font: Type Size Colour Sub Category Font: Type Colour  Size Category Description Font: Type Colour Size Lesson Font: Type Colour Size Lesson Description Font: Type Colour Size Background:  Image Color, Transparency 5. **Instructor** Navigation: Sites->Membership->Products->Customize->Gallery>Customize>Sections—> Instructor Background: Color Heading Font: Colour Type Size Name Font: Colour Type Size Title Font: Colour Type Size Bio Font: Colour Type Size ## **The following set of properties can be changed under Sections in Lesson page:** ![The following set of properties can be changed under Sections in Lesson page: (image 5 of 10)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48199325855/original/vboCa3UuBuwhwg0d1KFSQ9pJZ7mYoEYkTA.png) **The following set of properties can be changed under Sections in Lesson page: (image 5 of 10)** This screenshot appears in the "The following set of properties can be changed under Sections in Lesson page:" section of "How to use membership themes". For context, this section explains: Sites->Membership->Products->Customize->Gallery>Customize>Lesson>Sections—> Lesson Body. This part of the guide covers 1 field, listed below. Immediately after, the guide continues: Sites->Membership->Products->Customize->Gallery>Customize>Lesson>Sections—> Lesson Body. - Fields: Lesson Body: - Controls: 3. Instructor, save changes, reflect in the preview - Next: Sites->Membership->Products->Customize->Gallery>Customize>Lesson>Sections—> Lesson Body 1. Lesson Body: Navigation: Sites->Membership->Products->Customize->Gallery>Customize>Lesson>Sections—> Lesson Body Background:  Background color  Title:  Font type Font Colour Description: Font Type Font Colour Button: Content Colour Font Type Font Colour Next Lesson: Background Colour Title:Font,Colour Next Lesson Button-Colour,Font Type,Font Colour Lesson title:Font Colour        **2.  Course Navigation:**   Background Colour   Category:Font Type,Font Colour   Lesson: Font Type,Font Colour   Highlight:Colour,Font Colour   Bread Crumb:Font Type,Font Colour   Next Category:Background Colour,Font Type,Font Colour        **3.   Instructor** Navigation: Sites->Membership->Products->Customize->Gallery>Customize>Sections—> Instructor Background: Color Heading Font: Colour Type Size Name Font: Colour Type Size Title Font: Colour Type Size Bio Font: Colour Type Size **Please Note: ** When "**save changes**" button is clicked after customizing anything in the theme settings it will **reflect in the preview**. Reset to default will change all the settings to default values of the theme. If sections are customized after theme setting are changed, sections customization will override theme setting customizations. ## **Step 3: Apply or save your theme** Now that you have picked a theme for your Product and customized your Product Pages, the last step is to apply it. Once your theme is applied this will be the final preview your Members will see and interact with! - Select your Product. - Click Customize. - Browse the theme gallery and click on apply for the theme you wish to apply - Alternatively, you can choose to customize the theme and then apply by clicking on apply on the top right corner ## **Save Theme Button:** Save the theme for global use in your location by using the save theme button. When you click on "save changes" the changes will only be stored for the theme and will not be available for global use. ## The theme can then be saved for global use in the locations if the user clicks on the "save theme" button. [ ![The theme can then be saved for global use in the locations if the user clicks on the "save theme" button. (image 6 of 10)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48189521761/original/twN4pepJLbV4zVRbZgiwrAkt30o-zMUcGQ.jpeg) **The theme can then be saved for global use in the locations if the user clicks on the "save theme" button. (image 6 of 10)** This screenshot appears in the "The theme can then be saved for global use in the locations if the user clicks on the "save theme" button." section of "How to use membership themes". The text alongside this image reads: Select your Product. Click Customize. Browse the theme gallery and click on apply for the theme you wish to apply Alternatively, you can choose to customize the theme and then apply by clicking on apply on the top right corner. Immediately after, the guide continues: " Save Theme " will save only the latest changes which are stored after save changes are clicked. All "unsaved changes" won't be reflected. When a template is customized and saved for global use it won't affect all the other products…. - What to choose: Select your Product. Click Customize. Browse the theme gallery and click on apply for the theme you wish to apply Alternatively, you can choose to customize the theme and then apply by clicking on apply on the top right corner - Controls: Save Theme, Applying the theme, apply - Next: " Save Theme " will save only the latest changes which are stored after save changes are clicked. All "unsaved changes" won't be reflected. When a template is customized and saved for global use it won't affect all the other products which are already using the same theme. When a user applies the theme again to a product the new changes should start reflecting. ](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48188471381/original/Wsrrj5bvG2Rl4f63SmSlYNH-yE4T7_1AzQ.jpeg?1644413791) **Please Note :**  "**Save Theme**" will save only the latest changes which are stored after save changes are clicked. All "unsaved changes" won't be reflected. When a template is customized and saved for global use it won't affect all the other products which are already using the same theme.  When a user applies the theme again to a product the new changes should start reflecting. **Applying the theme** Apply a theme to a specific product [ ![The theme can then be saved for global use in the locations if the user clicks on the "save theme" button. (image 7 of 10)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48189521748/original/SJJlGJSJmMXVEoK-XqmUyJ9BVPCy3evUWQ.jpeg) **The theme can then be saved for global use in the locations if the user clicks on the "save theme" button. (image 7 of 10)** This screenshot appears in the "The theme can then be saved for global use in the locations if the user clicks on the "save theme" button." section of "How to use membership themes". The text alongside this image reads: Apply a theme to a specific product. For context, this section explains: " Save Theme " will save only the latest changes which are stored after save changes are clicked. All "unsaved changes" won't be reflected. When a template is customized and saved for global use it won't affect all the other products which are already using the same theme. When a user applies the…. Immediately after, the guide continues: Clicking on " apply " from the theme gallery will apply the theme to the product directly. - What this covers: Apply a theme to a specific product - Controls: Save Theme, Applying the theme, apply - Next: Clicking on " apply " from the theme gallery will apply the theme to the product directly. ](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48188471323/original/YTNVI1Y1QdLojnbIwWVPiche0ZKg0z1BWA.jpeg?1644413789) Clicking on "**apply**" from the theme gallery will apply the theme to the product directly. [ ![The theme can then be saved for global use in the locations if the user clicks on the "save theme" button. (image 8 of 10)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48189521757/original/vNNY5B5GSGrHn2tVGbiQOLqIJnjPeKEsyA.jpeg) **The theme can then be saved for global use in the locations if the user clicks on the "save theme" button. (image 8 of 10)** This screenshot appears in the "The theme can then be saved for global use in the locations if the user clicks on the "save theme" button." section of "How to use membership themes". The text alongside this image reads: Clicking on " apply " from the theme gallery will apply the theme to the product directly. Immediately after, the guide continues: You can customize the theme and then after clicking on save changes you can click on the apply button to apply the theme to the particular product. Apply button will change to applied. - What this covers: Clicking on " apply " from the theme gallery will apply the theme to the product directly. - Controls: Save Theme, Applying the theme, apply - Next: You can customize the theme and then after clicking on save changes you can click on the apply button to apply the theme to the particular product. Apply button will change to applied. ](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48188471383/original/bOeOyX1k0nvskjbvO47uY6TZBmAwQszKRg.jpeg?1644413792) You can customize the theme and then after clicking on save changes you can click on the apply button to apply the theme to the particular product. Apply button will change to applied.  **Please Note:**  When a theme is applied using the apply button it will only get applied to the selected product and  customization set won't be available globally to the t in the location. # Save Changes: Customize and save drafts of a theme at the product level. You can customize a system-generated theme and save it as a draft without applying it to any of the products. When you click on "**save changes**" the changes will be stored for the theme as a draft. The Draft theme (With changes) can be applied later to the product. Draft themes are not global and won't be available across all locations. [ ![Save Changes: (image 9 of 10)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48189521759/original/20ndfHek6SAKB1HkrK1bsjYoNg9zA-5h-A.jpeg) **Save Changes: (image 9 of 10)** This screenshot appears in the "Save Changes:" section of "How to use membership themes". The text alongside this image reads: The Draft theme (With changes) can be applied later to the product. Draft themes are not global and won't be available across all locations. Immediately after, the guide continues: If " save changes " is clicked on a theme which is not applied to a product, then the theme will be updated with the changes and can be used in the same product at a later point. It won't change the theme properties globally. - What this covers: The Draft theme (With changes) can be applied later to the product. Draft themes are not global and won't be available across all locations. - Controls: save changes - Next: If " save changes " is clicked on a theme which is not applied to a product, then the theme will be updated with the changes and can be used in the same product at a later point. It won't change the theme properties globally. ](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48188471391/original/cD38dP29VnBWpw_gf-vO-wHCI2qFnylOvg.jpeg?1644413793) **Please Note : ** If "**save changes**" is clicked on a theme which is not applied to a product, then the theme will be updated with the changes and can be used in the same product at a later point. It won't change the theme properties globally. ## **Instructor details, Favicon, and Logo:**  - **Navigate to product details** - **Click on customizations** - **Update the instructor details, favicon, and logo**  **[ ![Instructor details, Favicon, and Logo: (image 10 of 10)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48189521764/original/qYMBN-r32zSmQyBEWQ7zGvbK2Vk9rXyRng.jpeg) **Instructor details, Favicon, and Logo: (image 10 of 10)** This screenshot appears in the "Instructor details, Favicon, and Logo:" section of "How to use membership themes". The text alongside this image reads: Navigate to product details Click on customizations Update the instructor details, favicon, and logo. - Where to go: Navigate to product details Click on customizations Update the instructor details, favicon, and logo - Controls: Navigate to product details, Click on customizations Full procedure: 1. Navigate to product details 2. Click on customizations 3. Update the instructor details, favicon, and logo ](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48188471409/original/pFP11wJjegZytAZXIlUvLkReL_r5fRQACA.jpeg?1644413796)** --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com