Skip to main content

How to Use Membership Themes in Stack

Overview​

Personalize your membership product pages with Stack's carefully selected themes. These themes allow you to create a unique brand identity and enhance the user experience. Customize your themes to add style and personality to your digital products.

Step 1: Choose a Product Theme​

When you create a new product, it automatically uses the classic theme. However, Stack offers a variety of system themes to better align your product with your brand. Each theme provides a distinct look and feel, enhancing the experience for your members.

How to Select a Theme​

  1. Select the product you want to customize.
  2. Click on Customize.
  3. Explore the Theme Gallery to view available system themes. Note that user-created themes will be introduced in future updates.

Step 2: Customize Your Theme​

Once you've chosen a theme, it's time to make it your own.

  1. In the theme gallery, click Customize to open the customization builder.
  2. Use the sidebar editor on the left to modify sections of your page. Click on a section to view and edit its customization options.

Theme Settings​

  • Primary Color: Applies to buttons, top icons, lesson progress, course titles, and more.
  • Secondary Color: Used for instructor names, descriptions, and button text.
  • Primary Font: Affects buttons, icons, and various titles.
  • Secondary Font: Used for instructor bios and descriptions.
  • Logo Placement: Choose whether the logo appears in the header or hero section.

Customize Sections​

  • Navigation: Customize via Sites > Membership > Products > Customize > Gallery > Customize > Sections > Header.
  • Background: Choose a color.
  • Alignment: Set to left, right, or center.

Hero​

  • Navigation: Sites > Membership > Products > Customize > Gallery > Customize > Sections > Hero.
  • Size: Options include Extra Small, Small, Medium, Large.
  • Course Title and Description: Adjust font and alignment.
  • Background: Modify image size, transparency, and color.
  • Button: Customize content, font, background color, and alignment.

Lesson Progress​

  • Navigation: Sites > Membership > Products > Customize > Gallery > Customize > Sections > Lesson Progress.
  • Background and Font: Choose colors.
  • Progress Color: Set the color.

Course Body​

  • Navigation: Sites > Membership > Products > Customize > Gallery > Customize > Sections > Course Body.
  • Fonts: Customize category, sub-category, and lesson fonts.
  • Background: Adjust image, color, and transparency.

Instructor​

  • Navigation: Sites > Membership > Products > Customize > Gallery > Customize > Sections > Instructor.
  • Background and Fonts: Adjust colors, types, and sizes for headings, names, titles, and bios.

Please Note​

  • Clicking Save Changes will update the preview with your customizations.
  • Reset to Default will revert settings to the theme's original defaults.
  • Customizations made to sections will override theme settings.

Step 3: Apply or Save Your Theme​

After customizing, you need to apply your theme to make it live.

  1. Select your product.
  2. Click Customize.
  3. Browse the theme gallery and click Apply for your chosen theme. Alternatively, customize further and then apply by clicking Apply in the top right corner.

Save Theme Button​

  • Use the Save Theme button to save your theme for future use. Note that this saves changes locally and does not make them available globally.

Applying the Theme​

  • Click Apply from the theme gallery to apply the theme directly to your product.
  • Customize and save changes before applying to ensure your product reflects the latest updates.

Save Changes​

  • Save drafts of a theme at the product level. Draft themes can be applied later and are not available globally.
  1. Navigate to product details.
  2. Click on Customizations.
  3. Update instructor details, favicon, and logo as needed.