Como adicionar um slider de antes e depois na Shopify

Imagine que você está vendendo um kit de clareamento dental, um serviço de estética automotiva ou um pacote de presets do Lightroom. O que faz um cliente em potencial decidir comprar? Com produtos como esses, as pessoas querem mais do que promessas. Elas querem ver os resultados.

Um slider de antes e depois permite que os compradores visualizem exatamente pelo que estão pagando. Basta arrastar o controle, ver a transformação, e o valor do produto se vende sozinho. É uma das maneiras mais rápidas de gerar confiança e destacar seu produto em um mercado concorrido.

Se você vende na Shopify, há um detalhe: os temas padrão da plataforma não incluem um bloco de antes e depois de fábrica. Para adicionar um, você tem três opções: instalar um aplicativo da Shopify App Store, incorporar um widget gratuito sem código ou programar um slider personalizado nos arquivos do seu tema. Este guia apresenta os três métodos para que você possa começar a transformar visitantes em compradores.

Opção 1: instale uma extensão da Shopify App Store

Para a maioria dos lojistas, o primeiro instinto é abrir a Shopify App Store e pesquisar por “slider de antes e depois”. Você encontrará muitas opções, e a maioria é instalada como um bloco de aplicativo nativo. Depois de adicionar o aplicativo, o slider aparece diretamente no editor de temas como uma seção ou um bloco que você pode inserir em uma página de produto. Essa praticidade é o grande atrativo.

No entanto, há dois custos.

O primeiro é o que os donos de loja chamam de “taxa de aplicativos”. Quase todo aplicativo de slider funciona com assinatura mensal — normalmente entre US$ 1 e US$ 10 por mês por um único recurso interativo. Um slider aqui, um cronômetro de contagem regressiva ali, e um ano depois você está pagando um valor considerável por recursos que antes eram complementos de pagamento único. 

O segundo custo é a velocidade. Aplicativos visuais de front-end costumam injetar seu próprio JavaScript de terceiros em todas as páginas em que atuam. Instale alguns deles, e suas páginas de produto passam a carregar uma série de scripts externos, o que pode reduzir a velocidade da página — afetando diretamente tanto a sua taxa de conversão quanto o seu SEO.

Se você já avaliou esses prós e contras e ainda quer seguir pelo caminho do aplicativo nativo, veja como fazer a configuração:

1. Acesse a Shopify App Store, certificando-se de que está conectado à sua conta da Shopify. Pesquise por “slider de antes e depois”.

2. Selecione um aplicativo e clique em Instalar para adicioná-lo à sua loja.

3. Siga as instruções do aplicativo para configurá-lo. A maioria dos aplicativos exige que você configure o pagamento antes de usá-los, então será necessário fazer isso antes de adicioná-los ao seu tema.

Opção 2: use um widget de slider gratuito e sem código (recomendado)

Se você quer um slider de comparação personalizável e responsivo sem assinatura mensal, o melhor caminho é um widget incorporado gratuito. O Slider de Antes e Depois da Jotform foi criado exatamente para isso. Você o configura de forma visual, copia um único código de incorporação e o insere na sua página da Shopify. Não é necessário instalar nenhum aplicativo nem pagar mensalidades.

Como o widget é carregado a partir dos servidores da Jotform, em vez de injetar scripts no seu tema, o código da sua loja permanece enxuto, o que ajuda a preservar a velocidade da página. Você pode definir a revelação horizontal ou vertical; escolher a interação por arrastar, clicar ou passar o mouse; adicionar rótulos e legendas; e até empilhar até três pares de comparação em um carrossel compacto.

Veja como adicioná-lo:

1. Na página do Slider de Antes e Depois da Jotform, adicione suas imagens de antes e depois e escreva um rótulo e uma legenda para cada par. A Jotform obtém as imagens por URL, então, se suas fotos ainda não estiverem online, faça o upload delas para a Shopify em Configurações > Arquivos e copie o URL de cada imagem. Você também pode escolher a opção de upload de imagem se preferir adicionar as imagens diretamente na Jotform.

2. Personalize a direção de revelação, a posição do divisor, as cores e o tamanho para combinar com a sua loja.

3. Copie o código de incorporação gerado pela Jotform. Para isso, clique no botão Copiar código na aba Publicar.

4. No editor de temas da Shopify, abra o modelo de produto ou de página em que você quer exibir o slider, clique em Adicionar seção (ou Adicionar bloco) e escolha Liquid personalizado. Cole o código de incorporação e clique em Salvar.

Opção 3: edite o código do tema da Shopify

Se você prefere não usar nenhum aplicativo externo nem incorporação, pode criar um slider de comparação diretamente no seu tema. É o caminho com mais controle e menos sobrecarga, mas também é a opção mais fácil de quebrar.

A criação tem três partes: HTML para conter as duas imagens, CSS para sobrepô-las e recortá-las e JavaScript para mover o divisor conforme o visitante arrasta. O lugar mais simples para colocar tudo isso é um único bloco de Liquid personalizado, para que você não precise editar diretamente os arquivos de modelo.

Veja o que fazer:

1. Adicione a marcação com os URLs das suas duas imagens. A imagem de “antes” fica por cima e é recortada; a imagem de “depois” fica por baixo.

html<div class="ba-slider" id="baSlider">  <img src="BEFORE_IMAGE_URL" alt="Before" class="ba-img ba-before" id="baBefore">  <img src="AFTER_IMAGE_URL" alt="After" class="ba-img">  <div class="ba-handle" id="baHandle"></div></div>

2. Adicione o CSS. O posicionamento absoluto sobrepõe as imagens, o clip-path revela metade da imagem de “antes” no início, e o touch-action: none impede que a página role enquanto alguém arrasta o slider no celular.

html<style>  .ba-slider { position: relative; width: 100%; max-width: 600px;    aspect-ratio: 3 / 2; overflow: hidden; touch-action: none; user-select: none; }  .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }  .ba-before { clip-path: inset(0 50% 0 0); }  .ba-handle { position: absolute; top: 0; left: 50%; width: 2px; height: 100%;background: #fff; transform: translateX(-50%); cursor: ew-resize; }  .ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%;    width: 36px; height: 36px; border-radius: 50%; background: #fff;    transform: translate(-50%, -50%); box-shadow: 0 0 4px rgba(0,0,0,.4); }</style>

3. Adicione o JavaScript. Os eventos de ponteiro (pointer events) cobrem mouse e toque em um único fluxo, então o seletor acompanha tanto o arrastar do cursor quanto o deslizar do dedo. Salve e teste em um celular de verdade.

html<script>  const s = document.getElementById('baSlider');  const before = document.getElementById('baBefore');  const handle = document.getElementById('baHandle');  let dragging = false;  function setPos(x) {    const r = s.getBoundingClientRect();    let pct = Math.max(0, Math.min(100, ((x - r.left) / r.width) * 100));    before.style.clipPath = `inset(0 ${100 - pct}% 0 0)`;    handle.style.left = pct + '%';  }  s.addEventListener('pointerdown', e => { dragging = true; setPos(e.clientX); });  window.addEventListener('pointermove', e => { if (dragging) setPos(e.clientX); });  window.addEventListener('pointerup', () => { dragging = false; });</script>

Aviso importante: esta é a opção que dá mais dor de cabeça. Um colchete fora do lugar ou um estilo que “vaza” para o restante do seu tema pode quebrar o layout mobile ou, pior, interferir no fluxo de checkout. O comportamento de toque precisa ser testado em dispositivos reais, e não apenas no navegador do computador, e você é o responsável por cada bug e por cada correção futura. Se essa troca parece pior do que usar um widget, recomendamos a Opção 2.

Aprimore sua loja Shopify com widgets inteligentes e sem código

Vale a pena adicionar um slider de antes e depois, mas ele raramente é o único elemento interativo de que uma loja precisa. A Shopify conquista seu lugar entre os melhores criadores de sites de e-commerce em parte por ser tão fácil de estender, e os complementos certos são o que transforma uma loja funcional em uma loja bem acabada. A armadilha é pagar uma assinatura mensal separada por cada um deles, já que essas mensalidades corroem silenciosamente as margens que você se esforça para proteger.

É por isso que vale a pena optar por widgets gratuitos e hospedados. Ferramentas como o Slider de Antes e Depois da Jotform preservam seu lucro, mantêm suas páginas carregando rápido e o interesse dos seus clientes em alta. Além disso, o mesmo diretório oferece muito mais do que comparações de imagens.

Alguns outros widgets da Jotform que vale a pena conhecer para uma loja Shopify incluem:

• Um cronômetro regressivo para criar urgência em uma promoção relâmpago ou no lançamento de um produto
• Um widget de perguntas frequentes (FAQ) para responder às dúvidas mais comuns sobre o produto diretamente na página
• Verificação de idade para produtos com restrição etária
• Um botão de voltar ao topo para facilitar a navegação em páginas de produto longas

Explore o diretório de widgets para sites da Jotform completo para ver o que combina com a sua loja. Além disso, você pode conectar seus formulários e dados diretamente por meio da integração entre Jotform e Shopify. Experimente seu primeiro widget sem código gratuitamente e configure tudo em poucos minutos.