Language Selector without box in Horizon theme

[tncrdn]

Hello,

I was wondering if it would possible to make the Language Selector in Horizon theme

without a box and just view the text when you click on it.

It is like this right now:

Would it be possible to change this inside the code?

[SkillUpDennis]

Yes — this can be changed with a small CSS adjustment in the theme code.

1. Go to Online Store → Themes → Edit code.

2. Open your base.css (or theme.css) file.

3. Add a rule targeting the language selector’s container and remove its border/background, for example:

.language-selector {
  border: none;
  background: transparent;
}

4. Save and refresh your store.

The exact selector name may be different in the Horizon theme, so you can use your browser’s Inspect Element tool to check and adjust the class name.

[tncrdn]

Thank you. I found base.css and added the code you gave me inside it (at the end of it) but it doesn’t seem to make any change. The selector’s name seems to be correct as far as I understand. I clicked Save after making the change but I’m not sure if it saved since it didn’t prompt me that it was saved or the Save button wasn’t greyed out.

[SkillUpDennis]

If the CSS change didn’t take effect, a couple of things might be happening:

1. CSS caching – Sometimes browsers cache old CSS. Try clearing your browser cache or checking in an incognito/private window.

2. Specificity issue – If the theme has a more specific style targeting the language selector, your new rule may be overridden. Try increasing specificity (for example, including the parent container in your selector) or adding !important after the property value:

.language-selector {
  border: none !important;
  background: transparent !important;
}

3. Wrong file or location – Make sure you added it to the active theme’s CSS file, and that there are no syntax errors above your new code.

If you inspect the element again after saving, check the “Styles” panel to see if your new rule is showing and whether it’s crossed out — that will tell you if it’s being overridden.

[The_ScriptFlow]

Hey @tncrdn,

Thanks for Brining this Question to Shopify community.
Could you please share your store URL so that I can take a look and provide you with the solution code.
Waiting to hear back from you.
Thanks

[The_ScriptFlow]

@SkillUpDennis

 border: none;
  background: transparent;

Thanks for sharing the code.
Please paste the below css in the end of base.css file.

.localization-form__select {
  border: none;
  background-color: transparent;
  appearance: none; /* Removes default arrow in some browsers */
  -webkit-appearance: none; /* For Safari/Chrome */
  -moz-appearance: none; /* For Firefox */
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.localization-form__select option {
  background-color: transparent;
  border: none;
  color: inherit;
}

[tncrdn]

Thank you. Unfortunately it didn’t make any change.

[The_ScriptFlow]

Could you please share the 4 digits collab code in the p/m so that I can take a look by myself.
I guess there are classes conflicting.

[tncrdn]

Where can I find this code?

[The_ScriptFlow]

I just send it on how to find it in the p/m.

[tim_1]

Since it’s native <select> there is no reliable methods to change its appearance.

You can either

• edit the snippets/localization-form.liquid to replace <select> with something else (and this will break your theme updateability),
• do this in JS
• or disable default language selector and create your own in a “Custom liquid” section in header.

Given that you have only 2 choices linking to different domains, you may as well simply add a submenu in main menu…

[SkillUpDennis]

Lets do this

You can style the language selector so it only shows the text, without the background box.

1. Go to Online Store → Themes → Edit code.

2. Open your main stylesheet (often called base.css or theme.css).

3. Add this at the bottom:

.localization-form__select,
.localization-form__select option {
  background: transparent;
  border: none;
  box-shadow: none;
}

4. Save and refresh your store to check the change.

If it doesn’t take effect right away, use your browser’s Inspect Element tool to confirm the exact class names used in the Horizon theme and replace .localization-form__select with that.

[topnewyork]

Hi @tncrdn,

Kindly provide your store URL please and if it is password protected, please share the password as well.

Thanks!

[tncrdn]

https://kintgx-d9.myshopify.com/