Dawn - Editing promotion badge color & font

Store Design
, , , , ,

Topic summary

Goal: Adjust the “Sold out” promotion badge in the Shopify Dawn theme so that when the black variant is selected, the badge has background #7069BC, bold text, and 13px font size.

What was tried: A helper advised adding custom CSS in theme.liquid (at the bottom, before ). An image preview was provided, but the CSS code block appears empty/missing, so exact selectors/styles weren’t shared.

Current issues: After attempting changes, the badge position shifts (notably on mobile), and the text is still not bold. The merchant reports that adding their own CSS made it worse.

Latest update: The helper repeated the same steps (add CSS in theme.liquid) without supplying the actual CSS rules. No new technical details were provided.

Status: Unresolved. Key needs:

  • Specific CSS selectors and rules to set background: #7069BC; font-weight: bold; font-size: 13px.
  • Guidance to prevent layout shift on mobile (e.g., consistent container sizing/positioning).
  • Verification of where the badge markup lives in Dawn to target it correctly.

Notes: The missing CSS snippet and the screenshot are central to resolving the issue.

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

Hi,

I want to edit my promotion badge color & font.

When my black variant is selected, this badge turns ‘sold out’ but the color of this badge is not correct, text should be in bold & 1 pixel more in size.

The background color of ‘sold out’ should be #7069BC, text in bold & 13px.

Thanx for your help

2

Hello @Alex087
Its Artzen Technologies! We will be happy to help you today.

Follow the Below Steps:

  1. Go to your Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following CSS at the bottom of the file above 
​

AFTER ADDING ABOVE CSS THE RESULT:

Artzen_tech_1-1694685254735.png
Artzen_tech_1-1694685254735.png1344×524 120 KB

Let me know if need further assistance
Regards,
Artzen Technologies

3

thanx Artzen,

badge is not at the same position, it create a shift especially on mobile. & font isn’t bold, I’ve put but it’s worst

4

Follow the Below Steps:

  1. Go to your Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following CSS at the bottom of the file above 
​

If helpful, please Like and Accept this Solution to help others