- 🧭 El indicador de carga ya está disponible para la aplicación de localización de tiendas
- 💡 Resumen
- ⚙️ Cómo funciona la actualización
- 🀏 Configuración recomendada
- 🧩 Instrucciones para tiendas tradicionales
- Paso 1: Editar el archivo CSS
- Paso 2: Añadir el código de marcado del spinner
- 🧰 ¿Necesitas ayuda?
- ✅ Resumen
Cuando se cargue el localizador de tu tienda, aparecerá ahora una animación giratoria, lo que proporcionará una experiencia de usuario más fluida y pulida.
Actualizado hace más de dos semanas
🧭 El indicador de carga ya está disponible para la aplicación de localización de tiendas #
Categoría: Actualizaciones de productos
Visibilidad: Público
Autor: Equipo de asistencia
Etiquetas: store locator, loading spinner, app embed, app blocks, legacy theme, custom code, shopify, theme update
🟒 Resumen #
Hemos lanzado una actualización para mejorar la experiencia de carga de la aplicación «Localizador de tiendas».
Ahora, cuando se cargue el localizador de tu tienda, aparecerá una animación giratoria, lo que proporcionará una experiencia de usuario más fluida y pulida.
Nuestra aplicación ya es compatible con esta función en tres tipos de integración:
- Incorporar aplicación
- Bloqueos de aplicaciones
- Instalaciones de fragmentos heredados
⚙️ Cómo funciona la actualización #
Para la mayoría de los comerciantes que utilizan App Embed o App Blocks, el indicador de carga se ha implementado automáticamente, sin necesidad de configuración adicional.
Sin embargo, las tiendas más antiguas (aquellas que aún utilizan archivos de fragmentos de código insertados manualmente) tendrán que añadir manualmente unas cuantas líneas de código para activar el indicador de carga.
Si no estás seguro de qué versión utiliza tu tienda, nuestro equipo de desarrollo puede ayudarte a verificarlo y a implementarlo.
🀽 Configuración recomendada #
Recomendamos encarecidamente pasar a App Embed o App Blocks, ya que estos métodos son más estables, se actualizan automáticamente y no requieren modificaciones manuales del tema.
Esto garantiza que puedas disfrutar de las últimas funciones y mejoras de diseño sin tener que modificar el código directamente.
🧩 Instrucciones para tiendas tradicionales #
Si sigues utilizando una instalación antigua de snippets, sigue estos pasos para añadir el indicador de carga manualmente.
Paso 1: Editar el archivo CSS #
Ruta del archivo:
~/assets/sca.storelocator.css
Fragmento de código:
/* 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 */
Paso 2: Añadir el código de marcado del spinner #
Ruta del archivo:
~/sections/sca-storelocator.liquid
Fragmento de código:
<!-- Spinner Loading --> <div id='scasl-loading-spinner' class='scasl-loading-overlay'> <div class='scasl-spinner-container'> <div class='scasl-spinner'></div> </div> </div>
🧰 ¿Necesitas ayuda? #
Si utilizas una configuración de fragmentos heredada y necesitas ayuda para añadir esta función, nuestro equipo de desarrollo estará encantado de ayudarte.
Ponte en contacto con nosotros a través de «Soporte» → «Asistencia para desarrolladores» y te guiaremos paso a paso para que actualices tu tema de forma segura.
✅ Resumen n. º
| Tipo de tienda | Configuración del spinner | Notas |
| Incorporar aplicación | ✅ Automático | No es necesario hacer nada |
| Bloqueos de aplicaciones | ✅ Automático | Recomendado |
| Fragmento heredado | ⚙️ Se requiere configuración manual | El equipo de desarrollo puede ayudar |
Palabras clave: store locator, loading spinner, theme customization, shopify app blocks, app embed, legacy theme, developer support, css, liquid, manual edit
