Currency Selector Adjustment in the Header.

Store Design
, , ,

Topic summary

Main topic: adjusting the Shopify header currency selector’s look and behavior.

Requested changes:

  • Remove underline on hover.
  • Match size/emphasis of menu items.
  • Remove right-side arrow.
  • In the dropdown: remove the search bar and round the corners.

Proposed solutions (CSS-based):

  • Remove hover underline on the selector.
  • Hide the caret/arrow icon (.icon-caret).
  • Hide the country search field in the dropdown (.country-filter .field).
  • Style selector text (uppercase; font-size 13px) to better align with menu styling.
  • Implementation guidance: add CSS either in base.css (Edit code) or via Theme settings > Customize > Theme settings > Custom CSS.
  • A screenshot was provided illustrating the visual outcome of these changes.

Status and gaps:

  • Hover underline removal, arrow removal, and search bar removal are addressed by the shared CSS.
  • Matching the exact menu size/emphasis is partially addressed (uppercase and 13px font) but not confirmed.
  • Rounding the dropdown corners was requested but not covered in the provided code.
  • No confirmation from the requester; discussion appears open.
Summarized with AI on December 11. AI used: gpt-5.
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