Store Locator Installation

1. Go to your theme file and paste this script. Notice you should use your subdomain

   <script>
   (function(d,s,i){
   if(d.getElementById(i)){return;}
   var t=d.createElement(s);t.id=i;
   t.rel='stylesheet';
   t.href='https://{yoursubdomain}.shipearlyapp.com/widgets/dist/shipearly-widgets.min.css';
   d.head.appendChild(t);
   })(document,'link','shipearly-widgets-css');
   (function(d,s,i){
   if(d.getElementById(i)){return;}
   var t=d.createElement(s);t.id=i;
   t.src='https://{yoursubdomain}.shipearlyapp.com/widgets/dist/shipearly-widgets.min.js';
   var f=d.getElementsByTagName(s)[0];
   f.parentNode.insertBefore(t,f);
   })(document,'script','shipearly-widgets-js');
   </script>

2. Save your theme
3. Create a new page for the Store Locator or note existng page of existing store locator if replacing

4. Paste the code below onto the page or use a template (Shopify customers see below) 

   <div id="dealer-locator-container" style="min-height: 500px;">
     <div class="loading-dialog">
       <div class="spinner-border" role="status">
         <span class="sr-only">Loading…</span>
       </div>
     </div>
   </div>
   
   <script>
   (function() {
     const client_id = 'public_Insert_your_API_key_here';
   
     window.addEventListener('load', function() {
       const container = document.getElementById('dealer-locator-container');
       container.replaceChildren();
       container.style.height = (window.innerHeight - 200) + 'px';
   
       ShipEarly.DealerLocator({ client_id }).render('#dealer-locator-container', 'iframe');
     });
   })();
   </script>

5. Create an API Key for the Store Locator on API Settings
6. Copy the public API Key and replace with your API key in the bold section of snippet above
7. Save your page

For Shopify Customers:

1. Click Online Store > Edit Code
2. Under Templates > Click the icon Add New File
3. Create a File name such as page.Store_Locator.liquid
4. Add the following snippet into your liquid template: 

<div id="dealer-locator-container" style="min-height: 500px;">
  <div class="loading-dialog">
    <div class="spinner-border" role="status">
      <span class="sr-only">Loading…</span>
    </div>
  </div>
</div>

<style>
.wrapper {
  max-width: 100%;
}
</style>

<script>
(function() {
  const client_id = 'public_Insert_your_API_key_here';

  window.addEventListener('load', function() {
    const container = document.getElementById('dealer-locator-container');
    container.replaceChildren();
    container.style.height = (window.innerHeight - 200) + 'px';

    ShipEarly.DealerLocator({ client_id }).render('#dealer-locator-container', 'iframe');
  });
})();
</script>

5. Make sure you replace your public client_id with the bold above

6. Save the liquid template

7. Exit Edit Code

8. Select Pages

9. Select the page you created as a Store Locator

10. For theme template select the Store Locator template you created

11. Click Save