Como adicionar controles deslizantes à sua loja da Shopify e aproveitá-los ao máximo (+ Insights de proprietários de empresas)

Mais é mais . Pelo menos quando se trata de compradores de comércio eletrônico.

Os clientes querem ler comentários, ver produtos de todos os ângulos imagináveis ​​e explorar novos descontos e ofertas antes mesmo de pensar em clicar no botão “Adicionar ao carrinho”.

Mas se você colocar todas essas informações em seu site, corre o risco de sobrecarregá-las. É por isso que os controles deslizantes são tão úteis - você pode acessar os acionadores de conversão sem criar uma página longa se afogando em imagens e textos.

O que são Sliders na Shopify?

Um controle deslizante é essencialmente uma apresentação de slides em sua loja da Shopify. Pode ser automatizado (começa a jogar automaticamente com base em um conjunto de regras) ou manual (só se move quando os usuários clicam nele).

Aqui estão alguns dos tipos mais populares de controles deslizantes com exemplos:

• Controle deslizante de depoimentos – Um carrossel de comentários e imagens de clientes é uma ótima prova social

QuadLock usa um controle deslizante de depoimento como este em todas as suas páginas de produtos. Os usuários podem filtrar as análises de produtos clicando na seta para a esquerda ou para a direita.

O Laird Superfood também usa um controle deslizante de depoimentos na página inicial para mostrar as melhores avaliações dos clientes.

• Controle deslizante de logotipo – Para empresas B2B, exibir as empresas com as quais trabalham envia todos os sinais certos para possíveis compradores.

A Beauty Solutions usa um controle deslizante de logotipo manual na parte inferior de sua página inicial para compartilhar os nomes dos clientes que atendem.

• Controle deslizante de imagens do produto – Mostre seus produtos de todos os ângulos e escreva os melhores atributos do produto como legendas para essas imagens.

Os boardshorts da CriticalSlide têm um controle deslizante manual da imagem do produto na página do produto. Os troncos são mostrados de frente, de lado e de trás. Há também algumas fotos de close-ups do material e design e uma imagem da modelo usando.

• Controle deslizante de produto popular – Muitas opções podem sobrecarregar os clientes. Mostre a eles o que é popular entre outros clientes e você facilita a decisão.

A Proper mostra seus produtos mais populares neste carrossel manual “Compre nossos looks do Instagram”. Cada slide mostra o produto com informações sobre o preço e um link para ele no site.

A eFashion Paris usa um controle deslizante manual para mostrar as novidades e os mais vendidos e compartilha um link para essas respectivas categorias.

• Controle deslizante de banner – Compartilhe descontos, ofertas ou novos produtos da loja nesses banners.

A 49th Parallel usa este controle deslizante de banner manual de 2 slides em sua página inicial para chamar a atenção para o

• mais vendidos filtra cafés e
• história dos grãos de origem sustentável.

O controle deslizante de banner manual da Beard & Blade tem links para produtos mais vendidos e incentiva os visitantes a lerem o blog.

Como adicionar controles deslizantes à sua loja Shopify

Dependendo do app da Shopify que você deseja instalar, as etapas exatas para adicionar controles deslizantes à sua loja podem ser diferentes, mas aqui está um tutorial rápido e básico:

Etapa 1: duplique seu tema ao vivo

Faça login na sua loja da Shopify. Vá para Loja Online -> Temas.

Ao lado do Tema ao vivo, clique no botão “Ações” e escolha “Duplicar”. Isso criará um backup do seu tema da Shopify caso você cometa um erro que possa afetar negativamente sua loja.

Etapa 2: adicionar uma seção de controle deslizante personalizada à loja da Shopify

O aplicativo deslizante da Shopify que você instala pode exigir a colagem de algum código personalizado em seu site. Para isso, ao lado do Tema ao vivo, clique no botão “Ações” e escolha “Editar código”.

Em seguida, expanda a categoria “Seções” e clique em “Adicionar uma nova seção”

Dê um nome ao seu controle deslizante e clique em “Criar seção” e você pode colar o código personalizado.

Etapa 3: acesse theme.liquid

Role para cima para clicar em theme.liquid. Pode ser necessário colar código adicional aqui.

Etapa 4: personalize seus controles deslizantes

Volte para Temas e clique em “Personalizar” ao lado do Tema ao vivo.

Encontre a seção que você criou e agora você pode personalizar os controles deslizantes em sua loja da Shopify. Se você instalou um aplicativo de controle deslizante de imagem, tudo o que você precisa fazer nesta etapa é escolher a coleção que deseja destacar.

Se você preferir tutoriais em vídeo, assista a este vídeo da EcomExperts, onde eles explicam como adicionar um controle deslizante de produto em destaque à sua loja Shopify.

Principais aplicativos de controle deslizante da Shopify em 2022: principais recursos, análises de usuários

#1. Carrossel deslizante da imagem do produto por POWR.io

Preço : Grátis - $ 89,99/mês

Classificação : 4,2/5 (243 comentários)

Este aplicativo permite que você crie sliders e carrosséis de produtos com legendas, texto, botões, vídeos, bordas e proteção contra cópia.

Características principais:

• Diferentes estilos de transição deslizante para escolher
• Escolha entre controle deslizante ou carrossel
• Design altamente personalizável
• Responsivo a dispositivos móveis em qualquer dispositivo
• Suporta texto em todos os idiomas

Revisão positiva

Revisão crítica

#2. Controle deslizante de banner da Secomapp

Preço : Grátis - $ 39,99/mês

Classificação : 4,5/5 (152 comentários)

Embora o aplicativo seja chamado de controle deslizante de banner, você pode criar diferentes tipos de controles deslizantes altamente personalizáveis ​​com código. Banner Slider é fácil de instalar e configurar e oferece gerenciamento de back-end amigável.

Características principais:

• Crie mais de 40 tipos diferentes de controles deslizantes
• Adicionar vídeos ao controle deslizante
• Código incorporado para mostrar o controle deslizante no front-end
• Controle deslizante de visualização antes de publicar
• Recurso de upload em massa
• Definir data de início e término do banner
• Suporta modo de largura total

Revisão positiva

Revisão crítica

#3. Controle deslizante de imagem enorme

Preço : Grátis - $ 16,99/mês

Classificação : 4,9/5 (116 comentários)

Este aplicativo permite que você crie controles deslizantes de banner, controles deslizantes de imagem, carrosséis e logotipos com texto e comentários em suas imagens e adicione um link para cada imagem no controle deslizante.

Características principais:

• Responsivo a dispositivos móveis
• Controle a velocidade do controle deslizante
• Carregar várias fotos de uma só vez
• Adicionar texto e links

Revisão positiva

Revisão crítica

#4. Controle deslizante mestre - controle deslizante de imagem

Preço : Gratuito

Classificação : 3,8/5 (73 comentários)

Este aplicativo gratuito permite que você crie controles deslizantes personalizados ilimitados sem nenhum conhecimento de codificação necessário. Você pode usar um dos 5 modelos ou começar do zero.

Características principais:

• Suporta texto alternativo de imagem
• Camadas ilimitadas
• Controle deslizante responsivo para qualquer dispositivo
• Adicione botões de sobreposição, HTML e texto personalizados
• Agende a data de início e término do seu controle deslizante
• Escolha entre controle deslizante ou carrossel

Revisão positiva

Revisão crítica

#5. Apresentação de slides de depoimentos de clientes por POWR.io

Preço : Grátis - $ 89,99/mês

Classificação : 2,7/5 (35 comentários)

Este aplicativo fácil de usar permite que você mostre depoimentos de clientes, avaliações, fotos, descrições e vídeos.

Características principais:

• Depoimentos em vídeo de reprodução automática
• Destaque suas melhores avaliações de produtos
• Controlar looping, transição de slides, velocidade e auto-slide
• Design altamente personalizável
• Responsivo a dispositivos móveis em qualquer dispositivo
• Suporta texto em todos os idiomas

Revisão positiva

Revisão crítica

#6. Ada IQ: Galeria de slider de imagens

Preço : 2,99/mês (teste gratuito de 10 dias)

Classificação : 5/5 (23 comentários)

Este aplicativo deslizante de imagem da Shopify sem código permite que você crie sliders e apresentações de slides ilimitados para mostrar seus produtos mais vendidos.

Características principais:

• Fácil personalização
• Adicione a mesma apresentação de slides em várias páginas de destino
• Atualizações futuras e novos recursos
• Vincule imagens a qualquer página da sua loja

Revisão positiva

Revisão crítica

No momento, não há análises críticas do aplicativo. Os usuários mencionam encontrar problemas com o aplicativo que são resolvidos pelo suporte em todas as instâncias.

#7. Controle deslizante responsivo de várias páginas

Preço : 4,99/mês (teste gratuito de 7 dias)

Classificação : 4,2/5 (8 comentários)

Este aplicativo fácil de usar permite que você crie controles deslizantes horizontais ou verticais em diferentes designs e adicione vários a uma única página.

Características principais:

• Responsivo a dispositivos móveis em qualquer dispositivo
• Gera automaticamente códigos de acesso para colar em qualquer página
• Fácil de pesquisar e filtrar categorias e itens
• Crie controles deslizantes com botões, números e miniaturas

Revisão positiva

Revisão crítica

No momento, ainda não há análises críticas do aplicativo.

#8. Revolução deslizante

Preço : $ 6,99 - $ 89/mês (teste gratuito de 7 dias)

Classificação : 4,9/5 (44 comentários)

Este aplicativo permite que você crie todos os tipos de controles deslizantes e transmita conteúdo de mídia social totalmente responsivo e personalizável.

Características principais:

• Conteúdo social Steam do Facebook, Twitter, Flickr e Instagram
• Carregar vídeo do YouTube ou Vimeo
• Controle total sobre estilos, transições e animações
• Otimizado para todos os dispositivos
• Tamanhos de controle deslizante de largura total, tela cheia e responsivo automático
• Editor de arrastar e soltar WYSIWYG

Revisão positiva

Revisão crítica

Sliders versus carrosséis: o que você precisa saber?

Sliders e carrosséis são a mesma coisa em essência, exceto por uma diferença - os carrosséis mostram muitos slides ao mesmo tempo.

Você pode usar carrosséis para mostrar logotipos, depoimentos ou produtos mais vendidos aos clientes.

Quando usar carrosséis

Use carrosséis quando quiser que o conteúdo mais visível ocupe o mesmo espaço na sua página, aumentando a probabilidade de os compradores o verem.

Aqui estão alguns prós e contras que você deve ter em mente:

Não é

• Não use um carrossel na seção principal da página inicial, pois isso pode confundir os visitantes.
• Não empurre informações para usuários que não os beneficiem, apenas a empresa.
• Não deixe que se torne um lugar para despejar conteúdo. Se você não pode justificar seu uso, não tenha um.

Fazer:

• Use um carrossel quando as pessoas esperam. Por exemplo, para mostrar avaliações de clientes, produtos mais vendidos ou novidades.
• Use um carrossel quando isso economizar tempo, esforço e cliques das pessoas.
• Use-o para comparar dois produtos diferentes.

Práticas recomendadas para o uso de carrosséis

• Use um carrossel manual para que os usuários estejam no controle
• Use setas ou navegação por pontos para permitir que os usuários naveguem
• Mantenha o texto nesses carrosséis curto e claro
• Verifique se o carrossel pode ser deslizado da mesma maneira em dispositivos móveis

Otimizando controles deslizantes em sua loja da Shopify: (+Prós, contras e insights de proprietários de empresas

Pedimos a vários proprietários de empresas que compartilhassem sua experiência em primeira mão com controles deslizantes e se eles são úteis ou não.

Sliders funcionam?

Vamos primeiro examinar os controles deslizantes de duas perspectivas: desempenho e persuasão.

• Desempenho : os bots podem rastrear sliders e entendê-los? Eles realmente deixam os sites lentos?
  
  Sim e não. Os bots podem rastrear controles deslizantes, por isso é importante torná-los amigáveis ​​para SEO e nem todos os aplicativos deslizantes que você instala têm um grande impacto na velocidade do site.
• Persuasão: os controles deslizantes fazem um ótimo trabalho para levar as pessoas a fazer uma compra?
  
  A melhor maneira de saber com certeza se eles funcionam para você é testá-los A/B. Primeiro, teste duas versões — uma com controle deslizante e outra sem.

Substituir um controle deslizante por uma promoção de imagem estática do produto mais vendido e botões com estados de foco melhorou as conversões em 30% (com uma significância estatística de 98%).

Este teste fez o que eu pensei que faria, mas a chave aqui é ter evidências mais diretas para ajudar a orientar esse cliente e outros para longe dos controles deslizantes em sua página inicial. Eu não sou o único que teve essa experiência e li muitos estudos de caso com resultados semelhantes.

O problema é que as pessoas percebem os controles deslizantes como se fossem anúncios, portanto, não interagem com eles, especialmente se não houver maneiras de navegar facilmente no controle deslizante ou se a navegação estiver escondida.

Dica : remova os controles deslizantes na área principal de promoção da página inicial e incentive os clientes a usar isso para contar sua história ou promover produtos ou serviços importantes de alta venda. Outra grande lição dessa experiência é que o teste A/B é muito mais atraente para os clientes do que falar sobre “melhores práticas” ou encorajar ideias com base em outras coisas que li.

Tim Brown, 5 testes A/B que mudaram a maneira como eu projeto sites

O que os empresários têm a dizer sobre controles deslizantes?

Recentemente, adicionei um controle deslizante de imagem à minha loja Shopify e fiquei muito feliz com os resultados. Os controles deslizantes de imagem são uma ótima maneira de exibir produtos, destacar ofertas especiais e adicionar interesse visual à sua loja.

  Luke Lee, cofundador, everwallpaper.co.uk

Para mim, os controles deslizantes de imagem podem ser eficazes nas lojas Shopify. Quando usados ​​corretamente, eles podem ajudar a destacar determinados produtos ou recursos e facilitar para os clientes saberem mais sobre o que a loja tem a oferecer.

Burak Ozdemir, Fundador, setalarmonline.com

Sim, os controles deslizantes de imagem funcionam – até certo ponto. Os controles deslizantes de imagem funcionam melhor quando há um grande catálogo de produtos e você mostra várias variantes do mesmo modelo na página.

Theola Tinny, cofundadora da VinPit

Testei diferentes tipos de Sliders em meus clientes da Shopify ao longo dos anos. Achamos que os Sliders com melhor desempenho dão algum tipo de dica de que há mais para ver. Um cliente em particular se saiu muito bem ao colocar “Deal #1 of 3” em seu primeiro Slider, então, é claro, o Slider #2 e o Slider #3 com ainda mais ofertas.

Jeff Moriarty, Ninja de Marketing Digital da JMoriarty Marketing

Sliders podem sair pela culatra?

Sim, os controles deslizantes podem sair pela culatra e aqui está o que os empresários querem que você saiba:

Não recomendo usar nenhum tipo de controle deslizante de imagem ou carrossel em sua loja da Shopify. Eles causam confusão e podem sobrecarregar os visitantes que chegam à sua loja. Quando eles registram uma imagem, ela já é movida para a próxima. Além disso, dar a seus clientes muitas opções pode distraí-los do principal motivo pelo qual eles vieram à sua loja em primeiro lugar. Dê aos seus visitantes um caminho direto para chegar lá, sem distrações. As opções são geralmente o subproduto de uma estratégia ruim.

Uma prática mais amigável é utilizar uma imagem atraente que os lembre de que chegaram ao lugar certo. Os plug-ins deslizantes também podem diminuir drasticamente o tempo de carregamento da página e criar uma experiência de usuário ruim. Eles são difíceis de projetar e têm uma chance maior de não responder bem em diferentes dispositivos e navegadores.

Emily Amor, gerente de SEO, dardos digitais

Os usuários tendem a não interagir com imagens deslizantes e muitas vezes as ignoram, pois assumem que são anúncios. Sliders parecem oferecer a promessa de poder entregar várias mensagens na mesma página, mas quase sempre descobri que focar em uma única mensagem e call to action (CTA) é muito mais eficaz.

Dean Kaplan, https://www.kaplancollectionagency.com

O pior problema do Slider que encontrei com um dos meus clientes é quando eles não compactavam as imagens e carregavam Sliders com mais de 50 MB cada. Quase ninguém os viu, porque eles não carregavam no momento em que o visitante rolava para baixo ou acessava outra página da web. Eca!

Jeff Moriarty, Ninja de Marketing Digital da JMoriarty Marketing

Práticas recomendadas a serem seguidas ao otimizar controles deslizantes

Aqui está o que você deve saber ao usar controles deslizantes:

• Certifique-se de que seu controle deslizante seja carregado rapidamente
  
  Imagens de alta qualidade também tendem a ser arquivos grandes que podem diminuir a velocidade do seu controle deslizante. Certifique-se de escolher o tamanho correto das imagens, dependendo do tamanho do seu controle deslizante.
  
  Além de um certo ponto, os usuários não podem dizer a diferença na qualidade da imagem, então não tenha medo de compactar seus arquivos. Você também pode carregar seu controle deslizante lentamente e reduzir o número de estilos e fontes para que não diminua o tempo de carregamento.
• Mostre o slide mais importante primeiro
  
  Qual é a principal razão pela qual as pessoas deveriam comprar de você? Use seu USP para atrair visitantes para o controle deslizante para que eles fiquem mais inclinados a percorrer o conteúdo.
• Use uma cópia envolvente em todos os slides
  
  Todos os seus slides são oportunidades para você envolver os visitantes e usar diferentes ângulos de venda para convertê-los. Adicione títulos que abordem benefícios e pontos problemáticos e CTAs baseados em ação.
• Tenha menos de 5 slides
  
  Mas não exagere nos slides. Você não quer sobrecarregar os visitantes com muitas opções e não fazer uma compra devido à paralisia da análise. Seja intencional com seu controle deslizante e tenha um forte PORQUE você o incluiu em primeiro lugar.
• Defina um tempo de rotação lento
  
  Dê aos clientes em potencial tempo suficiente para digerir seu conteúdo. Muito rápido e eles perderão o conteúdo e terão que esperar o slide reaparecer novamente. Muito lento e eles estarão em agonia esperando o próximo slide aparecer. Rich Page sugere definir um tempo de rotação de 3 segundos.
• Girar automaticamente seus slides
  
  Mesmo se você usar um controle deslizante automático, não poderá ter certeza de que os visitantes esperarão pacientemente que toda a apresentação de slides passe. Dê aos visitantes a opção de navegar pelo controle deslizante por meio de setas ou navegação por pontos.
• Use um layout assimétrico para carrosséis
  
  Se você está considerando um carrossel, tente usar um layout assimétrico para suas imagens. Tanto o Airbnb quanto o Booking.com usaram testes A/B e chegaram a layouts de imagem quase semelhantes – uma imagem grande de “recurso” com imagens menores (quase como miniaturas) ao redor delas.

Como os empresários usam controles deslizantes de maneira otimizada?

Primeiro, certifique-se de que as imagens usadas sejam de alta qualidade e tenham o tamanho adequado. Imagens borradas ou pixeladas prejudicarão a aparência profissional da sua loja. Em segundo lugar, evite usar muitos slides – três ou quatro geralmente são suficientes. Muitos slides podem sobrecarregar os visitantes e dificultar a localização das informações que procuram. Por fim, certifique-se de que o controle deslizante esteja posicionado em uma área facilmente visível da página – de preferência próximo ao topo.

Luke Lee, cofundador, everwallpaper.co.uk

Também é importante atualizar regularmente as imagens em seu controle deslizante, pois imagens obsoletas podem rapidamente se tornar desatualizadas e menos eficazes em cumprir seu propósito de atrair a atenção.

Além disso, você deve certificar-se de que seu controle deslizante seja fácil de navegar, com botões Avançar e Anterior claros para que os usuários possam percorrer facilmente suas ofertas. Por fim, pode ser útil incluir texto relevante junto com cada imagem para ajudar os leitores a entender do que se trata cada imagem.

Burak Ozdemir, Fundador, setalarmonline.com

Se os controles deslizantes forem usados, eles devem ser estáticos. Controles deslizantes automáticos que mudam as imagens a cada poucos segundos geralmente se movem muito rápido para alguns usuários e muito lento para outros. É muito melhor ter controles deslizantes estáticos com botões de navegação claros para garantir que o usuário esteja sempre no controle.

Dean Kaplan, https://www.kaplancollectionagency.com

Os clientes preferem ver imagens em vez de ler textos. Torne seu controle deslizante atraente para o público, fornecendo imagens atraentes para eles, em vez de textos longos.

Will Cannon, fundador da Signaturely

Deslizando seu caminho para as vitórias: teste A/B seus controles deslizantes

Sliders são uma ideia controversa por um bom motivo. Emular cegamente as melhores práticas ou seus concorrentes ou setor pode ter o efeito oposto. Os visitantes podem ficar irritados, sair da página e sua taxa de conversão pode cair.

Faça um teste A/B de seus controles deslizantes para que você tenha dados para fazer backup de suas decisões e uma estrutura para testar novas alterações para aumentar a conversão.

Rich Page, especialista em conversão, compartilha algumas ideias A/B que você pode usar:

• Teste com uma única imagem versus slides giratórios
• Teste usando um vídeo explicativo versus slides
• Teste a altura e a largura do seu controle deslizante
• Mostrar controles deslizantes para o público-alvo certo
• Tente adicionar prova social de diferentes maneiras

Não importa o tipo de hipótese que você deseja testar, a plataforma de teste A/B fácil de usar da Convert está à sua disposição. Experimente gratuitamente por 15 dias.