Browse Products

COMING SOON: We will begin progressively rolling out to all schools starting February 2025. 

This article goes over the functionality and how to modify the new product index 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 - Logged in-comms.png

Finding products 

Students can easily narrow their search to find the exact product they’re looking for. Our search and filter features work together seamlessly, offering precise and customizable results.

  • My library - Filters the page to only show products you're enrolled in. 
  • Search bar - Search can be used to search across all product names. 
  • Sort by author - Will filter results to show products by all authors or a specific author. 
  • Sort by product - Will filter results to show all products or a specific product type. 
  • Categories - Only one can be selected at a time. Will display the courses that have been tagged with that category. (Learn more about adding and managing categories in this article

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

Browse products - Logged in-comms.png

Navigation bar link

Browse products - Logged in-comms (1).png

Buttons and links

Browse products - Logged in-comms (2).png

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

CAUTION: Adding custom code to your school is an advanced modification—we can't guarantee full functionality or compatibility with current or future versions of Teachable. This includes how the code functions, as well as how it impacts the appearance of your school. Teachable Support does not troubleshoot custom code issues.  

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 and their new equivalents. 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.

    • Categories, Authors, and Search
      Replace .row.search with .flex.flex-wrap.items-center.gap-4.mb-4

    • Product Name
      Replace .course-listing-title with .tracking-tight.text-xl.font-semibold.line-clamp-2.mb-2

    • Author Name
      Replace .small.course-author-name with .line-clamp-1

    • Progress Bar
      Replace .progressbar with .mt-2

NOTE: Other selectors may need to be updated based on how your code was written. Unfortunately, we’re unable to provide additional support for custom code updates. We recommend reviewing your code thoroughly and working with a developer to make the necessary adjustments. 

Some popular modifications 

Adding an image banner

/* Banner on Browse Products page */
h1.text-2xl.font-semibold.self-start.row-auto.col-span-full {
    position: relative; /* Required for absolute positioning */
}

h1.text-2xl.font-semibold.self-start.row-auto.col-span-full::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 my library, search, filters, and sort

/* Hide search and sort on Browse Products */
.flex.flex-wrap.items-center.gap-4.mb-4 {
    display: none; 
}

 

Hide categories

/* Hide categories on browse products */
.mt-8.sm\:mb-8 {
    display: none;
}

 

Hiding author name

/* Hide author name on Product Cards on Browse Products page */
.line-clamp-1 {
    display: none;
}

 

Hiding product type

/* Hide product type on Product Cards on Browse Products page */
.shrink-0 {
    display: none;
}

 

Styling product title

/* Styles for product card name */
.tracking-tight.text-xl.font-semibold.line-clamp-2.mb-2 {
    color: #116A42; /* Text color */
    font-weight: bold; /* Bold font */
    font-size: 28px; /* Font size */
    overflow: hidden; /* Prevent overflow */
}

 

Hide progress bar

/* Hide progress on Product Cards on Browse Products page */
.mt-2 {
    display: none; 
}

 

Hover - box shadow

/* Style for the card */
.rounded.border.bg-container.text-container-foreground.shadow-sm.ProductCard.flex.flex-1.flex-col.w-full.overflow-hidden {
  position: relative;
  transition: box-shadow 0.3s ease; /* Smooth transition for shadow */
}

/* Highlight effect on hover */
.rounded.border.bg-container.text-container-foreground.shadow-sm.ProductCard.flex.flex-1.flex-col.w-full.overflow-hidden:hover {
  box-shadow: 0 0 50px #1e90ff; 
}

 

FAQ

How do I provide feedback?

mceclip0.png

If you're an admin on a paid plan you'll see a "Let us know what you think" button when you navigate to your "Browse products" page that will allow you to provide direct feedback to the team. 

How do I switch back to the old version?

mceclip1.png

WARNING: Switching back is temporary, and you will automatically opt back into the new experience with our next major update. 

If you're an admin on a paid plan you'll see a "Switch to the old version" button when you navigate to your "Browse products" page that will allow you to take a quick survey and switch back to the old "All Products" and "My Products" pages. 

I switched back to the old experience and I want to switch back to the new one. 

Please send an email to learning-team-beta@teachable.com from an email address associated with an admin account on your school with your request and your school URL. 

Was this article helpful?

4 out of 4 found this helpful