Store Locator Styling

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

  1. From Shopify's 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.

    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>

Next Steps:

Blog Posts:

Was this article helpful?
2 out of 2 found this helpful