Change font colour for the filter section

Store Design
1

Hi All

I want to change my font colour in my filter section.

I know the filter font colour is determined by the ‘general text colors’ in the theme settings. However the filter section has the same colour as the text so you can’t read it.

Below is my screenshot

MrJD_0-1646184598438.png
MrJD_0-1646184598438.png1686×900 170 KB

I just want to know how can I only change the font colour in the filter section to a black, so it can be easily read.

Thank you

Mr JD

2

Hello @MrJD ,

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

3

Hello @diego_ezfy This is my store url

https://z2bvghlfi0ob5g28-46181548197.shopifypreview.com

https://z2bvghlfi0ob5g28-46181548197.shopifypreview.com/collections/sake

In here if you could click the filter a section will hover from the left and you will see the problem

Thank you

4

Hi @MrJD ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.cloud-search-filters-pane .cloud-search-filter .cloud-search-filter-value__name {
    color: black !Important;
}

NOTE: Note: you can change the color value to match your theme

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

Hello @AvadaCommerce

Thank you

I pasted your code, however the font colour of the products changed not the categories.

Could you please provide me the code to change the category colour?

Thank you

6

Hi @MrJD ,

Sorry for the confusion. You try bellow code in file theme.css:

.cloud-search-filter__name span {
    color: #000 !Important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

Thank you @AvadaCommerce

It worked seamlessly.