Product grid
Display some of your products in a grid.
Item-ID: 07-002
Sample view Step by step guide Screen adaptation
Sample view
16:9 aspect ratio
Square aspect ratio
Step by step guide
Before you get started
Before you can create a Product Grid, you need the individual product subpages from which the Product Grid widget can feed its selection and its display in the front end. Learn how to create product pages in these tutorials:
Create product grid
- Click on the +Content button to create an automated product overview.
- Select Product grid in the Widgets tab.
Product selection I
- From the Product Selection drop-down menu, choose manual, subpages of selected pages or by category.
- By category: Select the pre-assigned and applicable product categories that are used to assign and filter automated product elements.
Product selection II
- After clicking on Page the Record Selection window opens.
- Manual: Select individual product pages with single clicks on the desired page. In our example, a selection from »Product 1« to »Product 8« is available.
- Subpages of selected pages: Select this option if you want to place your products below a landing page or e.g. a folder (see screenshot: Product Overview folder). Click on this parent page only and the product pages below will automatically be displayed.
Select the format
- Switch to the settings tab.
- Select the format in the dropdown menu under Card settings. In toujou you have the choise between the 16:9 aspect reatio and a sqaure ratio.
Screen adaptation
Responsive behaviour: On smaller devices, the four product cards are displayed in two lines of two. On even smaller screens all products are displayed below each other.
Worth noting: If you link more than four product pages, all other products will be displayed in new rows of four. In a display of, for example, seven products, a four-row and below a trio are displayed.