Currency Selector Adjustment in the Header.

Store Design
, , ,
1

Hey guys, I want to adjust the currency selector in the header.

  1. I want to remove the underline when hovering over it.
  2. I want to set it the same size and the same emphasis as the menu items.
  3. I want to remove the arrow on the right.
  4. When you click on it, a dropdown will appear with the country selection, and for that, I want to remove the search bar and round the corners.

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

Thank you so much,
Tim

2

@CreatorTim please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.header-localization .disclosure .localization-form__select:hover{text-decoration: none !important;}
.country-filter .field{display: none;}
.disclosure svg.icon.icon-caret{display: none;}
1 Like
3

Hi @CreatorTim

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.desktop-localization-wrapper .localization-form__select > span {
text-transform: uppercase;
font-size: 13px;
}
.header-localization .disclosure .localization-form__select:hover {
text-decoration: none !important;
}
.localization-form__select .icon-caret, 
.desktop-localization-wrapper .country-filter > .field {
display: none;
}

Screenshot 2024-12-23 at 14.27.37.png
Screenshot 2024-12-23 at 14.27.37.png1062×776 12.1 KB

4

Hello @CreatorTim

Go to Shopify Admin → Online Store ->Theme → Edit code → base.css

  • Added below code in your base.css file
.header-localization:not(.menu-drawer__localization) .localization-form:only-child .localization-form__select:hover {
    text-decoration: none;
}
.header-localization:not(.menu-drawer__localization) localization-form:only-child .localization-form__select>span {
    text-transform: uppercase;
}
1 Like