| Table of Contents |
|---|
Introduction and biggest challenges
Product tile is an element that presents information about a product on the category page, on Content Construction components like products carousels, products grid, and also on the wishlist.
The biggest challenge connected with designing product tile a variety of products. There can be simple products, configurable and bundle products in the same shop, or virtual and downloadable products.
Product names can differ in length, also some products can have reviews as others don't. The product can be in stock or out of stock, can have 0, or put to 3 badges.
the final diversity of products and elements displayed on a tile depends on the specificity of give merchant.
Aspect ratio
| Note |
|---|
The important this g to remember is that tiles should keep aspect ration across all components and places where product tile is introduced. There are is mobile and tablet/desktop aspect ratio introduced. aspect ration in a child project can differ from MageSuite values. |
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 CSS grid feature, mainly on grid areas. To learn more about CSS grid visit: https://css-tricks.com/snippets/css/complete-guide-grid/, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout, https://www.cssgridplayground.com/.
Examples of MageSuite tile with reorganised 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 be either functional or only visual. Visual swatches do not change tile configuration, it is just and info about product options, f.e. sizes. Click on functional swatch updates give tile attribute configuration while click on visual swatch redirect a user to product’s PDP. If a product is a simple product, or another type of product without swatches, it is necessary to keep space taken by swatches in configurable products. it means that there will be a gap. However it isrewuired that all names and other elements are positioned on the same horizontal line. | |
6.Name | It is necessary to define the number of name lines. If the name exceeded designed space it ends with 3 dots. All product’s name across tiles should keep the same height, even if name is shorter. |
|
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 | On mobile add to cart is always visible by default, on desktop by default add to cart in visible on hover. Check subchapter on hover scanros below to learn about more options. | |
13.Description |  | |
14.Daily deal |  |
| Info |
|---|
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
| Info |
|---|
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:
| Info |
|---|
Dev hint:
$product-tile_addtocart-show-only-on-hover: false; $product-tile_addtocart-reduced: false; $product-tile_main-after-height: 6rem; |
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).
| Info |
|---|
Hover effects inspiration
| View file | ||
|---|---|---|
|
| View file | ||
|---|---|---|
|
Additional documentation:
Read more about possible badges:
Discount: https://creativestyle.atlassian.net/wiki/spaces/MGSDEV/pages/2298937345/Discount#Frontend-screens
Positive indicators: 3.4.Positive Indicators
Brands: 2.7. Brands
