Ribbon ads (image overlays) for catalog entry thumbnails

A ribbon ad is an image overlay displayed over the thumbnail image of catalog entries. The image overlay contains text describing 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 the store, check with a store developer.

To use a ribbon ad in the store, we must create an attribute in the attribute dictionary to represent the ribbon ad. When you create the attribute, we 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, we 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 the store. In the attribute dictionary, when creating the attribute to represent the ribbon ad, we can either use the default style, or specify the name of the CSS style to use. To obtain the names of the CSS styles available for the 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. We can specify multiple values for each attribute. For example, if you have an additional ribbon ad style to flag products available either online or in-store, we can create an attribute with two values:

Requirements and limitations for ribbon ads

• To display ribbon ads, the store must use WebSphere Commerce Search.

• (Enterprise) In an extended site:

  • Ribbon ads assigned to a catalog entry owned by the asset store are displayed in all extended site stores that share the catalog entry. We cannot override the ribbon ad attribute for a specific extended site store.

  • If a catalog entry is owned by the asset store, we 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 the store does not need ribbon ads on catalog entries in grid views of catalog entries, we can have a site administrator disable the ribbon ads in grid views to limit the performance impact.

Related tasks
Adding a ribbon ad (image overlay) to catalog entry thumbnails