Loading Spinner Now Available for Store Locator App

When your store’s locator loads, a spinner animation will now appear, creating a smoother and more polished user experience.

Updated over 2 weeks ago

🧭 Loading Spinner Now Available for Store Locator App #

---

Category: Product Updates
​Visibility: Public
​Author: Support Team
​Tags: store locator, loading spinner, app embed, app blocks, legacy theme, custom code, shopify, theme update

---

💡 Overview #

We’ve released an update to improve the loading experience for the Store Locator app.
When your store’s locator loads, a spinner animation will now appear, creating a smoother and more polished user experience.

Our app now supports this feature across three integration types:

1. App Embed
2. App Blocks
3. Legacy snippet installs

---

⚙️ How the Update Works #

For most merchants using App Embed or App Blocks, the spinner has been automatically implemented — no additional setup required.

However, legacy shops (those still using manually inserted snippet files) will need to manually add a few lines of code to enable the loading spinner.

If you’re unsure which version your shop uses, our dev team can help you verify and assist with implementation.

---

🚀 Recommended Setup #

We strongly recommend switching to App Embed or App Blocks, as these methods are more stable, update automatically, and don’t require manual theme edits.

This ensures you receive the latest features and styling improvements without editing code directly.

---

🧩 Instructions for Legacy Stores #

If you’re still using a legacy snippet installation, follow these steps to add the spinner manually.

---

Step 1: Edit the CSS File #

File path:
​~/assets/sca.storelocator.css

Code snippet:

/* Spinner Loading Styles */ .scasl-loading-overlay {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(255, 255, 255, 0.9);    display: none;    justify-content: center;    align-items: center;    z-index: 999999;    transition: opacity 0.3s ease-in-out; }  .scasl-loading-overlay.show {    display: flex; }  .scasl-spinner-container {    text-align: center; }  .scasl-spinner {    width: 50px;    height: 50px;    border: 4px solid #f3f3f3;    border-top: 4px solid #2b66a1;    border-radius: 50%;    animation: scasl-spin 1s linear infinite;    margin: 0 auto 20px; }  @keyframes scasl-spin {    0% { transform: rotate(0deg); }    100% { transform: rotate(360deg); } }  .scasl-loading-overlay.hidden {    opacity: 0;    pointer-events: none; }  /* Mobile responsive spinner */ @media screen and (max-width: 768px) {    .scasl-spinner-container {        padding: 20px;        margin: 20px;    }     .scasl-spinner {        width: 40px;        height: 40px;    } }  .scasl-spinner-container div:empty {    display: block !important; }  /* End */

---

Step 2: Add the Spinner Markup #

File path:
​~/sections/sca-storelocator.liquid

Code snippet:

<!-- Spinner Loading --> <div id='scasl-loading-spinner' class='scasl-loading-overlay'>   <div class='scasl-spinner-container'>     <div class='scasl-spinner'></div>   </div> </div>

---

🧰 Need Help? #

If you’re using a legacy snippet setup and need assistance adding this feature, our development team is happy to help.
Please reach out via Support → Developer Assistance, and we’ll walk you through updating your theme safely.

---

✅ Summary #

Store Type	Spinner Setup	Notes
App Embed	✅ Automatic	No action required
App Blocks	✅ Automatic	Recommended
Legacy Snippet	⚙️ Manual setup required	Dev team can assist

---

Keywords: store locator, loading spinner, theme customization, shopify app blocks, app embed, legacy theme, developer support, css, liquid, manual edit