Store Locator Styling

This article outlines how to enter and adjust custom CSS styling code into the Store Locator app admin. You can use CSS code to make your Store Locator map page more branded.

 


 

 Pro-Tip

Making styling changes within Store Locator requires knowledge of CSS. If you are not comfortable with completing this on your theme, one of our partners could create this for you as a paid customization on your store. Please request this through HeyCarson via this form.

Setup

  1. From the Shopify admin, select Apps.
  2. Select Store Locator.
  3. Select Settings.
  4. Select Display Settings.

    select display settings

  5. Copy and paste this code into 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.

 


 

Troubleshooting

<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>
Was this article helpful?
2 out of 2 found this helpful