How to add a stroke for Country/region Selector — Theme Spotlight

Store Design
,

Topic summary

A user wants to add a border/stroke to their country/region selector and display currency information on hover, similar to a reference site’s implementation.

Current Issue:

  • The selector lacks visual definition compared to the desired design
  • No currency display functionality on hover

Proposed Solution:
Another user suggests CSS modifications:

  • Add a border using .country-selector with border: 1px solid #000 and padding
  • Implement hover effects to show currency using pseudo-elements and data attributes
  • Apply styles directly in the theme’s CSS file

Status: The discussion provides initial CSS code snippets but appears incomplete (some code text is corrupted/reversed). Implementation details may need clarification or additional technical guidance.

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

How to make a stroke for Country/region Selector like on the first site [link / 1 image], now it looks like this [link / 2 image] And also to show currency when hovering as on [link / 3 image]

1
1292×342 6.48 KB

2
2245×353 4.53 KB

Screenshot_16.png
Screenshot_16.png281×337 6.53 KB

2

you can add a border by modifying the CSS.

.country-selector {
    border: 1px solid #000; 
    padding: 5px; 
}

To show currency on hover, you could add a hover effect in the CSS:

.country-selector:hover::after {
    content: attr(data-currency);
    display: block;
    position: absolute;
    background-color: #fff;
    border: 1px solid #000;
    padding: 2px 5px;
}

Make sure to apply these styles in your theme’s CSS file