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

To draw attention to certain catalog entries on the storefront, you can display a ribbon ad over the thumbnail image. To do so, you must create an attribute in the attribute dictionary to represent the ribbon ad. Then, you can assign the attribute to one or more catalog entries.

Before you begin

Procedure

  1. In the attribute dictionary, create a ribbon ad attribute:
    1. Open the Catalogs tool.
    2. Click File > New > Attribute Dictionary Attribute with Predefined Values.
    3. In the General Attribute Information section, specify the following information for the attribute:

      Fields for a ribbon ad attribute
      Property Description
      Code Do one of the following things:
      • To use a specific CSS style to format the ribbon ad, type the name of the CSS style. Ask a store developer for the exact style name. The name cannot contain any spaces. Do not include the period at the beginning of the style name.
      • To use the default CSS style for ribbon ads, type any name for the code, for example Clearance ribbon ad.

      The code is not displayed in the storefront.
      Name Type a name to help you identify this ribbon ad attribute in Management Center, for example, Clearance ribbon ad.

      This name is not displayed in the storefront.
      Data type Select Text.
      Use as a ribbon ad Select this check box.
      Displayable If you do not want the ribbon ad text to be displayed in the list of descriptive attributes for a catalog entry on catalog entry pages, clear this check box.
      Comparable If you do not want the ribbon ad text to be displayed in the list of descriptive attributes for a catalog entry on the Compare Products page, clear this check box.
    4. Above the Attribute values table, click the Create New Attribute Value icon.
    5. In the Attribute values table, in the Value column, type the text that you want to display in the ribbon ad on the storefront.
      For example, type Clearance. Keep the text short enough to fit in the ribbon ad. You can type more than one value if you want to select different text options for the ribbon ad when you assign it to catalog entries.
      Note: The Sequence column has no effect on ribbon ads.
    6. Click Save, and then click Close.
  2. Assign the ribbon ad attribute to catalog entries.
    Note: If you assign a ribbon ad to a product, the ribbon ad displays on the product thumbnail and the SKU thumbnail. However, if you assign a ribbon ad to a SKU, the ribbon add displays only on that SKU.
    1. Find and open the catalog entry to which you want to assign the ribbon ad.
    2. Click the Descriptive Attributes tab.
    3. In the Descriptive Attributes table, add the ribbon ad attribute that you created in step 1.
      Tip: If a catalog entry is assigned more than one ribbon ad, use the Sequence column in the Descriptive Attributes table to manage how the ribbon ads are layered on the catalog entry thumbnail. Assign a higher sequence number to the ribbon ad that you want as the top layer.
    4. Click Save, and then click Close.
    5. Repeat step 2 for each additional catalog entry that requires the ribbon ad.
  3. Preview the catalog entry thumbnail images in the storefront to confirm that the ribbon ad is displayed as expected.
    For example, navigate to the appropriate category page and look for the thumbnail image of the catalog entry to which you assigned the attribute.