Pular para o conteúdo
charmotion
Comece agora

Como adicionar animação a uma loja Shopify

Por equipe Charmotion · Atualizado em

Ilustração de capa do guia: Como adicionar animação a uma loja Shopify, com personagens de demonstração do Charmotion

A Shopify não tem seção nativa de Lottie ou Rive, então a maioria das lojas adiciona animação como vídeo: uma seção de vídeo do tema ou mídia de produto em MP4, MOV ou WebM. Para Lottie ou Rive, envie o arquivo em Conteúdo, depois Arquivos, e incorpore-o em uma seção Custom Liquid usando o filtro file_url, se o seu tema oferecer essa seção.

Principais pontos

  • A Shopify não tem seção nativa de Lottie ou Rive.
  • Vídeo é o caminho sem código: seções de vídeo do tema e mídia de produto aceitam MP4, MOV e WebM.
  • Seções Custom Liquid, quando o tema oferece, aceitam HTML e scripts.
  • {{ 'file' | file_url }} retorna a URL na CDN de um arquivo enviado em Arquivos.
  • Apps adicionam animação sem código, mas incluem scripts em todas as páginas em que carregam.

Já tem um personagem ou logo? Veja seu personagem em telas reais de app: telas de splash, onboarding, carregamento e estado vazio. É grátis, roda no navegador e não envia nada.

A Shopify tem uma seção de animação nativa?

Não para arquivos de animação. Os temas da Shopify não incluem seção de Lottie ou Rive, e o editor de temas não tem elemento de animação. O que cada tema inclui varia, mas a maioria dos temas Online Store 2.0 oferece:

  • uma seção ou bloco de vídeo para vídeo enviado ou hospedado;
  • efeitos sutis nativos, como revelar ao rolar, que você ativa nas configurações do tema;
  • uma seção Custom Liquid onde você pode colar HTML e Liquid.

A central de ajuda da Shopify coloca isso de forma condicional: "Se o seu tema oferecer uma seção Custom Liquid, talvez você consiga adicionar o código do app nela pelo editor de temas." Confira a lista de seções do seu tema antes de contar com ela.

Isso deixa três caminhos: vídeo para tudo que toca do início ao fim, Custom Liquid para Lottie ou Rive, e apps quando você quer uma interface sem código. Para um mascote ou logo animado que só fica em loop, vídeo costuma bastar.

Modo Motion: os pixels originais do logo, comprimidos, esticados e curvados por um rig de bones (ossos).

Como adicionar uma seção de vídeo ao seu tema?

No editor de temas, escolha Adicionar seção e selecione a seção de vídeo do seu tema. Dependendo do tema, ela reproduz um arquivo enviado ou um link do YouTube ou do Vimeo. Para um loop decorativo, escolha um arquivo enviado e ative a reprodução automática e o loop, se a seção oferecer essas opções; players hospedados costumam mostrar os próprios controles e a própria marca.

As páginas de produto funcionam à parte: a mídia do produto aceita arquivos de vídeo nos formatos .mp4, .mov ou .webm, que aparecem na galeria do produto. Esse é o lugar para uma rotação do produto ou uma demonstração curta, não para decorar o site.

Exporte um MP4 quadrado ou vertical que combine com o layout da seção. Se o fundo da seção for uma cor sólida, renderize a animação nessa mesma cor para não precisar de transparência. Uma sobreposição com fundo transparente precisa de dois arquivos (.mov HEVC com alfa para o Safari, WebM VP9 com alfa para os outros navegadores) em um único elemento <video>, e as seções de vídeo do tema aceitam um só arquivo. Nesse caso, use Custom Liquid.

Todo conjunto do Charmotion inclui um MP4 de 1080×1080 para cada animação, um vídeo de abertura 9:16 e prévias em GIF, todos com fundo sólido, o que combina com as seções de vídeo do tema. WebM e MOV transparentes e o arquivo .riv vêm com todos os planos pagos.

Como adicionar Lottie ou Rive com uma seção Custom Liquid?

Envie o arquivo da animação no admin da Shopify, em Conteúdo e depois Arquivos, e copie o nome do arquivo. No editor de temas, adicione uma seção Custom Liquid e referencie o arquivo com o filtro file_url, que retorna a URL dele na 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, reagindo ao adicionar ao carrinho:

<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>

O exemplo com Rive dispara uma reação success sempre que um formulário de adicionar ao carrinho é enviado. Temas que adicionam ao carrinho via JavaScript podem não enviar o formulário da forma padrão, então teste no seu tema e conecte-se aos eventos de carrinho dele, se necessário.

Vídeo com fundo transparente funciona do mesmo jeito: um <video autoplay muted loop playsinline> com a fonte .mov primeiro e a .webm em seguida, cada uma apontando para file_url.

Dá para enviar arquivos .riv ou .json para a Shopify?

A página Arquivos serve para qualquer arquivo que sua loja referencia, e o file_url entrega esses arquivos pela CDN da Shopify. A documentação da Shopify que conseguimos verificar não diz explicitamente se uma extensão específica, como .riv ou .lottie, é aceita, então tente o upload primeiro. Se Arquivos recusar, você tem duas opções:

  • Hospede o arquivo em outro lugar. Qualquer CDN ou armazenamento de objetos que entregue o arquivo por HTTPS com CORS ativado funciona; coloque a URL completa em src.
  • Use outro formato. O Lottie .json é texto puro e o dotLottie é um contêiner ZIP; uma exportação em vídeo elimina a questão por completo.

Mantenha os arquivos de animação pequenos. Arquivos Rive de personagens planos costumam ter dezenas de kilobytes, enquanto o runtime web do Rive é o download maior: cerca de 648 KB com compressão brotli para WebGL2, segundo o Rive. Carregue-o só nos templates que exibem a animação, e não em theme.liquid para todas as páginas.

Gráfico de barras com tamanhos reais de arquivo de um conjunto de 17 animações: Rive com 40 KB contra 2,6 MB em MP4, 6,1 MB em WebM com fundo transparente, 8,0 MB em GIF e 9,4 MB em MOV HEVC
Tamanhos de arquivo de um conjunto real do Charmotion (Pip). Os tamanhos de vídeo se referem a uma única animação de 4 segundos.

Vale a pena usar um app?

Apps da Shopify App Store podem adicionar banners animados, players de Lottie ou efeitos sem editar código. Eles fazem sentido quando seu tema não tem seção Custom Liquid ou quando pessoas sem perfil técnico precisam alterar a animação depois.

Pese os custos antes:

  • Performance. Apps costumam injetar scripts em todas as páginas, não só na que tem a animação. Verifique a velocidade da loja antes e depois de instalar.
  • Dependência. O conteúdo criado dentro de um app geralmente some ou quebra quando você o desinstala.
  • Preço. Muitos apps de animação cobram assinatura por algo que uma seção Custom Liquid de dez linhas resolve.

Uma regra prática: use seções de vídeo do tema para loops, Custom Liquid para uma ou duas inserções de Lottie ou Rive, e um app só quando precisar de uma interface gerenciada em muitas páginas.

Como adicionar uma animação Rive ou Lottie a um tema da Shopify

  1. Envie o arquivo. No admin da Shopify, vá em Conteúdo e depois Arquivos, e envie os arquivos .riv, .lottie ou de vídeo.
  2. Adicione uma seção Custom Liquid. Abra o editor de temas no template desejado, escolha Adicionar seção e selecione Custom Liquid.
  3. Cole o embed. Adicione o markup e o script do player, usando {{ 'file-name' | file_url }} como fonte.
  4. Conecte os eventos da loja. Dispare um trigger do Rive ao adicionar ao carrinho ou em outros eventos, e teste com o comportamento de carrinho do seu tema.
  5. Confira a velocidade e as configurações de movimento. Confirme que o player carrega só nesse template e que, com movimento reduzido, aparece um frame estático.

Perguntas frequentes

Dá para adicionar Lottie à Shopify sem app?

Sim, se o seu tema tiver uma seção Custom Liquid. Envie o .lottie ou .json em Conteúdo e depois Arquivos, e cole na seção um web component do dotLottie que aponte para {{ 'file.lottie' | file_url }}, junto com o script do player.

A Shopify tem suporte ao Rive?

Não nativamente. Não existe seção de Rive nos temas da Shopify. Você pode incorporar o runtime web do Rive e um arquivo .riv em uma seção Custom Liquid ou no código do tema, e usar a state machine dele para reagir a eventos da loja, como adicionar ao carrinho.

Quais formatos de vídeo posso enviar para um produto na Shopify?

A mídia do produto aceita arquivos de vídeo nos formatos .mp4, .mov e .webm, que aparecem na galeria do produto junto com suas fotos. Para loops decorativos na loja, use a seção de vídeo do tema com um MP4 sem som e em loop, ou uma seção Custom Liquid se precisar de transparência.

Respostas rápidas deste guia

Fontes

Guias relacionados