Designing your category pages

A category page is where shoppers browse a group of products. Other platforms call these collection pages. In Orbit they are category pages, and they all share one template. You design that template once in the page builder. Every category then fills in its own name, description, banner and products. Templates live under Storefront, then Templates.

Considerations

• Every category in your store uses the same template.
• The Category Page group of elements only shows when you are editing a category template.
• You pick one of your categories to preview in the builder. Shoppers always see the category they clicked.
• There is no Collection Grid element any more. Category Grid replaced it.

Open your category page template

1. From your Orbit dashboard, go to Storefront, then Templates.
2. Click the Categories tab to see only your category templates.
3. Hover over the template you want and click Edit design. The page builder opens.

Add category elements

1. In the toolbox on the left, click Elements.
2. Click the Category Page tab. You can also type in Search elements... to find one.
3. Drag the element onto the page.
4. Click the element to open its settings on the right.

Each element fills in on its own from the category the shopper is looking at:

• Category Title: the name of the category.
• Category Description: the category's description text.
• Category Banner: the category's banner image.
• Category Filters: lets shoppers narrow the products, for example by price or brand.
• Category Sorting: lets shoppers sort the products, for example by price.
• Category Layout Switch: lets shoppers swap between grid and list view.

Choose a category to preview

A new template has nothing to show until you point it at a category.

1. Click your Category Title, Category Description or Category Banner element.
2. In the settings panel, open Category Preview.
3. Click Select Category and pick one.
4. The page fills with that category's details, so you can see how your layout looks.

Note: The preview category only changes what you see in the builder. It is not the category shoppers see.

Show the products

1. In the toolbox, click Elements, then the Ecommerce tab.
2. Drag Product Grid onto the page.

3. Click the grid. In the settings panel, open Data Source.
4. Leave Data Source Type set to Category and pick no category. The grid then shows the products of whichever category the shopper opened.
5. Open Query & Merchandising to set Limit and Sort By.

Lay out the page

Arrange the elements into sections. A common layout puts the title and description at the top, the filters and sorting above or beside the products, and the product grid below. Style each element in the settings panel.

When you are happy, click Save, then Publish. See Saving, previewing and publishing a page.

The Categories List template

The Categories List page is different. It lists your categories, not the products inside one. Shoppers use it to pick a category first.

1. On the Templates page, click the Categories List tab.
2. Open the template and drag in a Category Grid from the Ecommerce tab.
3. Click the grid, then choose your categories in the settings panel. Until you do, the grid reads No categories selected.

Related guides

• Adding a product grid
• Adding a category grid
• Designing your product page template
• Organising products with categories