What is it and how does it work?
To display products in your store, add a Products content area to a page.
The content area displays all active products in your store.
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.
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.
In the settings dialog, pick one or more categories in the Categories field.
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.
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.
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.
