Help about changed color language switcher

Shopify Discussion

Topic summary

A Shopify store owner seeks to customize their language switcher by making language labels bold white and changing the dropdown background from black to transparent.

Solution Provided:

  • Add CSS code to component-localization-form.css file
  • Code targets .disclosure__item for bold white text and .disclosure__list-wrapper for transparent background
  • Access via: Online Store → Themes → Edit code → Assets

Current Status:

  • Initial customization request successfully resolved
  • Follow-up question: User now asks how to make language labels bold within the dropdown menu itself
  • Discussion remains open awaiting response to this additional styling request

Note: Multiple solutions were offered, including an alternative hover effect, but the transparent background approach was confirmed as the preferred solution.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone, I would like to be able to put the language labels in bold white and be able to change the background of the selector curtain from black to transparent. Thanks in advance and have a nice evening!

Screenshot 1.png
Screenshot 1.png1221×845 41.6 KB

1 Like
2

Hey @Leon0125

Share your Store URL and Password if enabled.

Best Regards,

Moeed

3

https://h0nusk-md.myshopify.com/

pass ciacia

4

Hi @Leon0125 , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code

Step 2: Find component-localization-form.css file

Step 3: Paste this code at the bottom of the file

.disclosure__item {
    color: white !important;
    font-weight: bold !important;
}

.disclosure__list-wrapper {
background: transparent !important;
}

Result:

B2Bridge_0-1742179235906.png
B2Bridge_0-1742179235906.png396×300 12.4 KB

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

1 Like
5

Hello @Leon0125

Go to online store ----> themes ----> actions ----> edit code ----> assets ----> ocmponent-localization-form.css
add this code at the end of the file and save.

.disclosure__link:hover {
background-color: #d77339 !important;
}

Result

31.png
31.png744×333 35.1 KB

If this was helpful, hit the like button and accept the solution.
Thanks

6

Thanks a lot for the help but I wanted it transparent, as shown to me by B2Bridge above. Thanks anyway so much!

7

Perfect. Thanks really, that’s what I was looking for. One last thing if I don’t mind: what if I wanted the language tags in bold in the dropdown too?