NOTE: The new product catalog does not support Power Editor and Custom Text. You may also need to update your code snippets. Learn more here.
Overview
We’re rolling out a new student homepage experience called Browse Products, which will fully replace the old My Products and All Products pages. This page serves as your school’s product catalog—allowing students to search, sort, and explore all of your offerings.
Key benefits / use cases
Create a centralized, modern product catalog experience.
Offer smart filters like “My library” to tailor the view for logged-in students.
Enable flexible customization using recommended CSS and layout controls.
How the Browse Products page works
What replaces what?
Browse Products = replaces the old All Products page.
Browse Products + My library filter = replaces the old My Products page.
Where students find this page
You can control how students access this page:
Set it as your homepage for logged-in and/or logged-out users by going to Site > Navigation and selecting Course Directory.
Link to it manually from your navigation bar or other pages.
Note: If you previously linked to the old catalog pages, those links will automatically redirect to the new Browse Products page.
Customizing your catalog
Product thumbnails
Recommended aspect ratio: 16:9
Recommended size: 1024 × 576px (.jpg or .png)
Other aspect ratios may still work, but images may not display as expected.
Theme colors
The Browse Products page uses your school's theme colors for the:
Nav Bar & Footer Background
Buttons and links
Navigation bar link - scrolling
To update your theme colors, see Modify Your School Theme.
Using code to customize
Code Snippets
Caution: Adding custom CSS is an advanced modification. Teachable does not support or troubleshoot issues caused by custom code.
If you previously used Code Snippets on the old product pages, you’ll need to update your CSS selectors. Here are some common examples:
Page title:
.BrowseProductsTitleNavigation bar:
.NavigationBarand/or.NavigationBarMobileFooter:
.SiteFooterFilters:
My library:
button#heap_my-library-filterSearch:
input#heap_product-searchAuthors dropdown:
button#heap_author-filterProduct type dropdown:
button#heap_product-type-filterSort by:
button#heap_product-sortCategories:
heap_category-filter_
Product cards:
Title:
.ProductTitleDescription:
.ProductDescriptionType:
.ProductTypeAuthor:
.AuthorNext lesson:
.NextLessonNameProgress bar:
.ProgressBarImage:
.ProductImage
Note: Additional selectors may be needed depending on how your code is written. Please review your code thoroughly and consult a developer if necessary.
What’s not supported
Power Editor
This page does not support Power Editor. Power Editor freezes the layout and prevents future platform updates. We recommend using Code Snippets instead.Custom Text
We're actively working on a built-in translation solution and better terminology control.
FAQs
Can I still use the old product catalog?
Can I still use the old product catalog?
No. All users will be transitioned to the Browse Products page by the end of the year. Legacy pages will be redirected automatically.
Can I still customize the product catalog?
Can I still customize the product catalog?
Yes, but not using Power Editor. You’ll need to use Code Snippets. Be sure to update your selectors for the new layout.
Why don’t my translations or custom text updates show?
Why don’t my translations or custom text updates show?
Custom Text isn’t supported. We’re working toward future translation features.