Top

Store Locator Styling

If your store locator search bar looks a little off, there is a fix for that! :-)

  1. In the Store Locator app, click on the Display Settings menu

  2. Scroll Down to the Page Header HTML box
  3. Copy the code below and paste it in this area.
    <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>

If the distance is hidden behind the marker, add this code to the Page Header HTML.

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

Symmetry Theme

<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>
Have more questions? Submit a request