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 - document.getElementById('shopify-section-header').scrollHeight) + '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 > Add New Template
3. Create a Page Template, change it to Liquid and call it page.Store Locator

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 - document.getElementById('shopify-section-header').scrollHeight) + '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