Product tile - grid
- Marta Siewierska-Stańczak
- Alicja Woźniak
TABLE OF CONTENTS
Demo
Introduction and biggest challenges
The product tile is an essential element used to display product information across various sections, including the category page, Content Constructor components like product carousels and grids, as well as the wishlist.
Designing product tiles poses a significant challenge due to the diverse range of products that can be showcased. A shop may feature simple products, configurable products, bundle products, virtual products, or downloadable products.
Product names can vary in length, and some products may have reviews while others do not. Additionally, the product's availability status (in stock or out of stock) and the presence of badges (ranging from 0 to 3) further contribute to the variations in tile elements.
Ultimately, the specific merchant's requirements heavily influence the diversity of products and elements displayed on each tile.
Aspect ratio
It is crucial to maintain consistent aspect ratios for product tiles across all components and instances where they are utilized.
There are 2 aspect ratio sets that apply to mobile and tablet/desktop layouts. In child projects, the aspect ratio may differ from the predefined values within MageSuite. Therefore, it is necessary to consider and choose the aspect ratio accordingly to ensure consistency and proper visual presentation of the product tiles within each specific project.
List of available general styling options:
border/no border in the default state and on hover
border-radius
background
the general alignment of elements: left, center, right
Product tile elements (besides the image) can be moved around and organized in different directions and sequences. On the frontend side, the content is based on the CSS grid feature, mainly on grid areas. To learn more about CSS grid visit: CSS Grid Layout Guide | CSS-Tricks, CSS grid layout - CSS: Cascading Style Sheets | MDN, https://www.cssgridplayground.com/.
Examples of MageSuite tiles with reorganized element
Elements
In the below table, all elements of the product tile are described.
Element | Comments | Styling possibilities |
|---|---|---|
|
|
|
2. Badges | Kinds of badges in MageSuite:
|
|
3. Add to wishlist | Add to wishlist icon can have hover and selected states |
|
4. Add to compare | Add to compare list icon |
|
5. Swatches for configurable products | Swatches can serve either a functional or purely visual purpose. Functional swatches are designed to modify the tile configuration when clicked, providing an interactive experience. On the other hand, visual swatches do not affect the tile configuration but instead provide information about product options, such as sizes. Clicking on a functional swatch updates the tile's attribute configuration, while clicking on a visual swatch redirects the user to the product's Product Detail Page (PDP). In cases where a product is a simple product or does not require swatches, it is important to maintain the space allocated for swatches in configurable products. This may result in an empty gap where the swatches would typically appear. However, it is crucial to ensure that all names and other elements remain positioned on the same horizontal line, maintaining consistent alignment throughout the tile design. |
|
6.Name | To maintain a consistent and visually pleasing layout, it is essential to determine the number of lines allocated for displaying the product name. If the product name exceeds the designated area, it will be truncated and displayed with an ellipsis (three dots) to indicate that it has been shortened. Furthermore, it is important to ensure that all product names across the tiles maintain the same height, regardless of the length of the name. This uniformity in height helps create a harmonious visual presentation, even if some product names are relatively shorter than others. |
|
7.Price | Simple discounted product: 
Configurable product: Please note that special price is shown for configurable product only when product is fully configured (swatches are selected). See screens below:  
|
|
8.Reviews | Star rating should be consistent across the whole shop - with PDP summary and review form. |
|
9.Stock |
|
|
10. Product gallery | When thumbnail is hovered tile imege is replaced with a nice animation 
|
|
11.Brand |
| |
12. Add to cart | By default, the "Add to Cart" button is always visible on mobile devices. However, on desktop devices, the default behavior is to display the "Add to Cart" button only on hover. To explore additional options regarding the "Add to Cart" button and its hover scenarios, please refer to the relevant subchapter. |
|
13.Description | 
|
|
14.Daily deal | 
|
|
14. Quantity increment | 
|
|
Required elements: image, name, price, add to cart button
Magesuite scenarios for hover effects
There are some built-in hover scenarios for magesuite.
Default scenario
The default scenario is to show Add to cart button only on hover. There is also a light border to indicate hover
Dev hint:
$product-tile_addtocart-show-only-on-hover: true !default; $product-tile_addtocart-reduced: true !default; $product-tile_initial-border: 1px solid transparent !default; $product-tile_hover-border: 1px solid rgba($color_border-500, 0.5) !default;
Sliding bottom addon hover effect
With some scss variable changes, we can achieve the following effect:
Dev hint:
<move element="product.tile.addtocart" destination="product.tile.container.main.after" />
$product-tile_addtocart-show-only-on-hover: false; $product-tile_addtocart-reduced: false; $product-tile_main-after-height: 6rem;
The secondary image visible on hover
Many projects request to add a hover effect on a tile that shows another product image (f.e. the back of the product).
Hover effects inspiration
Additional documentation:
Read more about tile:
Developer documentation: ProductTile
Discount: Discount | Frontend screens
Positive indicators: 3.4.Positive Indicators
Brands: 2.7. Brands
Daily deal: 3.1. Daily Deal
Live projects customization examples
URL | Screen mobile | Comment |
|---|---|---|
|
| |
|
| |
|
| |
|
| |
|
| |
https://www.krueger-dirndl.de/de/damen/oberteile/trachtenmieder | 
|
|
|
|