Add Product Ribbons or Callouts to the Shop App

Add Product Ribbons or Callouts to the Shop App

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

You can add corner ribbon banners for any products right on the product page in your Shop dashboard or in bulk. While adding them, you can choose label text and color. It is also possible to provide product ribbons in different languages if your catalog is multilingual.

 

shop-app-product-ribbon-01.png

 

 

Add product ribbons

You can add product ribbons for individual products or in bulk. After you do that, they will be displayed over the main product image in the product grid in your store and on the product details page, under the price field. Your customers will also see labels on the images of your related products (if these products have ribbons).

To add a ribbon to your product:

  1. Select the Shop App from your Marketing 360 dashboard or from the App Menu near the top left corner of the page.
  2. From your Shop dashboard, click 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.

In case you were using the “Compare to” price feature, you already had some “On sale” tags in your catalog. If you set up ribbons for the same products, they will replace them. But if later you decide to remove ribbons, the “On sale” tags will be displayed again.

 

Customize ribbon text

The Ribbon text field can contain only 30 characters – which is a perfect reason to make your labels as catchy as possible. You can add any text to attract your customer's attention like “Free shipping”, “Sale”, “Summer special”, etc. If you are using additional storefront languages, you can create ribbon texts in various languages for your product.

To add/change the text of your product ribbon:

  1. From your Shop dashboard, click 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.

If you have a multilingual catalog, you can also leave translation fields for your ribbons empty. This way, the texts on the labels will be shown in your store’s default language.

The texts of your ribbons are “searchable”. So, even if you come up with some really creative ones, your customers will be able to find these products on the search page of your store (e.g. they can find all the products labeled with “Brand-new”).

Customize ribbon color

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

To customize label color:

  1. From your Shop dashboard, 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:

    shop-app-product-ribbon-02.png

  5. Move the color bar (the left one) and/or the opacity bar (the right one) to change ribbon color and opacity.
  6. Or enter an existing color code into the Custom Ribbon Color field – if you already know it – and just set the opacity level.
  7. Click Save.

The resulting color code will be displayed in the Custom Ribbon Color field.

 

 

Add, update and delete product ribbons in bulk

If you have a large catalog that is difficult to update or you want to have products with the same ribbons in several Shop App stores, you can use CSV export and import to add, update or delete your product ribbons in bulk.

You can also export/import ribbons if you want to “save” their settings: for example, the promotion in your store is over for now but you know that you might run it again in the future. In this case you can export the data, keep the downloaded file and import it back when you need it.

 

 

To add, edit or delete product ribbons in bulk:

  1. From your Shop App dashboard, click Catalog > Products.
  2. If you want to edit ribbons for all products, click Export All below your product list:

    shop-app-product-ribbon-03.png

    If you need to manage ribbons for particular products, you can select them in the list and then click Export Selected.
  3. Select the following columns for export – Product name, SKU, Ribbon and Ribbon color (you can choose other columns as well if you need them):

    shop-app-product-ribbon-04.png

  4. Click Download CSV file.
    The file will be exported with the semicolon delimiter unless you pick another delimiter (comma or tab) in the export dialog.
  5. Open the file in a plain text editor or in a spreadsheet (with the same delimiter that you’ve used for export).

    Here is, for example, how the data looks in TextEdit editor:

    shop-app-product-ribbon-05.png

    And this is how the same data should look in Google Sheets:

    Adding_and_updating_product_ribbons_in_bulk__4_.png

  6. Add or edit the texts of your ribbons for each product in the ribbon column (they cannot contain more than 30 symbols each). To delete your product ribbons, leave the ribbon field empty.
  7. Add or edit the colors (color codes) of your ribbons for each product in the ribbonColor column. To delete your product ribbons, leave the ribbonColor field empty.
  8. Save the file.
  9. Return to Catalog > Products and click Import Products.

    shop-app-product-ribbon-07.png

  10. Upload your file, paying attention to the type of delimiter and the order of columns. They should be the same as in your file:

    shop-app-product-ribbon-08.png

After the import is complete, texts and colors of your ribbons will be updated automatically.

If you're using the “Compare to” price feature and later added ribbons for your products, for the time being they replaced the “On sale” tags. But once you remove a ribbon, the “On sale” tag will be displayed again.


    • Related Articles

    • Add and Edit Product Details

      Products are the physical goods, digital files, and services that you sell. To create a product, you need to specify the name and upload product images. In addition, you can add product details that help your clients better understand the product: ...

    • Add Product Variations

      You can add variations to a product that comes in more than one option, such as size or color. Each possible set of options for a particular product is a variation for that product. Product variations can help you: assign different images for every ...

    • Sell Product Bundles

      Product bundles are sets of several individual goods or services that you can sell as one "package". This is useful for situations like: create a product box where customers can choose which items to include give a discount for buying in bulk ...

    • Add Videos to Your Product Pages

      With the Marketing 360® Shop App, you can add videos for your product to be displayed in the product gallery on your product details page. To add a video, it must first be uploaded to YouTube, Vimeo, TikTok, Facebook, or Instagram. There are no ...

    • Create and Edit Product Options

      Product options If you sell products that have variants (like colors and sizes), you can list them as one base product with options. As a result, store visitors can select the options they prefer on the product page. The chosen product options are ...