Product Ribbons

Note: This feature is not available on every Ecommerce tier plan. If the feature is not available for your plan, you will see the corresponding notification.

Ribbons are horizontal product labels that are displayed on product listings thumbnails and product details pages in your store. Put any text you like on them (e.g. “Bestseller”, “20% Off”, “New”, “Christmas deal” or “Free Shipping”).

Add corner ribbon banners for any products right on the product page in your store or in bulk. While adding them, choose label text and color. 

Adding Product Ribbons

To add a ribbon to your product:

  2. From your Store management, go to Catalog → Products.
  3. Click Add New Product or choose a product from the list.
  4. Scroll down to the Add or edit ribbon field and click on it.
  5. Fill out the Ribbon text field.
  6. Choose the Ribbon color (by default, labels are orange).
  7. Click Save.

Customizing Ribbon Text

The Ribbon text field can contain only 30 symbols – which is a perfect reason to make your labels as catchy as possible.

To add/change the text of your product ribbon:

  1. From your Store management, go to Catalog → Products.
  2. Click Add New Product or choose a product from the list.
  3. Scroll down to the Add or edit ribbon field and click on it (or just find the ribbon section for the labels that already exist).
  4. Enter your text in the Ribbon text field.
  5. (optional) If your store is multilingual, enter your text in other languages.
  6. Click Save.

Customizing Ribbon Color

Choose the color of your ribbons from several predefined options, or set up your own color – e. g. a color that fits into the concept of your store.

To customize label color:

  1. From your Store management, go to Catalog → Products.
  2. Click Add New Product or choose a product from the list.
  3. Scroll down to the Add or edit ribbon field and click on it (or just find the ribbon section for the labels that already exist).
  4. Press the “#” button and then click on the eyedropper to use the color chooser tool:

5. Move the color bar (the left one) and/or the opacity bar (the right one) to change ribbon color and opacity.

6. Enter an existing color code into the Custom Ribbon Color field – if you already know it – just set the opacity level.

7. Click Save.