HOW TO COLOR BADGE PRODUCT PAGE

Store Design
, ,

Topic summary

Goal: add a visible sale badge on the product page with white text on a black background (e.g., showing “47% off”). A product link was shared for context.

Recent updates:

  • A request was made for a screenshot to clarify the exact placement and styling of the badge.
  • One participant reported the badge appears fine now and asked if the issue was resolved.
  • A technical suggestion was provided: edit the theme’s price.liquid (Shopify template that renders product pricing) and wrap the existing “save % off” code in a dedicated block, implying you can then target it with CSS for styling.

Key technical point:

  • price.liquid is the file controlling the price section; wrapping the discount code enables attaching classes/IDs and custom CSS (to set white text on black background).

Status and open items:

  • No confirmed resolution from the original poster.
  • Styling specifics (CSS for white-on-black) were not provided; a screenshot and/or CSS details are still needed.

Attachments:

  • Code snippet was referenced; a screenshot was requested but not provided.
Summarized with AI on December 20. AI used: gpt-5.
1

hi i currently have my sale showing 47% off but there’s no badge with color on MY PRODUCT PAGE, how can i make it white writing and black background?

https://nexvision4k.online/products/nexvision-miniprojector

2

Hi, @nv100

Can you please take a screenshot to describe your requirements? So that I can assist you.

3

Hi @nv100 ,

I checked and it shows fine, did you solve it?

4

Hi @nv100

Please open price.liquid file, find and wrap your sale code into this code


// your save % off code goes here