Change sale badge from circle one to square one

Store Design
,

Topic summary

Goal: change the Dawn theme’s sale badge from a circular style to a square one and apply blue styling.

Key steps implemented:

  • Shape: Added CSS in theme.liquid (before ) to set .badge { border-radius: unset !important; }.
  • Color/background: Applied blue background and white text. One approach used base.css at the bottom with .card__content .badge { background: #00a1ff !important; color: white !important; }. Another set blue via .badge { background-color: #0000ff !important; }.
  • Border: Increased thickness with .badge { border: 3px solid #2a50db !important; }.
  • Text styling: Set .badge { color: #fff !important; } and increased font size (e.g., .badge { font-size: 16px !important; }). A clarifying question confirmed whether the blue was for the font or background.

Notes:

  • Images were shared to illustrate the desired square blue badge.

Outcome: The user confirmed each change worked (shape, fill, border thickness, text color, and font size). No further modifications requested.

Status: Resolved.

Summarized with AI on January 3. AI used: gpt-5.
1

circle oe.png
circle oe.png562×131 40.6 KB

Screenshot 2024-03-10 164124.png
Screenshot 2024-03-10 164124.png577×146 2.37 KB

Hi i would like to change sale shape from circle one to square on like the picture , with blue color . Dawn theme , i send the website

R&D GADGETS MALTA : Online Shopping For Electronic Products Malta (rdmalta.com)

2

Hello @PeppePro02

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.badge{ border-radius: unset !important; }

techlyser_web_0-1710085999013.png
techlyser_web_0-1710085999013.png1257×314 202 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Do you want the font color to be blue or the background color to be blue?

3

Hi @PeppePro02

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.card__content .badge {

border-radius: unset !important;

background: #00a1ff !important;

color: white !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

Hi thank you for your reply , works but still i want to increase the thickness of the border and fill the inside with blue color .

5

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.badge { border:3px solid #2a50db !important; background-color:#0000ff !important; }

techlyser_web_0-1710148059880.png
techlyser_web_0-1710148059880.png1272×342 239 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
6

Hi works thank you ! Do you have any code for change also the font and color of the word inside of the badge?

7

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.badge { color: #fff !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
8

Thank you it works! Last thing can be incresed the size of the font also , i mean SAVE $? As only change the color of it this code. Last help please

9

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.badge { font-size: 16px !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

10

Thank you works!

11

Welcome @PeppePro02 :grin:
Was my reply helpful? Click Like to let me know!

Thanks