Product Tile

Component preview#

Mobile (XS)Mobile landscape (SM)Tablet (MD)Desktop (LG)
preview-xspreview-smpreview-xspreview-lg

1 Text ribbon Text ribbons are used to draw attention to special features of the product. It is strongly recommended to only use one text-ribbon above the product tile. A hierarchy in the application must be observed:

Ribbon hierarchy (e-commerce)#
  • top customer rating (e-commerce)
  • customer benefit communication e.g. 3 + 1 free
    • free delivery etc.
  • from TV advertising

2 Product image - Ensure that product images only show one plain product without any background. Compositions with any other kind of Informations like seals, available color variants, other badges or advertising elements are not allowed on the product image.

3 Product title - Always provide one or more key product features in the product page headline, with the most important features directly following the product title. Avoid relying on vague, misleading, or overly technical product headlines.

4 Supplemental Description - Consistent layout of product attributes. Please note: In terms of using seals like "Stiftung Warentest" in the seal & award section, you have to implement the related test number inside the supplemental Description.

Examples of use#

Example 1 (ecommerce)Example 2 (ecommerce)Example 3 (retail)Example 4 (retail)
example_01-xsexample_02-xsexample_03-xsexample_04-xs
  • top-rated ribbon above the product image that does not cover parts of the product image itself
  • up to three lines of product description
  • very long product descriptions will be cut off
  • additional information such as validity is embedded in supplemental description
  • Adapted Lidl Plus price box and Lidl plus ribbon below the product image

Recommendations of Use – Do's and Don'ts#

Product title & description#

dosdon'ts
Imageexample_01-xsexample_01-xs
Description
  • The product title describes the scope of all party that are included in the price. Important product attributes and the validity of the offer are mentioned in the supplemental description.
  • The product title and description need to contain enough information in order to make it scannable and need to describe all parts that are included in the price.

Variant products #

dosdon'ts
Image (optional)example_01-xsexample_01-xs
Description
  • The product image is displaying the single variant. The product title need to be variant-specific and in the supplemental description it need to be mentioned that the product is available in several variants.
  • When displaying variant products it is not allowed to manually add color bubbles to the product image. Displaying the product in its different variants on the same product image is misleading and can cause confusion.

Accessability, WCAG#

All elements of the product tile have to fulfill the guidelines of the WCAG

Source references#

  • RES202104PPRO_Product title / supplemental description / long description / product description
  • RES202106PPRO_Redesign Product Tile Concept