Product ribbons
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 arrival”, “Christmas deal” or “Free Shipping”).
You can add corner ribbon banners for any products right on the product page in your Sauecommerce admin 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.
Plan availability: Essential, Professional, Business.
Table of contents
Adding 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:
- From your Sauecommerce admin, 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, labels are orange).
- Click Save.
Get a technical support
Our technical teams will help you to create your e-commerce websites and all the support need to connect to the existing systems
Get a technical support
Our technical teams will help you to create your e-commerce websites and all the support need to connect to the existing systems
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. The same goes for "Pre-order" tags if you're using pre-orders.
If you use stock tracking and don't take pre-orders, then, after the product becomes out of stock, the "Sold Out" tag will appear on the product page instead of your ribbon. The ribbon will continue being displayed only in the product grid.
Customising ribbon text
The Ribbon text field can contain only 30 symbols – 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 change the text of your product ribbon:
- From your Sauecommerce admin, 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 (or just find the ribbon section for the labels that already exist).
- Enter your text in the Ribbon text field.
- (optional) If your store is multilingual, enter your text in other languages.
- 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”).
Customising 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:
- From your Sauecommerce admin, 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 (or just find the ribbon section for the labels that already exist).
- Press the “#” button and then click on the eyedropper to use the color chooser tool:
- Move the color bar (the left one) and/or the opacity bar (the right one) to change ribbon color and opacity.
- Or enter an existing color code into the Custom Ribbon Color field – if you already know it – and just set the opacity level.
- Click Save.
The resulting color code will be displayed in the Custom Ribbon Color field.
Get a technical support
Our technical teams will help you to create your e-commerce websites and all the support need to connect to the existing systems
Get a technical support
Our technical teams will help you to create your e-commerce websites and all the support need to connect to the existing systems
If you want to add a ribbon with a certain color and text combination to several products at once, consider using Mass Update. Another option to use one color for all your ribbons is via CSV import.
In case Sauecommerce ribbon options are not enough for you and you want to create labels with customized shape, size, and position (or put several labels on one product), you can use the Product Labels App. It cannot edit your Sauecommerce ribbons but could help you design some additional label variations for your store.
Deleting product ribbons
You can delete ribbons for individual products or all at once. For example, the promotion in your store is over, and the labels can no longer be useful.
To delete a ribbon for your product:
In case you were 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. The same goes for "Pre-order" tags if you're using pre-orders.
Adding, updating, and deleting product ribbons in bulk
You can easily add, update, or remove ribbons for selected products in bulk on the Catalog → Products page in your Sauecommerce admin. You can use filters to find the necessary items (e.g., all the products from the Clothes category or all the products that have a “50$ off” ribbon) and then mass update them.
It’s also possible to add, update or remove product ribbons in bulk using CSV import and export. For example, if you want to have products with the same ribbons in several Sauecommerce stores.
In case you want to manage product ribbons automatically, you can use the AutoRibbons app.
To add ribbons in bulk:
- From your Sauecommerce admin, go to Catalog → Products.
- Tick all the products you want to add ribbons for (you can click Filter in the left upper corner to use filters and make the search faster).
- Click Mass Update:
- In the dropdown menu, choose Promote on Storefront → Manage Ribbons → Add Ribbons to Selected.
- Enter Ribbon text and choose Ribbon color.
- Click Add.
Ribbons with the text and color you chose will be added to the selected products right away.
To update ribbons in bulk:
- From your Sauecommerce admin, go to Catalog → Products.
- Click Filter in the left upper corner:
- In the opened menu, scroll down to the Ribbons section.
- Choose the ribbon you need from the list or type its text into the Ribbon text field to make the search faster.
- (optional) Choose categories, availability, stock status, and other filters.
- Tick the products you want to update ribbons for.
- Click Mass Update:
- In the dropdown menu, choose Promote on Storefront → Manage Ribbons → Add Ribbons to Selected.If you apply Add Ribbons to Selected to a product that already has a ribbon, its ribbon will be replaced with a new one.
- Enter Ribbon text and choose Ribbon color.
- Click Add.
Ribbons with the text and color you chose will be added to the selected products right away.
To remove ribbons in bulk:
- From your Sauecommerce admin, go to Catalog → Products.
- Click Filter in the left upper corner:
- In the opened menu, scroll down to the Ribbons section.
- Choose the ribbon you need from the list or type its text into the Ribbon text field to make the search faster.
- (optional) Choose categories, availability, stock status, and other filters.
- Tick the products you want to remove ribbons for.
- Click Mass Update:
- In the dropdown menu, choose Promote on Storefront → Manage Ribbons → Remove Ribbons from Selected.
- Click Remove.
The ribbons will be removed from the selected products right away.