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	Comments	Styling possibilities
Image	Keep the same image aspect ratio across all resolutions Some merchants can have 2 kind of images: packshot and image with full background Image is an element that shrinks in height (while keeping aspect ratio) when tile is getting smaller
2. Badges	Kinds of badges in MageSuite: discount in the following forms: `-20%` `20%` `text f.e. promo` , for configurable products there is always `up to` text new free shipping popular	direction (horizontal/ vertical) position (top/bottom/left/right) background color
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.	font-size font-weight color color hovered color visited text decoration hovered max. lines alignment
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:	color of normal/speical/old price font-sizes of each price font-weight of each price text decoration of old price direction (horizontal/vertical) alignment old price on first or last place
8.Reviews	star rating should be consistent across the whole shop - with PDP summary and review form
9.Stock		color icon font-size
10. Product gallery	When thumbnail is hovered tile imege is replaced with a nice animation Nagranie z ekranu 2023-06-28 o 20.21.50.mov
11.Brand	BrandManagement
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

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:

<move element="product.tile.addtocart" destination="product.tile.container.main.after" />

With some scss variable changes we can achieve the following effect:

$product-tile_addtocart-show-only-on-hover: false;
$product-tile_addtocart-reduced: false;
$product-tile_main-after-height: 6rem;

Additional documentation: