How do I separate font/text colours from one another?

2 0 0

Hi, hope I explain this correctly.
Website, -

1 - I wish for the header/text on the 'Home' page (ANDFORMUSIC.COM, Your ultimate destination for all things music.) to be in the colour of white (#FFFFFF). I want all text on the website, including all the listings, to remain completely black as it is. (#000000)

2 - I want the basket font colour & the search font colour to be completely white (#FFFFFF). It is currently completely black and unable to see any text due to the already black background. (Screenshots attached for refernce)

I can only change the colours to one colour from the theme editor and everything affects one another (i.e, If I change the colour to white, it updates for the shopping basket and search function, but it also changes all the text on the website, including lists etc).
I know it's a simple custom CSS coding, but I have no idea what kind of coding I need to put in, and I'm delaying on the launch of my business a lot because of this.


Replies 4 (4)

Shopify Partner
494 48 88

You can try adding this to the following sections Custom CSS settings (Themes>Customize>Click Section:

Banner CSS:

.banner_heading {color: #FFFFFF;}

.caption-with-letter-spacing {color: #FFFFFF}

Header CSS:

svg {fill: #FFFFFF;}

Before & After:



I hope that helps!


Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT

Shopify Expert
3465 459 515

Hi @andformusic ,

I see that the following CSS code on your theme makes all elements black:

A simple way to recolor certain parts as you want is:
1) You need to give html elements a class, for example: class-css-text-white (custom class name). Like this:

2) Then in the CSS code file (base.css, theme.css,... depending on the theme), add the following code:
.class-css-text-white {

color: #FFFFFF !important;


3) To know which positions you need to add classes, follow these steps: go to your site, click ctrl+shift+C, hover over the sections you want on the site, and locate the element. html you want to add class

If the above method doesn't work, just follow step 3. Then directly add style="color: #FFFFFF !important;" that html element

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Shopify Partner
4206 950 1599

Hi @andformusic 

This is Richard from PageFly - Shopify Page Builder App


Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

.banner_heading {
color: #FFFFFF !important;

.caption-with-letter-spacing {
color: #FFFFFF !important;

svg {
fill: #FFFFFF !important;

Hope this can help you solve the issue


Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

2 0 0

Hi @biznazz101   @BSS-Commerce  @PageFly-Richard . Thank you for the replies.
Unfortunately, none of these seem to be working. For PageFly's response, it seems to be changing the "DOT DOT DOT... MUSIC" to white and not the header.

For Biz and BSS, it seems to be making no changes at all (but I could also be doing it wrong!).
Also, does anyone have any idea to how I can have the basket and search font colour to white? Will these codes allow me to keep the colours as I want, fror me to change the Shopify colour option to white?

Thanks a bunch!