Ribbon ads (image overlays) for catalog entry thumbnails

A ribbon ad is an image overlay that is displayed over the thumbnail image of catalog entries and contains text that describes shared characteristics of the catalog entries to draw the attention of shoppers.

These overlay images are displayed in the form of a ribbon on the Product Details Page and the Product Listing Page. The following image shows examples of two default ribbon ads - Exclusive and Clearance.

Typically, ribbon ads display on the thumbnail images of catalog entries in these locations:

In catalog entry lists on category pages and search results pages
On the Product Compare page

To use a ribbon ad in your store, you must create an attribute in the attribute dictionary to represent the ribbon ad. When you create the attribute, you can specify the text to display on the ribbon ad and, optionally, the name of a style to use to format the ribbon ad. Then, you can assign the attribute to one or more catalog entries (products, SKUs, bundles, or kits).

For more details on creation of ribbon ads, refer to Adding a ribbon ad (image overlay) to catalog entry thumbnails.

Ribbon ad styles

To define the format of ribbon ads on the storefront, store developers must create styles in CSS files. In the previous example, the shape, color, font, and position of the Exclusive and Clearance ad ribbons are defined using two different CSS styles. Typically, one style is defined as the default style for ribbon ads for your store. In the attribute dictionary, when you create the attribute to represent the ribbon ad, you can either use the default style, or specify the name of the CSS style that you want to use. To obtain the names of the CSS styles that are available for your store, talk to a store developer.

Tip: If you have more than one CSS style for ribbon ads, then create a single attribute for each additional style. You can specify multiple values for each attribute. For example, if you have an additional ribbon ad style to flag products that are available either online or in-store, you can create an attribute with two values:
Multiple ribbon ad values

Requirements and limitations for ribbon ads

To display ribbon ads, your store must use HCL Commerce Search.
In an extended site:
- Ribbon ads that are assigned to a catalog entry owned by the asset store are displayed in all extended site stores that share the catalog entry. You cannot override the ribbon ad attribute for a specific extended site store.
- If a catalog entry is owned by the asset store, you cannot assign a ribbon ad to that catalog entry in the extended site store.
Store pages must retrieve information for all of the attributes for all catalog entries that display on a page to determine whether any ribbon ads exist for the catalog entries. This attribute information retrieval can affect performance. If your store does not need ribbon ads on catalog entries in grid views of catalog entries, you can have a site administrator disable the ribbon ads in grid views to limit the performance impact.