Enrich the shopping experience with in-grid visual cues that save customers time and increase satisfaction.
Product ribbons (also called "badges" or "dotwhacks") enable you to add quick and valuable information, such as "Bestseller," "New Arrival," or "Sale," inside a product grid, helping customers to navigate through your products and find what they need quickly and easily.
In general, by using metafields (from product and collection sources) and line item properties (in the cart), in combination with Nyla's Building capabilities, you have a great deal of flexibility to show messaging that appears based on criteria that you select.
Quick Start
Nyla comes with pre-configured blocks for several types of product ribbons. You can use these out of the box, or as starting points.
VIDEO: How to add product ribbons to a grid using blocks (5 min screen recording)
In order to use the built in Nyla ribbons:
1. Add your ribbons to wherever you want them to show up (e.g PDP, PLP etc)
2. Choose what ribbons you want to show up from the options below:
Product Ribbon block
Nyla currently comes loaded in with a block, named "Product Ribbon" that contains multiple ribbon types you can use as starting points to create your own dynamic messaging.
Within the block, there are 3 ribbon types:
-
Sale: There are two sale ribbons that you can choose from:
-
Automatic: Shows the word 'Sale' if product variant has a compare at price that is lower than the product variant price
-
Automatic % calculation: shows a calculated sale percentage using your price & compare at price if the compare at price that is lower than the product variant price
- The Automatic % calculation visibility is off by default
-
-
Ribbon metafield (i.e. 'NEW', or 'BESTSELLER')
- This option shows whatever text is entered in the nyla.text_ribbon metafield
- It will only show if the nyla.text_ribbon metafield is populated
- It's set to show if the compare at price is not blank so that it doesn't clash with the sale ribbon
-
Image ribbon (metafield)
- This option shows whatever text is entered in the nyla.text_ribbon metafield
- It will only show if the nyla.image_ribbon metafield is populated
- It's set to show if the compare at price is not blank so that it doesn't clash with the sale ribbon
3. If using in a PLP o Cross Sell, ensure your grid layout/slide layout position is set to relative
4. Add the appropriate metafield(s) to your site
In order to use these ribbons you should add the corresponding metafield:
- nyla.image_ribbon
- Namespace: nyla
- Key: image_ribbon
- Type: File
- nyla.text_ribbon
- Namespace: nyla
- Key: text_ribbon
- Type: Single Line Text
5. Populate the metafields
6. Style your ribbons
7. Add to all locations you want them to add up (PDP, PLP, Cross Sell and so on), we recommend to save your own block after making customisations if this will be faster.
Remember that these are just starting points, you can adapt these or create your own ribbons based on any properties available in the source you are using and UI you create in the tool.