A promotion is as good as it is successfully communicated to the customers. Now you can easily highlight and effectively promote your products with the new Nop Product Ribbons plugin. The Nop Product Ribbons allow store owners to add ribbons with text and images to the various products in their nopCommerce store.
Live DEMO - see how the Nop Product Ribbons plugin would look like in your public store.
Admin DEMO - see the plugin administration.
In the next sections we will provide you with general information on how to setup your ribbons.
Settings
This section could be found in almost every plugin. It covers the basic and most common settings for every plugin.
- Enabled - If checked the Product Ribbons plugin will be enabled.
- Product Box Selector - The selector for the product box. The product box is used for listing products on pages like category page, manufacturer page, home page, etc. It is used by the integration of the plugin for displaying the Small product picture ribbon.
- Product Box Picture Container Selector - The selector for the product box picture container. The product box is used for listing products on pages like category page, manufacturer page, home page, etc. It is used by the integration of the plugin for displaying the Small product picture ribbon.
- Product Page Picture Parent Container Selector - The selector for the parent container of the product picture located on the product page. It is used by the integration of the plugin for displaying the Big product picture ribbon.
- Product Page Big Picture Container Selector - The selector for the container of the big product picture located on the product page. It is used by the integration of the plugin for displaying the Big product picture ribbon.
Create a ribbon
You can create as many ribbons as you want.
In order to create a new ribbon go to Plugins -> Nop Product Ribbons -> Product Ribbons. Click on the Add Product Ribbon button as shown on the image above.
Available Product Tokens - The tokens will be automatically replaced with their values for the product, on which the ribbon will be shown. They are used in Small and Big product picture ribbon tabs.
${old-price-new-price-difference-value}
${old-price-new-price-difference-percentage}
${product-quantity}
${max-discount-value}
${max-discount-percentage}
${special-price-expires-in}
Create A Ribbon - General Information
The General Information tab, contains general settings for the current ribbon.
- Enabled - If checked then this product ribbon will be activated. If unchecked then the product ribbon will be deactivated.
- Name - This is the name of the ribbon and is a required field. It is needed, so that you can separate your ribbons from each other as you can have as many ribbons as you want.
- Stop adding ribbons after this one is added - It is possible that you have several ribbons that could be shown for a given product, so if this is checked you can guarantee that no other ribbon will be show after this one is shown.
- Priority - As it is possible to have several ribbons for the same product then the priority number is used to sort the ribbons and show them in this order. The ribbon with the lowest priority number will be shown first, then the next ribbon etc. The order is important especially in cases when a given ribbon has the Stop adding ribbons after this one is added enabled then no other ribbons will be shown after it.
- From date - Set the start date from which the Ribbon will be activated. This is very useful for example when you want to show a ribbon for a season sale and you can set when the promotion of this sale to start.
Leave empty if you don't want to limit the ribbon by any start date and it will be activated unless you have a To date set (see below). The From date is in UTC time. - To date - Setting the end date to which the ribbon will be active. This is useful when you want to stop showing the ribbon after this date. For example when your special offer is over and the ribbon doesn't make sense any more. The To date is in UTC time.
Create a Ribbon - Small and big product picture ribbon
In the Small product picture ribbon tab, you can configure the ribbons that are show on all pages, except the one show on the big product image on the product page. We separated the big product image, because it is bigger than all of the other images, hence you can add a bigger ribbon to it.
- Text - In here you can use the Available Product Tokens. The tokens will be automatically replaced with their values for the product, on which the ribbon will be shown.
You could also Specify the text of the ribbon. This text will appear over the product image.
If you use a ribbon picture that contains text, leave empty . - Enabled - You could have many product ribbons. With this setting you could choose to enable/disable current product ribbon.
- Position - The default location where the ribbon will appear relative to the picture of the product.
You can customize further with the styles settings below, if needed. - Picture - From this setting you could Manage pictures or Select a picture for your ribbon.
- Manage Pictures - From here you could Upload a new picture or delete an existing one.
- Select picture - From here you could select already existing picture.
- Preview picture - From here you can preview the selected picture.
- Ribbon style - Here you can specify css styles that will be applied only to the ribbon html element.
The ribbon html element is the main html element for the ribbon that wraps the ribbon image and the ribbon text elements.
It has a css class name - 'product-ribbon'. Example styles: top: -5px; left:-5px; - Ribbon text style - Here you can specify css styles that will be applied only to the ribbon text (label) element.
The ribbon text is an label html element that is nested inside the ribbon element. - Ribbon image style - Here you can specify css styles that will be applied only to the ribbon image (img) element.
The ribbon image html element is nested inside the ribbon element.
Create a ribbon - Conditions
In the Conditions tab you can specify conditions for the current product ribbon. If the conditions are met, the product ribbon will be shown.
You could find more information of how the conditions work in the following article - Conditions.
Create a ribbon - Product Overrides
From the Product Overrides tab you can include or exclude products regardless of the conditions. For example if you add a product with the include state, the ribbon will be shown over that product, regardless of the conditions. If you add a product with the exclude state, the ribbon will not be shown over that product, regardless of the conditions.
You could find more information of how the product overrides work in the following article - Product Overrides.
Adding Ribbon Images
You can add a ribbon image, by clicking on the Ribbon Images menu.
To add an image click on the Upload a file button, select your image and click on the Add picture button.