toujou
+64 273 868 404
  1. Home
  2. Service
  3. Element library
  4. Product grid

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 pages  Create product categories

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

The Product grid is similar to the element four image cards. Thus, four products, or four linked image buttons, are displayed side by side in the front end: One image each with an automatic aspect ratio of 16:9 – squad aspect ratio is also selectable – and a label. The associated link turns the entire element into a button.

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.