TABLE OF CONTENTS
Summary
This component will display product grid from a specific category or bu SKUs
Demo
https://demo.magesuite.io/de/contentconstructor/components/index/page/products-grid-no-it/
https://demo.magesuite.io/de/contentconstructor/components/index/page/products-grid-it-left/
https://demo.magesuite.io/de/contentconstructor/components/index/page/products-grid-it-right/
https://demo.magesuite.io/de/contentconstructor/components/index/page/products-grid-it-center/
Magesuite standard
The product grid component displays a grid of tiles with optional image teasers.
Image teasers can be defined in 4 sizes. The standard size (1z=x1) is the same as the product tile
1 x1
1 x 2
2 x 1
2 x 2
Product grid can be configured to show the defined number of rows.
Examples:
Product grid with one row and teaser size 2x1
Product grid with 2 rows and teaser size 2x1
Mobile layout
Please note that the standard behavior for grid teaser on mobile is to always take the whole row width. The teaser can be also hidden on mobile devices
Styling and configuration of text on grid teaser
Text position and styling effects are the same for grid teasers ad for standard teasers. If needed the typography can differ a bit (f.e. smaller font sizes). Grid teasers can have a call to action button and can be linked.
Live shops customization examples
URL | Mobile | Desktop |
|---|---|---|
in Haar-shop teasers are hidden on mobile view, there are just tiles displayed. |  | |
 | ||
 |  | |
 | ||
 |  |