La pestaña Animations añade movimiento a tu tienda: secciones que aparecen con una animación mientras los compradores se desplazan, e imágenes que se amplían cuando el ratón pasa por encima.
Dónde encontrarlo
Abre el constructor, haz clic en el icono del engranaje y abre la pestaña Animations. La sección se llama General animations.
Scroll reveal
Scroll reveal anima las secciones cuando entran en la pantalla. Cada sección reproduce su animación una vez por visita a la página. Las opciones:
- None: sin animación. Las secciones simplemente están ahí.
- Fade: el contenido aparece con un fundido.
- Slide up (predeterminado): el contenido sube un poco mientras aparece.
- Slide in: el contenido entra desde un lado mientras aparece.
- Zoom: el contenido crece ligeramente hasta su sitio.
El fondo de la sección aparece al instante y solo se mueve el contenido, así que la página nunca muestra huecos vacíos.
Qué partes se animan
- El encabezado y la barra de anuncios nunca se animan. Están en pantalla en cuanto se abre la página.
- En las cuadrículas de productos, de colecciones, en las reseñas y en las preguntas frecuentes, cada tarjeta o elemento se anima por separado en lugar de toda la sección, uno tras otro. En un diseño de carrusel, toda la sección se anima a la vez.
- Una sección de olas mantiene el fundido pero no se desliza, para que la ola siga unida a la sección de debajo.
Cuál elegir
Slide up va bien a la mayoría de las tiendas. Fade es el más suave. Zoom y Slide in llaman más la atención, así que encajan mejor en diseños divertidos o atrevidos que en diseños tranquilos.
Images zoom effect
Activa Images zoom effect para que las imágenes se amplíen un poco cuando el ratón pasa por encima. Funciona en las tarjetas de producto, las tarjetas de colección, las imágenes de producto en la página de producto y las imágenes de las reseñas. Reacciona al ratón, así que los compradores que usan el móvil normalmente no lo ven.
Tareas habituales
- Dar a mi tienda un aire más tranquilo: pon Scroll reveal en Fade o en None.
- Desactivar todo el movimiento: pon Scroll reveal en None y desactiva Images zoom effect.
- Hacer que las fotos de producto parezcan interactivas: activa Images zoom effect.
Solución de problemas
- No veo la animación en el constructor. Scroll reveal está desactivado dentro del constructor para que puedas editar sin esperar. Publica y abre tu tienda en vivo para verla.
- Algunos visitantes nunca ven las animaciones. Cuando un visitante ha pedido a su dispositivo que reduzca el movimiento, la tienda muestra todas las secciones en su sitio sin animación. Es a propósito, por comodidad y accesibilidad.
- El zoom no funciona. Comprueba que estás en un ordenador con ratón y que la imagen es de uno de los tipos indicados arriba.
Bueno saberlo
Los ajustes de animación pertenecen al mercado que estás editando y se aplican a todas sus páginas. Los cambios se publican cuando haces clic en Publish. Si cambias de idea, deshaz el cambio en el constructor. Consulta Atajos, deshacer y rehacer.