How to display products on a page?
A Products content area can display all products available in your store or only products of a certain category. In order to distinguish categories you of course need to assign them to your products first. You can have an infinite number of product categories and if you wish you can create a separate Products content area for each. You can place them all on one page, create a separate page for each or combine them in a different way.
A Products content area can be added like any other content area – simply click on a plus sign that appears on the page and select Products in the popup that opens.
How to create multiple categories?
However, if you have a larger store with more products which you’d like to split into categories, it’s better to use separate Products content areas for each category and place them on one or more pages, so that each category stands out.
If you’re using multiple content areas, you can select a category or categories for each content area. This guide shows how to set categories in Products content areas.
Here are examples of how to create a store structure:
- Add subpages to your main store page. You can, for example, have the main page display all products and each subpage display a particular category. This way the submenu effectively works as a filter for product categories. This solution is used here in this Reykjavik demo store where you can select “Sailboats” or “Accessories” in the menu bar on the left.
- You can also visually separate product categories on one single page. For example, you can place Text content areas with headings between Products content areas as you can see in this Boulder demo store. As this demo store sells food items, it appropriately looks like a menu.
- You can combine those two, so that the main page of your store displays products in a grid while the category subpages show products as a list with descriptions next to images. This solution is used here in this Nuuk demo store.
- While in the previous examples the store is just one menu page, you can actually turn your whole website into a store with products displayed on the front page. This way product categories could be accessed through the main menu and, if you like, you can add a contacts or blog page up there as well. This setup is used in our Sapporo demo store in which the front page displays all products – product categories can be found in the main menu at the top.
Product list appearance
As you can see from the examples above, you can use a variety of ways to display your products. With a larger number of products you can place them in a Grid and then adjust the number of columns – this can be set separately for desktop and mobile view.
If you have a smaller number of products and you wish to go for a more dispersed placement, you can arrange them in a List. This way the product description is displayed next to the image and your customer can get more product information without having to open the product page.
