How to enable the country section in my header

Store Design

Topic summary

A user wants to customize their Shopify header by adding a country selector that displays only the country code (not full name) and needs proper spacing from the search icon.

Current Issue:

  • Country tag appears too close to search icon
  • Shows full country name instead of just the code
  • User shared screenshots showing current state vs. desired appearance with separator

Proposed Solution:
A helper provided CSS code to adjust spacing:

  • Edit theme files via Shopify admin (Online Store > Themes > Edit code)
  • Add custom CSS to base.css/style.css/theme.css file
  • Includes code to hide currency sign in dropdown and adjust spacing

Complication:
The spacing CSS (margin: 0 30px) caused unintended side effects—shifting the logo position to the left on mobile version.

Status: Unresolved. User is seeking alternative solutions that won’t affect logo positioning.

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

Hey!!

I would like to add the country tag in my header. I did it but its too close to the search icon and also I would like to to appear just the country code, not the whole name.

This is how it looks like in my store

Screenshot 2023-09-15 123454.png
Screenshot 2023-09-15 123454.png460Ă—233 30.5 KB

This is how I would like it to appear, if its possible with the separation |

Screenshot 2023-09-15 120315.png
Screenshot 2023-09-15 120315.png514Ă—393 13.9 KB

Thank you in advance

1 Like
2

Hi @yalostore

Would you mind to share the URL store or the preview with the country tag? Thanks!

3

https://yalostore.com/

1 Like
4

Oh, Sorry I need the preview with the country tag. So I know to adjust it. Thanks!

5

Oops!! sorry. Its visible now.

1 Like
6

Thank you. I want able to hide the Currency sign in the drop down. It needs a HTML edits. But try this one for the space.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.desktop-localization-wrapper {margin: 0 40px;}

#HeaderCountryForm > div > div > button > span {
  clip-path: inset(0px 0px 0px 55px);
}
7

I did it but this code ( .desktop-localization-wrapper {margin: 0 30px;} ) changed my logo position to the left in the mobile version :(. I dont want that. Do you have any other idea?