Section 3: Category and Product Pages

Category Page

Your Categories each have their own pages to display Products in. Multiple Category pages can be published at any time. The Category settings will determine which Layout and List Mode is used for its products.

Category Settings that impact theme

You can set which Theme template is used for the Category by choosing the page in the Category's Settings.

You can also set how the Category Page's Product List can be displayed. Select a List Mode option in the Category's Settings to choose the default and available display options.

Customizing a Category Page

📘

Before making changes, we recommend duplicating the existing page and making your changes there before publishing.

A Category Page is made up of Category Title, Breadcrumbs, Category Description, Category Filters, and Category Product List.

• Category Title displays the name of the Category. You can design this element's text size and color. To change this title, the name of the category must be changed.
• Breadcrumbs help your store's visitors see the category or subcategory of the product they are viewing. They can be removed by simply deleting the element.
• Category Description also comes from the category settings to be displayed on your category's page.
• Category Filters will display all attributes which are set-up to act as filters. Allows customers to filter the list of products. Can be edited to cause filters to be expanded or unexpanded upon page load. Click here to learn how to make an attribute available as a filter.
• Category Product List will display products from the category that you are viewing. The Category's settings determine how these products are displayed. Editing this element reveals settings to decide how many columns should display and options for what information is displayed.

👍

You can add Attributes to be displayed on the product list.

Edit the list and add attributes into the following section:

Subcategory Navigation within Category Page

Customers who have many nested categories often decide to include a link to the subcategory on a main Category page. You can do this a number of ways, but the important thing is to know that you can add more elements to the category pages. By creating a category page format, like the below example, you can have a standard parent category page which links to the subcategories.

1. Create a new Category page which will be used for just the main category. Then open the page and move Category Description lower to make space. You can click and drag using the ⇳ to create more space as shown below. Doing so stretches the box comprising the upper section of this page.

   

2. Now that you have more space, you can begin adding buttons or images which will link to the subcategories. We will use an Information Banner for the links in this tutorial.

   

3. Place that new Information Banner on the page. I selected the 2nd one from the list for this example. Then click on it to Edit Information Banner.

4. Here you can edit each of the 3 images. This info banner can also display a heading and paragraph. Set the text that should be displayed.

   

5. Lastly, be sure to set the link of each image to bring customers to the subcategory page.

Product Page

Each Product has its own dedicated page which displays all of its information. All products will use the same Product Page theme.

• The Product Essentials block will contain the product and can be edited to display other information about the product. You can display Additional Attributes in this area and more!
• The Product Gallery block displays images of your products. You can edit this element to change the way visitors can interact with the picture.

Related / Upsell Products

The Product Page can display Related Products in an expandable accordion. Click here to learn how to add products as Related or Upsells.

The accordion which contains your Related Products can be edited and designed. It often is used to contain the Specs or Description of a product.