How to Set the Currency Selector in the Footer to White

Store Design
, , , , ,

Topic summary

A user needed to change the footer currency selector to white while keeping the header version black. After applying CSS that affected both locations, the footer text became unreadable.

Solutions Provided:

Three developers offered CSS code snippets targeting the footer currency selector specifically:

  • Targeting the footer localization form elements with color: white !important
  • Adding hover state fixes to prevent text from becoming invisible on interaction
  • Placing code in either Custom CSS section or base.css file

One solution included a screenshot showing the desired white text result.

Additional Issue Identified:

A developer reported a bug where hovering over the currency selector causes it to hide intermittently, potentially preventing users from clicking currencies. They shared a video demonstration of this behavior in incognito mode on Windows.

The original poster confirmed the initial color issue was resolved but reported the currency selector works normally on their end, questioning whether this is a device-specific problem.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hey guys, I have a problem. I set the currency selector in the header to black, which is what I want, but it also changed to black in the footer. However, I want it to stay white in the footer and remain black in the header.

How can I fix this?

Here’s my store URL: https://1049xn-ya.myshopify.com/

Thanks a lot,
Tim

1 Like
2

Hello @CreatorTim

#FooterCountryForm>div:nth-child(5)>div:nth-child(2)>button:nth-child(1)>span:nth-child(1) {
color: #fff !important;
}

If you need more help let me know, if it works , hit the like button & Accept as solution Thanks

1 Like
3

Hi @CreatorTim

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
footer .localization-form__select>span, footer span.localization-form__currency.motion-reduce {
    color: white !important;
}
footer .disclosure__item .disclosure__link:hover {
    color: white !important;
}

Here is the result:

image_720.png
image_720.png720×350 40.9 KB

I hope this helps

Best,

Daisy

1 Like
4

Hey @CreatorTim this is Qasim a Sr. Shopify Developer and officialShopify Partener.

Here is complete code to make your Currency Selecter white in Footer. Please paste this code in the end of base.css file. Also I found another issue when we hover on Country it’s color become black and Invisible. I also gave this solution in the provided code.

button.disclosure__button.localization-form__select.localization-selector.link.link--text.caption-large span {
    color: white !important;
}
.localization-form__select>span, span.localization-form__currency.motion-reduce, .header__menu-item span {
    color: white !important;
}
@media screen and (min-width: 768px) {
    .disclosure__item .disclosure__link:hover {
        color: #ffffffbf !important;
    }
}

If you need more help let know.

Thanks

1 Like
5

Thank you! Appreciate it

6

If you appreciate then you should mark as Solution my reply :heart_eyes: .

7

Hey @CreatorTim I also found another bug. When we hover on Currency selectore we are not able to click on currencies.
Do you need help regarding this or not?

8

What do you mean? For me, it works normally. When I click on the currency, it changes.

What device are you using? Mac or Windows?

9

Here is the bug that I am talking about. When I hover on it suddenly it work either it hide. This can cause issue. I am using Window and check it incognito mode. Watch here

https://drive.google.com/file/d/1xbdMNnpLBFv6DzSjISbNNw8OecPaFvRw/view?usp=sharing