Top

Store Locator Styling

To fix the styling of the Store Locator search bar, follow these steps:

  1. From "Shopify Admin", select Apps.

    select apps

  2. Select Store Locator.

    select store locator

  3. Select Settings.

    select settings

  4. Select Display Settings.

    select display settings

  5. Copy and paste this code in the "Page Header HTML" field: 
    <style>
    .main_search_label { 
     float: left; 
     margin-top: 8px;
    }
    
    .search_limit_label { 
     float: left; 
     margin-top: 8px;
     margin-right: 10px; 
     margin-left: -8px; 
    }
    
    .distance_label {
     float: left;
     margin-right: 10px;
     margin-top: 8px;
    }
    
    .search_bar button {
     margin-top: 8px;
    }
    
    .search_bar #within_distance {
     width: 105px;
    }
    
    .search_bar #limit {
     width: 75px;
    }
    
    </style>

    paste the code

  6. Select Save.

    Select Save

That's it! 

<style> 
.distance {
margin-top: 30px !important; 
}
 </style>
<style>
.distance { margin-top:25px }

 .main_search_label { 
 float: left; 
 margin-top: 8px;
 }
 .search_limit_label { 
 float: left; 
 margin-top: 4px;
 margin-right: 10px; 
 margin-left: -8px;
 }
 .distance_label {
 float: left;
 margin-right: 10px;
 margin-top: 4px;
 }
 .search_bar button {
 margin-top: 8px;
 }
 .search_bar #within_distance {
 width: 105px;
 }
 .search_bar #limit {
 width: 75px;
 }
.search_bar .main_search_bar {
  width: 50%;
  float: left;
}

.main_search_bar input {
  width: 43%;
}
body .search_bar .search_within_distance, body .search_bar .search_limit {
  margin-top: 8px;
  width: auto;
  padding-left: 20px;
}
body .search_bar button {
  height: 30px;
  margin-top: 4px;
  margin-left: 20px;
}
body .search_bar #within_distance, .search_bar #limit {
  height: 30px;
  border: 1px solid #ccc;
}

 </style>