How to remove the border and heading from the currency selector on MOBILE

Store Design
, , , , , , , , ,

Topic summary

Issue: User wanted to remove the border and “Country/region” heading from the mobile currency selector in their Shopify store.

Solution provided:

  • Navigate to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS
  • Add CSS code targeting mobile screens (max-width: 768px) that:
    • Hides the footer country label heading using display: none
    • Removes the border/box-shadow from the disclosure button

Outcome: The solution was confirmed working by the original poster. The CSS successfully removed both the heading text and border styling from the mobile currency selector.

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

Hi, how can I remove the border and the “Country/region” heading from the currency selector on mobile?

CreatorTim_0-1736101903668.png
CreatorTim_0-1736101903668.png597×784 20.2 KB

Thanks,
Tim

2

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.
@media screen and (max-width: 768px){
h2#FooterCountryLabel {
    display: none !important;
}
.disclosure > button.disclosure__button::after {
    box-shadow: none !important;
}
}

Here is the result:

image_360.png
image_360.png303×359 22.7 KB

I hope this helps

Best,

Daisy

1 Like
3

Got it, thank you so much!