Product tile - grid

Owned by Marta Siewierska-Stańczak
Last updated: Oct 16, 2023 by Alicja Woźniak
6 min read

TABLE OF CONTENTS

Demo

https://demo.magesuite.io/en/men.html

https://demo.magesuite.io/en/gear.html

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: 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 tiles with reorganized element

 

Elements

In the below table, all elements of the product tile are described.

 

Element

Comments

Styling possibilities

Element

Comments

Styling possibilities

  1. 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

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.

  • 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

 

 

11.Brand

BrandManagement

 

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

 

 

 

 

Sliding bottom addon hover effect

 

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

 

 

 

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

URL

Screen mobile

Comment

https://megaport.de/gaming-pc/

 

 

https://www.haar-shop.ch/en/

 

 

https://www.titoloshop.com/eu_en/women

 

 

 

https://www.pack2go.de/trinkbecher

 

 

https://ipet.ch/

 

 

https://www.krueger-dirndl.de/de/damen/oberteile/trachtenmieder

 

 

https://www.micro-scooter.com/ch_de/elektrisch

 

 

 

Â