Product list content area

Display your products on the site using the Products content area. Any changes to the products or newly added products are shown automatically.

What is it and how does it work?

To display products in your store, add a Products content area to a page.

"Products" content area in content area menu
The content area displays all active products in your store.

Product list content area added to a page

Clicking on any one of the products opens the respective product page, complete with a product image, description and a buy button.

But first…

Create products and assign categories

To create products, open Store > Settings and click on Add new. You can assign a name, price, quantity, and variants to a product. However, if your products are divided into more than one category, it’s important to assign a category to each product. Enter the name of a category in the Category field, for example, “Furniture”, and hit Enter.


Adding categories to a product in your store


You can assign multiple categories to a product. This way one product can appear in several categories in your store – for example, in addition to “Furniture”, a product may also be categorised as “New” or “Discount”. This enables you to create pages for newly arrived or discounted products and use correspondingly filtered Products content areas on these pages.

Display the products in your store

Once the products and their categories are ready, you can add a Products content area to any page that should display a product list – whether you have one page for all products or several pages for various product categories. By default, the content area displays all products. To display only one (or a select few) particular category, open its settings.

Open product list settings

In the settings dialog, pick one or more categories in the Categories field.

Select categories in product list settings

Create a structure

If you have a simple store with all products on one page, you can simply add a Products content area on the page and you’re ready to go. However, if you have more than one product category, you can create separate product lists for each category. It’s up to you whether you prefer to create separate pages for each product category or display all categories on one page. Here are two examples:

  • Reykjavik demo shop – the “Shop” page has one Products content area that displays all products, but “Shop” also has subpages that display products of each respective category. For a visitor, the subpage menu on the left looks and functions like a filtering option for product categories.
  • Boulder demo shop – products are all displayed on one page; Products content areas of different categories are separated by category titles.

Adjust your product lists

In product list settings you can adjust the appearance and layout of your product list. In the Content tab you can apply a category filter and determine how products are sorted.

Sort products in product list settings

In the Design tab you can choose between a grid and a list layout. In a grid the products are displayed in multiple columns whereas in a list they’re presented in one column with descriptions next to images. Columns determines the number of columns in grid view – this option is unavailable for the list view – and Number of products determines the maximum number of products shown in the content area. In addition you can choose whether to display prices and buy buttons in the listing.

Design options in product list settings

Translate products and update descriptions

If you provide your store in multiple languages, products and their descriptions can be conveniently translated. One way to do it is in the product settings view, where you can translate the product’s name, description, categories, and variants. This guide gives a detailed overview.

 
You can also translate products and their descriptions on the product page. Open a product page by clicking an item in the Products content area while in edit mode and update the name or description.


To make the products visible in another language, you also need to translate your store pages to the the provided language. You may either copy them from one language to the other or add new pages manually if your store should have a different structure in the new language. In the latter case, don’t forget to add the Products content areas.