Stickers: Show percent off value on sale items

Modify your Sale sticker to show a percent off value in the sticker. Example result:


How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:


Open product-grid-item.liquid

From the Snippets folder, open product-grid-item.liquid:

Find this section of code:

Replace with the code from the following link (be sure you've made a duplicate of your theme before modifying this file):

Click to view code

Example of replacement:

Save the file:

Note: If you have variants with a different rate of discount, the largest discount value is shown in the sticker. Example, if one variant option is 25% off and others are all 10% off, the sticker will show 25% off. 


Optional: Use a bold font for the sticker

To help with reading the values, you can bold the sticker font with this line of CSS:

/* -- Start Pipeline override code -- */
.sticker--sale {font-weight:bold;}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code