You can highlight certain products on your storefront by adding product ribbons, colored labels that are displayed in your catalog on top of the product images. These tags contain short text, for example, Bestseller, 20% Off, New, Christmas Deal, or Free Shipping.
Customers will be more likely to notice and buy your product if it is marked with a ribbon.
Note: Avoid creating too many labels on one page. Ribbons look more attractive when they are tagging something unique.
Adding a ribbon to your product
- In your Online Store dashboard, go to Catalog > Products.
- Click Add New Product or choose a product from the list.
- Scroll down to the Add or edit ribbon field and click on it.
- Fill out the Ribbon text field.
- Choose the Ribbon color (by default all ribbons are orange).
- Click Save.
Once you set up a ribbon, it will display in the product grid in your store. You can find them under the price field and on the images of your related products.
Customizing the text of ribbons
A short and catchy label will instantly catch your customer's attention. That's why the Ribbon text field is limited to 30 symbols.
Important: The ribbon text is searchable. Your customers can also use the search to find products that have the same ribbon text.
If you use additional storefront languages, you can provide ribbons in different languages. The translation field (or several of them) will appear under the Ribbon text field.
If you leave this field empty, the ribbon texts will appear in your store’s default language.
Customizing ribbon color
You can choose the color of your ribbons from several predefined options, or you can set up your own color that matches the colors of your Online Store.
To customize label color to your liking, press the “#” button and then click on the eyedropper to use the color chooser tool.
You'll see a palette and two bars: the color bar and the opacity bar. You can move the pointers on these bars to create a perfect ribbon for your products. The resulting color code will be displayed in the Custom Ribbon Color field.
You can also enter an existing color code into the Custom Ribbon Color field.
Removing a ribbon
To delete the ribbon:
- In your Online Store dashboard, go to Catalog > Product.
- Navigate to the product from which you want to remove the ribbon. Click Edit.
- On the product page, scroll down and click Remove this ribbon.
- Click Save to confirm the change.
If you have enabled the Compare to price feature, your products will display On Sale ribbons in your catalog. If you add new ribbons to these products, the new ribbons will replace the On Sale ribbons. If you decide to remove ribbons, the On sale tags will be displayed again.