--- title: Product-Grid url: "https://www.toujou.de/service/elementbibliothek/widgets/product-grid/" date: 2019-01-11 modified: 2022-09-27 --- # Product-Grid 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Widgets](https://www.toujou.de/service/elementbibliothek/widgets/) 5. [Product-Grid](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/) Product Grid ============ Zeigen Sie einige Ihrer Produkte in einem Grid an. Item-ID: 07-002 [Beispielansicht](#c1003768) [Anleitung](#c1003763) [Verhalten](#c1003761) --- Beispielansicht ----------------- ### 16:9 Verhältnis [![Das Bild zeigt verschieden große beigefarbene Pakete auf einem ockerfarbigen Grund.](https://www.toujou.de/_assets/processed/EEayuDYIcCJ_oO-ChFjCEKb_zSZh-RtsDWuEddiyk9o/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfYm94ZXNfNDFmNDM0MmViNQ:t/cb:df27c08ccddad7ae7227813e795b272cd8ec2bcd/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzLnBuZw)### Produkt 1 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-1/) [![Das Bild zeigt eine abstrahierte, beige Struktur, die aus mehreren geometrischen Elementen besteht und modern wirkt.](https://www.toujou.de/_assets/processed/jhheRcxMhxNzsq5v31dkGoqAOF3NG0jgc2IGpan8qr4/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfYm94ZXNfYmx1ZV84M2I1MzRmNjRi:t/cb:204dcd40abe2820d8c54887fc98fefd5a1214301/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX2JsdWUucG5n)### Produkt 2 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-2/) [![Das Bild zeigt mehrere beigefarbene Pakete vor grünem Hintergrund.](https://www.toujou.de/_assets/processed/SfxkOUZIaWC0JrSzV7gvlv2lMxgT8HN2a8Vw8-Ut3gM/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfYm94ZXNfZ3JlZW5fZGNjNjlkMmNhOA:t/cb:fc30d14fd58f37d94f3d9b2eaeef5e4d208c03b0/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX2dyZWVuLnBuZw)### Produkt 3 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-3/) [![Das Bild zeigt verschieden große beigefarbene Pakete auf einem einfarbigen lila Grund.](https://www.toujou.de/_assets/processed/9e_us-8beeROrHKk9osbTOVlF8oyx4cLEWQY4DeeXE4/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfYm94ZXNfcHVycGxlXzYxN2E1NzlkY2U:t/cb:a71fd62157bd1139792657b2aacb9dedac766bea/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX3B1cnBsZS5wbmc)### Produkt 4 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-4/) [![Das Bild zeigt eine abstrahierte, beige Struktur, die aus mehreren geometrischen Elementen besteht und modern wirkt.](https://www.toujou.de/_assets/processed/jhheRcxMhxNzsq5v31dkGoqAOF3NG0jgc2IGpan8qr4/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfYm94ZXNfYmx1ZV84M2I1MzRmNjRi:t/cb:204dcd40abe2820d8c54887fc98fefd5a1214301/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX2JsdWUucG5n)### Produkt 5 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-5/) [![Das Bild zeigt mehrere beigefarbene Pakete vor grünem Hintergrund.](https://www.toujou.de/_assets/processed/SfxkOUZIaWC0JrSzV7gvlv2lMxgT8HN2a8Vw8-Ut3gM/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfYm94ZXNfZ3JlZW5fZGNjNjlkMmNhOA:t/cb:fc30d14fd58f37d94f3d9b2eaeef5e4d208c03b0/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX2dyZWVuLnBuZw)### Produkt 6 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-6/) [![Das Bild zeigt verschieden große beigefarbene Pakete auf einem einfarbigen lila Grund.](https://www.toujou.de/_assets/processed/9e_us-8beeROrHKk9osbTOVlF8oyx4cLEWQY4DeeXE4/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfYm94ZXNfcHVycGxlXzYxN2E1NzlkY2U:t/cb:a71fd62157bd1139792657b2aacb9dedac766bea/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX3B1cnBsZS5wbmc)### Produkt 7 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-7/) [![Das Bild zeigt verschieden große beigefarbene Pakete auf einem ockerfarbigen Grund.](https://www.toujou.de/_assets/processed/EEayuDYIcCJ_oO-ChFjCEKb_zSZh-RtsDWuEddiyk9o/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfYm94ZXNfNDFmNDM0MmViNQ:t/cb:df27c08ccddad7ae7227813e795b272cd8ec2bcd/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzLnBuZw)### Produkt 8 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-8/) --- ### Quadratisches Seitenverhältnis [![Das Bild zeigt verschieden große beigefarbene Pakete auf einem ockerfarbigen Grund.](https://www.toujou.de/_assets/processed/jJj_MwlBDTy_mkhqiQPszcAcB-irWA4ZnTV-3-i5yZ4/q:85/c:387:387:fp:0.5:0.5/rt:force/w:328/h:328/fn:Y3NtXzY4OHgzODdfYm94ZXNfMmY4NjU2YWQzYw:t/cb:df27c08ccddad7ae7227813e795b272cd8ec2bcd/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzLnBuZw)### Produkt 1 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-1/) [![Das Bild zeigt eine abstrahierte, beige Struktur, die aus mehreren geometrischen Elementen besteht und modern wirkt.](https://www.toujou.de/_assets/processed/G0mIacq2diB1UGYmpx2C8rah441GPm9WSlul3aDbKW8/q:85/c:387:387:fp:0.5:0.5/rt:force/w:328/h:328/fn:Y3NtXzY4OHgzODdfYm94ZXNfYmx1ZV8wZGJhNWEzNTQ4:t/cb:204dcd40abe2820d8c54887fc98fefd5a1214301/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX2JsdWUucG5n)### Produkt 2 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-2/) [![Das Bild zeigt mehrere beigefarbene Pakete vor grünem Hintergrund.](https://www.toujou.de/_assets/processed/xVQxztxYChtY6JH5qx_5OZw_nozdJvd191wlCQUsc88/q:85/c:387:387:fp:0.5:0.5/rt:force/w:328/h:328/fn:Y3NtXzY4OHgzODdfYm94ZXNfZ3JlZW5fNTVlMmExNTY3NQ:t/cb:fc30d14fd58f37d94f3d9b2eaeef5e4d208c03b0/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX2dyZWVuLnBuZw)### Produkt 3 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-3/) [![Das Bild zeigt verschieden große beigefarbene Pakete auf einem einfarbigen lila Grund.](https://www.toujou.de/_assets/processed/b4jdXILaOk5xC_eTJnXBcg84aJDZkpan1fzHHCvLcSQ/q:85/c:387:387:fp:0.5:0.5/rt:force/w:328/h:328/fn:Y3NtXzY4OHgzODdfYm94ZXNfcHVycGxlXzRlZTY0MTUyODc:t/cb:a71fd62157bd1139792657b2aacb9dedac766bea/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX3B1cnBsZS5wbmc)### Produkt 4 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-4/) [![Das Bild zeigt eine abstrahierte, beige Struktur, die aus mehreren geometrischen Elementen besteht und modern wirkt.](https://www.toujou.de/_assets/processed/G0mIacq2diB1UGYmpx2C8rah441GPm9WSlul3aDbKW8/q:85/c:387:387:fp:0.5:0.5/rt:force/w:328/h:328/fn:Y3NtXzY4OHgzODdfYm94ZXNfYmx1ZV8wZGJhNWEzNTQ4:t/cb:204dcd40abe2820d8c54887fc98fefd5a1214301/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX2JsdWUucG5n)### Produkt 5 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-5/) [![Das Bild zeigt mehrere beigefarbene Pakete vor grünem Hintergrund.](https://www.toujou.de/_assets/processed/xVQxztxYChtY6JH5qx_5OZw_nozdJvd191wlCQUsc88/q:85/c:387:387:fp:0.5:0.5/rt:force/w:328/h:328/fn:Y3NtXzY4OHgzODdfYm94ZXNfZ3JlZW5fNTVlMmExNTY3NQ:t/cb:fc30d14fd58f37d94f3d9b2eaeef5e4d208c03b0/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX2dyZWVuLnBuZw)### Produkt 6 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-6/) [![Das Bild zeigt verschieden große beigefarbene Pakete auf einem einfarbigen lila Grund.](https://www.toujou.de/_assets/processed/b4jdXILaOk5xC_eTJnXBcg84aJDZkpan1fzHHCvLcSQ/q:85/c:387:387:fp:0.5:0.5/rt:force/w:328/h:328/fn:Y3NtXzY4OHgzODdfYm94ZXNfcHVycGxlXzRlZTY0MTUyODc:t/cb:a71fd62157bd1139792657b2aacb9dedac766bea/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzX3B1cnBsZS5wbmc)### Produkt 7 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-7/) [![Das Bild zeigt verschieden große beigefarbene Pakete auf einem ockerfarbigen Grund.](https://www.toujou.de/_assets/processed/jJj_MwlBDTy_mkhqiQPszcAcB-irWA4ZnTV-3-i5yZ4/q:85/c:387:387:fp:0.5:0.5/rt:force/w:328/h:328/fn:Y3NtXzY4OHgzODdfYm94ZXNfMmY4NjU2YWQzYw:t/cb:df27c08ccddad7ae7227813e795b272cd8ec2bcd/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzLnBuZw)### Produkt 8 ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-8/) --- Anleitung ----------- ### Wichtige Vorab-Informationen: Bevor Sie ein *Product Grid* anlegen können, benötigen Sie die einzelnen Produkt-Unterseiten, aus denen das Widget *Product Grid* seine Auswahl und Darstellung im Frontend speisen kann. Wie man Produktseiten anlegt, haben wir in diesen Tutorials für Sie aufbereitet: [Produktseiten anlegen](https://www.toujou.de/tutorials/seiten-anlegen/produktseiten/) [Produktkategorien anlegen](https://www.toujou.de/tutorials/seiten-anlegen/produktseiten/produkt-kategorien/) --- [ ![](https://www.toujou.de/_assets/processed/LvdUO7HUHQsc1bHEXN4QLjKqRIv8W46Hos0Nxr5UQQc/q:85/c:1094:615.37499999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1Byb2R1Y3RfR3JpZF9hbmxlZ2VuXzIwOWRkNzhlZTM:t/cb:c69c1886f1d29ebb0b27c53a17a3877c202c92fe/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDNfUHJvZHVjdC1ncmlkL0RFL1Byb2R1Y3RfR3JpZF9hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/03_Product-grid/DE/Product_Grid_anlegen.png) ### Product Grid anlegen - Klicken Sie auf den Button **Inhalt,** um eine automatisierte Produktübersicht anzulegen. - Im Reiter *Widgets* wählen Sie **Productgrid.** [ ![](https://www.toujou.de/_assets/processed/wPaNZwDBgTPr2FNS5O7vdskdmoEZwUyHSO2jJTaHVaE/q:85/c:1094:615.37499999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1Byb2R1a3RhdXN3YWhsX0lfNWQ4NGMyYjZmNQ:t/cb:bfec36e6e34095b53eb3fab7ba8f6120e33cfbc6/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDNfUHJvZHVjdC1ncmlkL0RFL1Byb2R1a3RhdXN3YWhsX0kucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/03_Product-grid/DE/Produktauswahl_I.png) ### Produktauswahl I - Im Dropdown-Menü *Product Selection* wählen Sie aus einer der drei Optionen **manual**, **subpages of selected pages** oder **by category**. - **By category**: Hier wählen Sie ggf. die im Vorfeld vergebenen und zutreffenden [Produkt-Kategorien](https://www.toujou.de/tutorials/seiten-anlegen/produktseiten/produkt-kategorien/), die der Zuordnung und Filterung automatisierter Produkt-Elemente dient. [ ![](https://www.toujou.de/_assets/processed/hQeUpiheLK76RkE5sNey0dNtJyyFObpGVJfr26eEtv8/q:85/c:1094:614.13522012579:fp:0.5:0.44182389937107/rt:force/w:432/h:243/fn:Y3NtX1Byb2R1a3RhdXN3YWhsX0lJX2U2ZmIyYWZlYjQ:t/cb:97d9fc80a82acee1a261df8b09e4a93bf513dda1/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDNfUHJvZHVjdC1ncmlkL0RFL1Byb2R1a3RhdXN3YWhsX0lJLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/03_Product-grid/DE/Produktauswahl_II.png) ### Produktauswahl II - Nach dem Klick auf **Seite** öffnet sich das Fenster der Datensatzauswahl. - **Manual**: Wählen Sie einzelne Produktseiten mit einzelnen Klicks auf die gewünschte Seite aus. In unserem Beispiel steht eine Auswahl von »Produkt 1« bis »Produkt 8« zur Verfügung. - **Subpages of selected pages**: Diese Option wählen Sie, wenn Sie Ihre Produkte unterhalb einer Landing Page oder z.B. eines Ordners (siehe Screenshot: Ordner *Produkte*) sortiert haben. Klicken Sie einzig auf diese übergeordnete Seite und die darunter befindlichen Produktseiten ordnen sich automatisch ein. [ ![](https://www.toujou.de/_assets/processed/J0-03urzhycXvlztHQH4wuNZzojYNpvQhhxW8Dii2xo/q:85/c:1094:615.37499999999:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1Byb2R1Y3RfR3JpZF9Gb3JtYXRfODhiNjgwYjQzNg:t/cb:2c40f08ea256fc519a6c76e6bd72878d0caeb0bf/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDNfUHJvZHVjdC1ncmlkL0RFL1Byb2R1Y3RfR3JpZF9Gb3JtYXQucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/03_Product-grid/DE/Product_Grid_Format.png) ### Format auswählen - Klicken Sie auf den Reiter **Settings**. - Unter *Card settings* wählen Sie das Format im **Dropdown-Menü**. Zur Auswahl stehen das Seitenverhätlnis 16:9 sowie das quadratische Format. --- Verhalten ----------- **Das *Product Grid* verhält sich analog zu [Image Cards](https://www.toujou.de/service/elementbibliothek/card-elements/#c1002578), wenn bis zu vier Produkte und damit bis zu vier Schaltflächen nebeneinander im Frontend ausgespielt werden: jeweils einem Bild mit einem voreingestellten Seitenverhältnis von 16:9 – ein quadratisches Seitenverhältnis ist einstellbar – und einer Beschriftung. Der dazugehörige Link macht das gesamte Element jeweils zu einer Schaltfläche.** **Besonderheit**: Wenn Sie mehr als vier Produktseiten darstellen/verlinken, reihen sich alle weiteren Produkte in neuen Viererreihen ein. Bei einer Darstellung von zum Beispiel sieben Produkten, werden eine Viererreihe und darunter eine Dreierreihe ausgespielt. **Responsive:** Auf kleiner werdenden Endgeräten werden die Viererreihen in zwei Zeilen dargestellt. Auf kleinen Darstellungsflächen werden alle Schaltflächen untereinander angezeigt. Verknüpfte Themen ----------------- [Tutorials](https://www.toujou.de/tutorials/), die mit diesem Element in Verbindung stehen. [Produktseiten](https://www.toujou.de/tutorials/seiten-anlegen/produktseiten/) ---