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. The image overlay contains text that describes a shared characteristic of the catalog entries, such as Exclusive or Clearance, to draw the attention of shoppers.

The following screen capture shows examples of two different ribbon ads (Exclusive and Clearance), each formatted with a different style:

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, as shown in the previous screen capture
On the compare products page

To understand the locations that ribbon ads are displayed on your store, check with a store developer.

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

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 WebSphere Commerce Search (Solr).
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. For more information about disabling ribbon ads in grid views with the env_displayRibbonAdInGridMode JSTL variable if you are a site administrator, see Commonly used JSTL variables in starter store pages.