What is the Browse Products page (ie my product catalog)?

This article covers the functionality and how to modify the new product list page. 

Overview

We're rolling out a new student homepage experience called "Browse Products" that will replace the current "My Products" and "All Products" pages. 

• "Browse products" will be equivalent to "All products"
• "Browse Products" with the "My library" filter will be the equivalent of "My products"

Navigation

Setting as homepage 

If you want this page to be your homepage for logged-in or logged-out users, you can update your Homepage Settings in the Navigation section. Simply select "Course Directory" by following the steps in the Personalize Your Navigation article.

Otherwise, students can access this page only if you've added a link to the products catalog in your navigation bar or on another page.

If you previously linked to the old products catalog, don’t worry—existing links will seamlessly direct students to the updated Browse Products page. More details on how redirects work can be found in the next section.

URL redirects

To ensure a seamless transition, we've implemented URL redirects so your students will always land on the correct page.

• Existing links to the "All Products" or "My Products" pages will redirect to their equivalent pages in the new experience:
  • "Browse Products" replaces "All Products."
  • "Browse Products" with the "My Library" filter applied replaces "My Products."
• Existing category links will redirect to the new page with the corresponding category filter applied.
•  

Customizations

Products

Thumbnails

We support an aspect ratio of 16:9 and recommend using an image size of 1024 × 576px (.jpg or .png). If your image uses a different ratio, you can still upload it, but it may not appear as expected.

Learn more about image size guidelines here. 

Theme colors

Below are some screenshots of how the different theming colors will apply on this page. Learn how to update your theme colors and other modifications from the Modify Your School Theme article. 

Nav Bar & Footer Background

Navigation bar link - scrolling

Buttons and links

Customizations using code

Power Editor

Power Editor will not be supported on this page. When you use the Power Editor, it essentially freezes the code for that part of our platform in your school, meaning any updates we make won't be available to you. Instead, you will use code snippets as a more versatile way to customize your school while still enabling platform updates.

Code Snippets

You can make advanced customizations using CSS utilizing Code Snippets. If you've previously used Code Snippets to make particular modifications to the old "All Products" or "My Products" pages you'll need to retarget the new CSS selectors on the latest "Browse Products" page.

Updating your CSS selectors 

To help you get started, here's a list of common selectors. Keep in mind that this is not an exhaustive list—there may be additional selectors you'll need to update depending on your school's custom code.

• Browse products title: .BrowseProductsTitle
• Navigation bar: .NavigationBar and/or .NavigationBarMobile
• Footer: .SiteFooter
• Filters
  • My library: button#heap_my-library-filter
  • Search: input#heap_product-search
  • Authors dropdown: button#heap_author-filter
  • Product type dropdown: button#heap_product-type-filter
  • Sort by: button#heap_product-sort
  • Categories: heap_category-filter_
• On product cards
  • Product title: .ProductTitle
  • Product description: .ProductDescription
  • Product type: .ProductType
  • Author: .Author
  • Next lesson name: .NextLessonName
  • Progress bar: .ProgressBar
  • Product image: .ProductImage

Some popular code snippet modifications 

Adding an image banner

/* Banner on Browse Products page */
.BrowseProductsTitle {
    position: relative; /* Required for absolute positioning */
}

.BrowseProductsTitle::before {
    content: "";
    display: block;
    background-image: url('enter image url');
    background-size: contain; /* Ensures the whole image fits within the banner */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
    height: 200px; /* Adjust the height based on your image's aspect ratio */
    margin-top: 10px; /* Adds spacing if necessary */
}

 

Hide elements on the page (ex. hiding author names from product cards)

Enter CSS selector {
    display: none; 
}

 

Styling product title

/* Styles for product card name */
.ProductTitle {
    color: #116A42; /* Text color */
    font-weight: bold; /* Bold font */
    font-size: 28px; /* Font size */
    overflow: hidden; /* Prevent overflow */
}

What's not supported

We understand that this first version may not work for every school, so here’s what won’t be supported at launch. We’ll prioritize future improvements based on your feedback, so we encourage you to give it a try. If it’s not the right fit, you can easily opt-out.

Power Editor

Power Editor will not be supported on this page. When you use the Power Editor, it essentially freezes the code for that part of our platform in your school, meaning any updates we make won't be available to you. Instead, you will use code snippets as a more versatile way to customize your school while still enabling platform updates.

Course ordering

In this initial release of the Browse Products page, the course order set in your admin settings will not be reflected. Our focus is on helping you spotlight all of your products, not just courses, and we’ll be refining this experience based on your needs.

Custom text 

Custom text will still be supported in pricing CTAs but won’t be available for other areas of the page just yet. We recognize that creators and students come from diverse backgrounds, and we’re working toward a built-in solution for translations while also considering ways to support your preferred terminology.