Ir al contenido
charmotion
Empieza ahora

Cómo agregar animación a una tienda de Shopify

Por el equipo de Charmotion · Actualizado el

Ilustración de portada de la guía: Cómo agregar animación a una tienda de Shopify, con personajes de demostración de Charmotion

Shopify no tiene una sección integrada de Lottie o Rive, así que la mayoría de las tiendas agregan animación como video: una sección de video del tema, o contenido multimedia del producto en MP4, MOV o WebM. Para Lottie o Rive, sube el archivo en Contenido y luego Archivos, e insértalo en una sección de Liquid personalizado con el filtro file_url, si tu tema ofrece una.

Puntos clave

  • Shopify no tiene una sección nativa de Lottie o Rive.
  • El video es la vía sin código: las secciones de video del tema y el contenido multimedia del producto aceptan MP4, MOV y WebM.
  • Las secciones de Liquid personalizado, cuando el tema las ofrece, aceptan HTML y scripts.
  • {{ 'file' | file_url }} devuelve la URL de CDN de un archivo subido en Archivos.
  • Las apps agregan animación sin código, pero añaden scripts a todas las páginas donde se cargan.

¿Ya tienes un personaje o logo? Mira tu personaje en pantallas reales de una app: pantallas de splash, onboarding, carga y estado vacío. Es gratis, funciona en tu navegador y no sube nada.

¿Shopify tiene una sección de animación integrada?

No para archivos de animación. Los temas de Shopify no incluyen una sección de Lottie o Rive, y el editor de temas no tiene un elemento de animación. Lo que incluye cada tema varía, pero la mayoría de los temas Online Store 2.0 ofrecen:

  • una sección o bloque de video para video subido o alojado;
  • efectos integrados sutiles, como la aparición al hacer scroll, que activas en los ajustes del tema;
  • una sección de Liquid personalizado donde puedes pegar HTML y Liquid.

El centro de ayuda de Shopify lo plantea de forma condicional: "Si tu tema ofrece una sección de Liquid personalizado, es posible que puedas agregar el código de tu app en ella desde el editor de temas". Revisa la lista de secciones de tu tema antes de planificar en torno a ella.

Esto te deja tres caminos: video para todo lo que se reproduce de principio a fin, Custom Liquid para Lottie o Rive, y apps cuando quieres una interfaz sin código. Para una mascota de marca o un logo animado que solo se repite en loop, el video suele bastar.

Modo Motion: los píxeles originales del logo, comprimidos, estirados y doblados por un rig de huesos.

¿Cómo agregas una sección de video a tu tema?

En el editor de temas, elige Agregar sección y selecciona la sección de video de tu tema. Según el tema, reproduce un archivo subido o un enlace de YouTube o Vimeo. Para un loop decorativo, elige un archivo subido y activa la reproducción automática y el loop si la sección los ofrece; los reproductores alojados suelen mostrar sus propios controles y su marca.

Las páginas de producto funcionan aparte: el contenido multimedia del producto acepta archivos de video en formato .mp4, .mov o .webm, que aparecen en la galería del producto. Ese es el lugar para un giro del producto o una demo corta, no para decorar el sitio.

Exporta un MP4 cuadrado o vertical que coincida con el diseño de tu sección. Si el fondo de la sección es de un color sólido, renderiza la animación sobre ese mismo color para no necesitar transparencia. Un overlay transparente necesita dos archivos (.mov HEVC con alfa para Safari y WebM VP9 con alfa para los demás navegadores) en un solo elemento <video>, y las secciones de video del tema admiten un único archivo. Para ese caso, usa Custom Liquid.

Cada set de Charmotion incluye un MP4 de 1080×1080 de cada animación, un video de inicio 9:16 y vistas previas en GIF, todo con fondo sólido, lo que encaja con las secciones de video de los temas. El WebM y el MOV transparentes y el archivo .riv vienen con todos los planes de pago.

¿Cómo agregas Lottie o Rive con una sección Custom Liquid?

Sube el archivo de animación en el admin de Shopify, en Contenido y luego Archivos, y copia su nombre de archivo. En el editor de temas, agrega una sección Custom Liquid y haz referencia al archivo con el filtro file_url, que devuelve su URL de CDN.

dotLottie:

<dotlottie-wc src="{{ 'mascot.lottie' | file_url }}" autoplay loop
  style="width: 320px; height: 320px; margin: 0 auto"></dotlottie-wc>
<script type="module"
  src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>

Rive, reaccionando al agregar al carrito:

<canvas id="mascot" width="400" height="400"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.44.2"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "{{ 'mascot.riv' | file_url }}",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
</script>
<script>
  document.addEventListener("submit", (e) => {
    if (e.target.matches('form[action*="/cart/add"]')) {
      r.viewModelInstance?.trigger("success").trigger();
    }
  });
</script>

El ejemplo de Rive dispara una reacción success cuando se envía cualquier formulario de agregar al carrito. Los temas que agregan al carrito con JavaScript pueden no enviar el formulario de la forma habitual, así que pruébalo en tu tema y conéctate a sus eventos del carrito si hace falta.

El video con fondo transparente funciona igual: un <video autoplay muted loop playsinline> con la fuente .mov primero y la .webm después, cada una apuntando a file_url.

¿Puedes subir archivos .riv o .json a Shopify?

La página Archivos está pensada para cualquier archivo al que haga referencia tu tienda, y file_url sirve esos archivos a través del CDN de Shopify. En la documentación de Shopify que pudimos verificar no se indica si se acepta una extensión concreta como .riv o .lottie, así que primero intenta subirlo. Si Archivos lo rechaza, tienes dos opciones:

  • Aloja el archivo en otro lugar. Funciona cualquier CDN o almacenamiento de objetos que entregue el archivo por HTTPS con CORS habilitado; pon la URL completa en src.
  • Usa otro formato. Lottie .json es texto plano y dotLottie es un contenedor ZIP; una exportación en video evita la duda por completo.

Mantén ligeros los archivos de animación. Los archivos de Rive de personajes planos suelen pesar decenas de kilobytes, mientras que el runtime web de Rive es la descarga más grande, unos 648 KB comprimidos con brotli para WebGL2 según Rive. Cárgalo solo en las plantillas que muestran la animación, no en theme.liquid para todas las páginas.

Gráfico de barras con pesos de archivo reales de un set de 17 animaciones: Rive 40 KB frente a MP4 de 2.6 MB, WebM con fondo transparente de 6.1 MB, GIF de 8.0 MB y MOV HEVC de 9.4 MB
Pesos de archivo de un set real de Charmotion (Pip). Los pesos de video corresponden a una sola animación de 4 segundos.

¿Conviene usar una app?

Las apps de la Shopify App Store pueden agregar banners animados, reproductores de Lottie o efectos sin editar código. Tienen sentido cuando tu tema no tiene sección Custom Liquid o cuando personal no técnico necesita cambiar la animación más adelante.

Antes, evalúa los costos:

  • Rendimiento. Las apps suelen inyectar scripts en todas las páginas, no solo en la que tiene la animación. Revisa la velocidad de tu tienda antes y después de instalarlas.
  • Dependencia. El contenido creado dentro de una app suele desaparecer o romperse al desinstalarla.
  • Precio. Muchas apps de animación son suscripciones para algo que puede hacer una sección Custom Liquid de diez líneas.

Una regla práctica: usa las secciones de video del tema para loops, Custom Liquid para una o dos ubicaciones con Lottie o Rive, y una app solo cuando necesites una interfaz gestionada en muchas páginas.

Cómo agregar una animación de Rive o Lottie a un tema de Shopify

  1. Sube el archivo. En el admin de Shopify, ve a Contenido y luego Archivos, y sube los archivos .riv, .lottie o de video.
  2. Agrega una sección Custom Liquid. Abre el editor de temas en la plantilla que quieras, elige Agregar sección y selecciona Custom Liquid.
  3. Pega el embed. Agrega el markup del reproductor y el script, usando {{ 'file-name' | file_url }} como fuente.
  4. Conecta los eventos de la tienda. Dispara un trigger de Rive al agregar al carrito o en otros eventos, y prueba con el comportamiento del carrito de tu tema.
  5. Revisa la velocidad y los ajustes de movimiento. Confirma que el reproductor se carga solo en esa plantilla y que con movimiento reducido se muestra un fotograma estático.

Preguntas frecuentes

¿Puedo agregar Lottie a Shopify sin una app?

Sí, si tu tema tiene una sección Custom Liquid. Sube el archivo .lottie o .json en Contenido y luego Archivos, y pega en la sección un componente web de dotLottie que apunte a {{ 'file.lottie' | file_url }}, junto con el script del reproductor.

¿Shopify es compatible con Rive?

No de forma nativa. Los temas de Shopify no tienen una sección de Rive. Puedes insertar el runtime web de Rive y un archivo .riv en una sección Custom Liquid o en el código del tema, y usar su máquina de estados (state machine) para reaccionar a eventos de la tienda como agregar al carrito.

¿Qué formatos de video puedo subir a un producto de Shopify?

El contenido multimedia del producto acepta archivos de video en formato .mp4, .mov y .webm, que aparecen en la galería del producto junto a tus fotos. Para loops decorativos en la tienda, usa la sección de video de tu tema con un MP4 silenciado y en loop, o una sección Custom Liquid si necesitas transparencia.

Respuestas rápidas de esta guía

Fuentes

Guías relacionadas