Products grid

TABLE OF CONTENTS

Summary

This component will display product grid from a specific category or bu SKUs

Demo

 

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

URL

Mobile

Desktop

haar-shop.ch Switzerland • The Beauty Online Shop

in Haar-shop teasers are hidden on mobile view, there are just tiles displayed.

 

Lensplaza Nederland: Contactlenzen & brillen voor de beste prijs

 

 

Gastronomiebedarf & Einwegverpackungen | pack2go

 

 

 

https://www.rothacker.de/

 

 

Titolo - Sneaker and streetwear retailer, based in Switzerland