Occasionally, your theme may interfere with Store Locator's styling.
This article outlines how to fix the contents not lining up in Store Locator's header bar.
Setup
- From the Shopify admin, select Online Store.
- Select Actions.
- Select Edit code.
- Under Assets, select your theme's main CSS file.
Note: This will vary by theme and could be something like theme.scss.liquid.
- Copy and paste the following code at the bottom of the file:
.search_bar select, .search_bar input { display: inline !important; }
- Select Save.
Troubleshooting
If the width and padding of the input fields are also affected, adding the following CSS should fix it
.main_search_label {
width: auto !important;
}
.search_bar #within_distance {
width: 90px !important;
}
.search_bar #limit {
width: 62px !important;
}