How can I change my header font to white and body font to blue?

Store Design

Topic summary

Goal: change header text to white and body text (e.g., “Collections” and “Price”) to blue on a Shopify theme.

Key steps proposed:

  • Add custom CSS in the theme file (Online Store → Theme → Edit code → Assets/base.css) because theme settings may not offer this control.
  • Initial CSS suggestion targeted .card__heading (white) and .gradient (blue).
  • Follow-up added .announcement-bar__message (white) to affect the announcement bar.
  • Another contributor proposed more header-specific selectors: .header__heading-link .h2 and .header__menu-item span (both white), with .gradient set to blue (#0000FF).

Context: the store URL and a password were provided to enable tailored CSS guidance.

Notes:

  • Exact selectors may vary by theme; provided selectors (.card__heading, .gradient, .announcement-bar__message, .header__heading-link .h2, .header__menu-item span) aim to cover header titles, menu items, and announcement bar.
  • Code snippets are central to the solution; implementation involves pasting CSS at the end of base.css.

Status: user has not confirmed a final resolution; guidance remains open for refinement based on theme structure.

Summarized with AI on February 6. AI used: gpt-5.
1

How do i get my header font to be white and my main body font to be blue?

2

Hello @snoweyyy !
I hope you are doing great!
If you haven’t found the option in customization then you must need to add custom CSS to your theme file, please share your store URL so that I can check and can help you with adding the custom CSS.

3

auers.com.au

Pass: theudi

4

Hi @snoweyyy

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css ->paste bellow code in bottom of file

.card__heading {

color: white !important;

}

.gradient {

color: blue !important;

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

5

Thanks so much for this, im sort of getting it but just lacking as what to do. I wanna have white labels at the top and then where it says collections and price i want it to be blue?

Wondering if you could help?

auers.com.au

pass: theudi

6

Try again with this code:

.card__heading {

color: white !important;

}

.gradient {

color: blue !important;

}

.announcement-bar__message {
color: white;
}

7

Hello @snoweyyy

Go to the online Store >Theme >Edit Code > Assets >base.css >Add code in this file.

.header__heading-link .h2 {
   color: #fff !important;
}
.header__menu-item span {
    color: #fff !important;
}
.gradient {
    color: #0000FF !important;
}