what are product ribbons? how do i create product ribbons? how do I automatically show a product ribbon? what are product ribbons? how do i create product ribbons? how do I automatically show a product ribbon?
  1. JuniperCommerce
  2. JuniperWeb
  3. Settings

what are product ribbons? how do i create product ribbons? how do I automatically show a product ribbon?

 

Jump To: 

What are product ribbons?

Product ribbons, aka product labels or product tags, are a marketing technique used to entice and coax customers to find what they can't live without and think they will love 💘. Ribbons can be customized and used for a number of purposes, such as:

  1. Highlight and/or promote a sale
  2. Showcase bestsellers, new arrivals, or last chance or featured items
  3. Promote additional services, such as: gift wrapping, customizable item(s), pick-up in store, etc.
  4. Feature special causes or social events such as charities and store events

Be wary of creating too many customized ribbons as the saying goes "too much of a good thing"...can be bothersome, unpleasant, or even harmful.

Please note: Our custom ribbons feature is only available on our JuniperWeb platform.

Automatically Display A Product Ribbon  

A simple tick of the "Auto-Show Sold Out Ribbon" enables this feature to be shown on your JuniperWeb site. To get started, head to the Product Settings tab and notice the checkbox under Product Ribbons. Once ticked, the sold out ribbon will automatically show when products have "0" in the onHandQuantity (OHQ) data field within WebManager or JuniperData. Remember, enabling this feature is totally optional. If showing a "sold-out" ribbon doesn't work for you, no worries! 

At this time, the ribbon displayed for "Auto-Show Sold Out Ribbon" is not-customizable and will show in a classic, fire-engine red color. If you prefer, you can also set-up your own customizable "sold-out" ribbon within the product ribbons setup panel.

mceclip0.png

Note: the "Hide Low Inventory Items" toggle will need to be set to off for the auto-sold out ribbon to show. If sold out items will never come back into stock, you may want to update your data file to mark those items IsDeleted = True at some point as they will not automatically hide when the "Hide Low Inventory Items" toggle is disabled.

mceclip0.png

What will it look like on your JuniperWeb site? Great question. Please note that each of our themes vary in how a product displays. However, the overall look of the sold out ribbon will be the same. The below screen shot showcases our Sell Theme with the sold out ribbon.

mceclip1.png


Next up, how to create custom ribbons...let's dive in like we eat a bowl of ice cream 🍨. But, we'll let you keep how you eat your ice cream to yourself...

Creating Product Ribbons

To start creating custom ribbons, let's first head over to WebManager > Products > Products Quick Edit and determine a udf field you will plan to use for your custom ribbons. Note: each custom ribbon can use the same or different udf field. You decide what's best for you. Simple as that.

If you enabled the auto-show sold out ribbon, review the OHQ column to make sure you have items with 0 OHQ. Then, check that "hide low inventory items" has been toggled off.

Now, let's pull up your JuniperWeb Admin > Settings > Product Settings. Follow the below steps to create your customized ribbons.

  • STEP 1: Create a short, simple display name (e.g. Sale, New, or Featured).
  • STEP 2: Select a udf field to identify the product(s).
  • STEP 3: Add a value that matches the data in your udf field.  This is case sensitive andmustnot include any special characters, but can include spaces between words.
    For example, as shown below the "value" for the first custom ribbon is "last chance" which also appears in the udf19 field. Please note that although the font is in all lowercase here in the admin screenshot and in WebManager, by design the font will show in all uppercase text on the JuniperWeb site. See below examples.
  • STEP 4: Select a color for the ribbon by clicking on the color selector.
  • FINAL STEP: Click the "Add Ribbon" button.

mceclip2.png

How it looks...


mceclip3.png
Please note: At this time, once a ribbon has been created, it cannot be edited. The best way to ensure your custom ribbons work properly is to verify that the data entered in the "value" field above matches that of what is entered in the "udf" field within WebManager.
Now, it's time for fun! Get creative and if you have any questions, please let us know.
Need further support? Submit a request