| Table of Contents |
|---|
Introduction and biggest challenges
Product The product tile is an element that presents information about a product on essential element used to display product information across various sections, including the category page, on Content Construction Constructor components like products product carousels , products grid, and also on and grids, as well as the wishlist.
The biggest challenge connected with designing product tile a variety of products. There can be 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 and products, bundle products in the same shopproducts, virtual products, or virtual and downloadable products.
Product names can differ vary in length, also and some products can may have reviews as others don't. The product can be while others do not. Additionally, the product's availability status (in stock or out of stock, can have 0, or put to 3 badges.the final ) 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 a tile depends on the specificity of give merchanteach tile.
Aspect ratio
| Note |
|---|
The important this g to remember is that tiles should keep aspect ration It is crucial to maintain consistent aspect ratios for product tiles across all components and places where product tile is introduced. There are is 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
introduced. aspect ration in a child project can differ from MageSuite valuesmay 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 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
tiletiles with
reorganisedreorganized 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 serve either a functional or only purely visual . 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 change affect the tile configuration , it is just and info but instead provide information about product options, f.e. such as sizes. Click Clicking on a functional swatch updates give the tile's attribute configuration, while click clicking on a visual swatch redirect a redirects the user to product’s PDP.If the product's Product Detail Page (PDP). In cases where a product is a simple product , or another type of product without or does not require swatches, it is necessary important to keep space taken by maintain the space allocated for swatches in configurable products. it means that there will be a gap. However it isrewuired 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 are remain positioned on the same horizontal line, maintaining consistent alignment throughout the tile design. | |
6.Name | It is necessary to define To maintain a consistent and visually pleasing layout, it is essential to determine the number of lines allocated for displaying the product 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 shorterproduct name exceeds the designated area, it swill 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 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 By default, the "Add to Cart" button is always visible by defaulton mobile devices. However, on desktop by default add to cart in visible on hover. Check subchapter on hover scanros below to learn about more optionsdevices, 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 |  |
| 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
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
Daily deal: 3.1. Daily Deal
