---
title: Product grid
url: "https://www.toujou.com/service/element-library/widgets/product-grid/"
date: 2019-08-01
modified: 2022-09-27
---

# Product grid

1. [Home](https://www.toujou.de/)
2. [Service](https://www.toujou.de/service/)
3. [Element library](https://www.toujou.de/service/element-library/)
4. [Widgets](https://www.toujou.de/service/element-library/widgets/)
5. [Product grid](https://www.toujou.de/service/element-library/widgets/product-grid/)

   Product grid
============

Display some of your products in a grid.

Item-ID: 07-002

[Sample view](#c1006502) [Step by step guide](#c1006507) [Screen adaptation](#c1006510)

---

  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](https://www.toujou.de/service/tutorials/pages-navigation/product-pages/) [Create product categories](https://www.toujou.de/service/tutorials/pages-navigation/product-pages/product-categories/)

     [ ![](https://www.toujou.de/_assets/processed/vrsmJKefYqcH4SUbjGJYQuw81OGs8MTNEJExgU2aRXA/q:85/c:1091.9419072616:614.21732283465:fp:0.5:0.44251968503937/rt:force/w:432/h:243/fn:Y3NtX1Byb2R1Y3RfR3JpZF9hbmxlZ2VuX2VuXzVhYWM3ZjBkMDY:t/cb:ee7c5a19736e689d563aca9d116168e9db507734/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDNfUHJvZHVjdC1ncmlkL0VOL1Byb2R1Y3RfR3JpZF9hbmxlZ2VuX2VuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/03_Product-grid/EN/Product_Grid_anlegen_en.png) ### Create product grid

- Click on the **+Content** button to create an automated product overview.
- Select **Product grid** in the *Widgets* tab.

    [ ![](https://www.toujou.de/_assets/processed/PLuFjK2oi4fKK0jNkci3prohCJ29a19lKMlZO7bgIAI/q:85/c:1091.9419072616:614.21732283465:fp:0.5:0.44251968503937/rt:force/w:432/h:243/fn:Y3NtX1Byb2R1a3RhdXN3YWhsX0lfZW5fMWM4OGQ0ODY1MA:t/cb:77f3ab187acf913c30a9f3331d1a49d5adb098db/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDNfUHJvZHVjdC1ncmlkL0VOL1Byb2R1a3RhdXN3YWhsX0lfZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/03_Product-grid/EN/Produktauswahl_I_en.png) ### 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 ](https://www.toujou.de/service/tutorials/pages-navigation/product-pages/product-categories/)that are used to assign and filter automated product elements.

    [ ![](https://www.toujou.de/_assets/processed/KBQmYGRFEydNdVWCnbUvT30qQThlyumSwMNsNEOAzzk/q:85/c:1091.9419072616:614.21732283465:fp:0.5:0.44251968503937/rt:force/w:432/h:243/fn:Y3NtX1Byb2R1a3RhdXN3YWhsX0lJX2VuXzBjMTk3NGM3YTE:t/cb:bc56b00376e524e061219918599a9b9de3f01049/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDNfUHJvZHVjdC1ncmlkL0VOL1Byb2R1a3RhdXN3YWhsX0lJX2VuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/03_Product-grid/EN/Produktauswahl_II_en.png) ### 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.

    [ ![](https://www.toujou.de/_assets/processed/02_vttdsmz2wrnwtP-NdLu2dmvnZJf1FXaFqIsuvyeU/q:85/c:1092.906:614.21732283465:fp:0.4995:0.55590551181102/rt:force/w:432/h:243/fn:Y3NtX1Byb2R1Y3RfR3JpZF9Gb21hdF9lbl8xYmJkMzZkMGM0:t/cb:11e302bc4046fca2b89fdd7110d0e7bdb4d8bbae/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDNfUHJvZHVjdC1ncmlkL0VOL1Byb2R1Y3RfR3JpZF9Gb21hdF9lbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/03_Product-grid/EN/Product_Grid_Fomat_en.png) ### 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](https://www.toujou.de/service/element-library/card-elements/image-card-description/). 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.