Compatibilidade: Dawn versão 9 a 12 e outros temas GRATUITOS do Shopify 2.0 apenas
Bem-vindo ao nosso tutorial mais recente, desenvolvido especificamente para usuários do tema Dawn (versões 9 a 12) e outros temas gratuitos do Shopify 2.0. Em dezembro de 2021, Dawn introduziu um recurso interessante de controle deslizante de miniaturas para usuários de desktop. Mas e se você quiser levar a exibição do seu produto um passo adiante? Nosso guia está aqui para ajudá-lo a criar um controle deslizante vertical personalizado, completo com recursos de rolagem e zoom, para exibir seus produtos em um estilo exclusivamente seu.
Principais recursos do nosso controle deslizante aprimorado
Compatibilidade e suporte de versão:
- Nossa solução é compatível com as versões 9 a 12 do Dawn e outros temas gratuitos do Shopify 2.0.
- Para aqueles que usam Dawn 2.5 ou inferior, confira nosso guia dedicado para controles deslizantes verticais nas páginas de produtos .
- Nosso tutorial fornece instruções simples e passo a passo.
- Incluímos uma grande atualização de código para garantir uma integração perfeita com a versão mais recente do Dawn.
- Veja a imagem que acompanha para ver o resultado final impressionante.
Configurando seu controle deslizante: certifique-se de configurar seu editor de tema do Shopify para usar o layout “carrossel de miniaturas” para telas de desktop e para “ocultar miniaturas” no layout móvel. Essas configurações são cruciais para o bom funcionamento do nosso controle deslizante aprimorado.
Tivemos uma grande mudança no código para que isso funcionasse com a versão mais recente. Removemos as configurações da seção conforme mostrado no vídeo. Por favor, verifique a imagem abaixo para ver como fica.
Você também pode ver a loja de demonstração aqui . Senha: made4uo
O que você está comprando:
- Um código totalmente responsivo que aprimora a página do seu produto.
- Uma seção da página do produto projetada exclusivamente para esse recurso.
- Código eficiente e bem estruturado que opera sem bibliotecas externas.
- Um recurso inovador de zoom de imagem de produto que é ativado ao passar o mouse.
- Uma solução independente que não requer aplicativos adicionais.
O que torna nosso código melhor:
- Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
- Não deixamos nem adicionamos códigos para anunciar em nosso site
- Nosso código é compatível com dispositivos móveis
Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.
Para iniciar:
1. Temos que ir ao nosso editor de código. Loja de administração do Shopify > Temas > Editar código.
2. Procure product-media-gallery.liquoid na pasta Snippet e substitua o código abaixo.
3. Temos que adicionar um arquivo css para nosso controle deslizante. Abra a pasta Assets, e "Adicionar um novo ativo", nomeie-a como "produto principal-vertical " e coloque o código abaixo.
4. Em seguida, temos que adicionar nosso próprio código Javascript. Abra global.js na pasta Assets e cole o código na parte inferior do arquivo.
Conclusão: ao seguir nosso guia, você adicionará um toque de sofisticação e funcionalidade à sua loja Shopify, tornando as páginas de seus produtos mais interativas e envolventes para seus clientes. Se você tiver alguma dúvida ou precisar de mais assistência, sinta-se à vontade para conversar conosco no chat do Shopify ou visite nossa página de contato . Vamos transformar a exibição do seu produto em uma experiência de compra envolvente!
É isso. Espero que não tenha feito você suar. (",)
Copied!
10 comentários
I am not able to zoom in, also i am not able to scroll to the left or right on the thumbnails
I see selecting a variant swatch changes to the assigned image. Likewise does changing image select the photo’s associated variant so that variant selection+its thumbnail are always in sync?
How to make a horizontal slider with thumbnails at the bottom in 2.5? Thank you
Could you tell me how to install HORIZONTAL slider in the 2.5?