Building a Course Catalog

The Course Catalog is a front-facing site page, where Students can purchase and directly self-enroll into a Courses that have been added to a Product. While the Courses are the content that Students will access, that Product is what is truly available for purchase via the Course Catalog, and contains your Courses. This also includes if you offer your Courses for free--you will set up a free Product that contains the Course/Courses, and then Students will be able to purchase the free Product to gain access to the Course. 

This guide will take you through the process of managing your Products in the Course Catalog, and creating a customizing your Course Catalog page. 

Be sure to review our overview of eCommerce Setup guides: Introduction to eCommerce

In this article

Creating a Product

Courses are required to be added to a Product in order to appear in the Course Catalog for purchase and self-enrollment by a Student. If you plan to offer a free course, you will still need to create a Product to allow your Students to enroll themselves. 

The exception to this process is bulk ordering a Course for a large group of Students. That process is explored further in our Managing Groups guide

If you haven't already created Products, be sure to review our overview of Adding a Course to a Product before continuing this Course Catalog guide. 

Managing Products in the Course Catalog

Once your Product(s) has been created, information will be drawn from a Product's general details to populate the Course Catalog page. This includes the title, description, featured image, price, and course access.

For example, see this information in the Product listing:

Compared to how it's seen on the Course Catalog page:

Expanded description of a Product on the Course Catalog page:

Creating the Course Catalog Page

Once you're ready to create your Course Catalog page, check out these steps:

  1. From the Admin Dashboard, select Pages & Menus, then Pages 
  2. A sample Course Catalog has been provided, named Product Listing. However you are free to create your own page by using the Create Page button.
  3. If you want to build your own page, please see this guide for more details. 
  4. The pre-built Product Listing snippet includes a display of all Products, a grid or list view, a search function, an Add to Cart button, and details for each available Product.
  5. The provided Course Catalog will display like this:
  6. Note that if you opt to create a new Course Catalog page, you will need to assign it as your Catalog Page on your settings:
    1. Head to Settings > General in the Admin Dashboard
    2. In the Site Page Identifications section, select your catalog page from the Product Catalog Page dropdown.
    3. Save your changes

Customizing the Course Catalog

Besides building your own new Course Catalog page (if you don't want to use the provided one) you can also customize the provided one as needed

  1. From the Admin Dashboard, select Pages & Menus, then Pages. Select the Product Listing--Course Catalog page.
  2. Here, you may edit the:
    1. Title: Set the title of your Course Catalog page. This will be used for internal administration.
    2. Page Layout: You can set the page layout automatically, to better format for the devices your Students may use. Full Width is recommended for desktop browser. Fixed Width with Left/Right margin Gaps is recommended for tablets. Page with No Headers is recommended for phone
    3. SEO Title should be a unique identifier under 60 characters.
    4. Your SEO Description should be between 50-160 characters. The description should include keywords to boost your recognition by search engines.
    5. The Thumbnail Image URL is displayed whenever your Course Catalog URL is shared on social media platforms like Facebook or Twitter. 
      The recommended dimensions are 1200x630 pixels, with an aspect ratio of 1.91:1.

  3. Be sure to click Update Page when you're done 

Note: If you need multiple Course Catalog pages to target different groups of Students, please contact Support to set that up.

You may also edit the content, which we'll go into once we understand how the page is built. 

Page Basics

The Content section is where you are free to design your page however you would like. You can insert your own HTML elements, and format however you wish. The one necessary ingredient for all Course catalog pages is the Product Listing snippet. This must be added in order to display your list of Products, and to allow for a Student to progress to the checkout section. You may customize anything you wish above or below the Product Listing snippet, but it must be present on the page for the Course Catalog to function properly.

On Edit Page, you'll see the page laid out something like this. 

  • Sections: The blue boxes are sections. Each section will have its own purpose, so think about what sort of sections you'd like your content divided up into on your page. 
  • Rows: We use rows (the green boxes) to further organize content within a section. Rows are powerful as unlike sections, they can be broken into columns and you can choose what layout you want to use. There can be multiple rows in each section. 
  • Blocks: Blocks (the grey boxes) are how you add content to the page! We have several different block types available: you can add Text/HTML, Image, Video, PDF, Button, Code, Contact Form, Product Listing, Shopping Cart and Checkout.
  • For more information on customizing your pages, please see our Page Builder guide.

To add or edit content:

  1. Blocks can be created in the Content editor, by selecting the grey + button. Then, select what sort of content you want to add: 
  2. You can also add any Layout to your page, but the Product Listing block must be added to this page. 
  3. Edit the Products shown and Catalog Rank. You have the option to order the product display. if you want certain products to display at the top of the page, then add the rank. By default it is 0. The product which has the highest catalog rank will be shown at the top of the page. You have to set order by Catalog Rank in Product Listing Page which is under Pages. Click on setting icon (gear) next to Product Listing Block.
  4. Here, you'll be able to choose the Layout, how the Product List is sorted, and if you only want certain Products or Product Categories to show. You can also exclude specific Products. Be sure to Save Changes when you're done, and then click Save Page. 

Creating a Pre-filtered Course Catalog

It is also possible to create a Course Catalog that only showcases Products mapped to a certain Product Category. This will allow you to limit the Products shown in the original Course Catalog, or create completely new Course Catalog pages that each showcase their own set of Products. For more details on how to do so, check out our Creating a Pre-filtered Course Catalog (using categories) article.

Next Step

Now that your Course Catalog is completed, it's time to move on to the Checkout process: