| 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.
List of general styling options:
border/no border in the default state and on hover
border-radius
background
the general alignment of elements: left, center, right
Elements
In the below table, all elements of the product tile are described.
Element | Comment sComments | 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 | ||
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. |
Magesuite scenarios for hover effects
There are some built-in hover scenarios for magesuite.
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
There is a container name product.tile.container.main.after prepared in product_tile.xml. To introduce the sliding hover effect move some element inside it:
| Code Block |
|---|
<move element="product.tile.addtocart" destination="product.tile.container.main.after" /> |
With some scss variable changes we can achieve the following effect:
| Code Block |
|---|
$product-tile_addtocart-show-only-on-hover: false; $product-tile_addtocart-reduced: false; $product-tile_main-after-height: 6rem; |
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