Product Ribbons

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.

To create your own ribbons/messaging from scratch, by using product metafields and line item properties (for messaging in the cart), with conditional visibility, you have a great deal of flexibility to show messaging that appears based on criteria that you decide.

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 (4 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 which ribbons you want to display from the options below: 

Product Ribbons block 

The "Product Ribbons" block contains multiple ribbon types you can use as starting points to create your own dynamic messaging. 

Within the block, there are 4 ribbon types: 

• Text ribbon (i.e. 'New', or 'Best Seller')

  • Shows whatever text is entered in the nyla.text_ribbon metafield 
  • Will only show if the nyla.text_ribbon metafield is populated

• Image ribbon (metafield)

  • Shows whatever text is entered in the nyla.image_ribbon metafield 
  • Will only show if the nyla.image_ribbon metafield is populated
• Pre-order
  • Shows "Pre-Order" text
  • Shows up if the variant metafield nyla.preorder is populated
    • Note that this a variant metafield, not a product metafield
    • The property in Nyla is different for if you use this inside a source collection or a source product.
      • In source product you should use product.variant.metafield.nyla.preorder
      • In source collection you should use variant.metafield.nyla.preorder
  • This ribbon is set to hidden by default to avoid confusion on product listing pages given that collection grids generally convey product-level information.
  • To switch this on, you should toggle on the visibility setting on the group named 

    Preorder Block: Ribbon.

• 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 

3. 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

4. Populate the metafields

5. If using in a PLP or Cross Sell, ensure your grid layout/slide layout position is set to relative

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.