🧭 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:
App Embed
App Blocks
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