How to Put a percentage off in a collection page

Store Design
, , , , ,

Topic summary

A user wants to display percentage discounts on product cards within collection pages, showing how much customers save (e.g., “X% off”).

Current Situation:

  • The desired discount badge feature is not available in the theme’s customization settings
  • The user is not using the Dawn theme, which may have built-in options for this

Proposed Solutions:

  • Multiple respondents confirmed this requires custom code editing of theme files
  • Two video tutorials were shared demonstrating how to implement discount percentage badges through code modifications
  • One video specifically addresses adding percentage-off displays to collection pages

Status: The discussion remains open with the user seeking guidance on implementation. No confirmation yet on whether the provided resources resolved the issue.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello, How to put a percentage off in collection page

alalizaa_0-1731899260780.png
alalizaa_0-1731899260780.png1037×358 70.3 KB

How to make the percent off appear at the products view or collections view like

alalizaa_0-1732087555685.png

2

@alalizaa - please check if you have this option to show in your customize settings - > collections tab, if no then we will need to edit the code.

3

Hello,

Watch this video, It will really helpful for you.

Thanks!

4

There’s no option here

5

Im not using dawn theme

6

@alalizaa then it will need code editing

7

Do you have any reference on how to work on it?

8

Hi @alalizaa ,

For this you needs to update few lines of your theme file, request you to refer the below video and article provided in description for code.

Hope this will helps…