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
@Max Be aware that with the new version of Dawn, a thumbnail slider is already available, that is the reason I only created a vertical slider
Hi there!
Is it possible to also have a horizontal slider unter the picture?
Because vertical doesn’t look well for my page.
Kind regards
Max
Hi, why vertical-media-gallery.js is not included/referenced in main-product.liquid? also on iOS devices, after implementing the code, I was not able to swipe up and down on product pages. Dawn version 4.0.0
Can you tell me how can we make them Fade effect on slides?
Please make sure you are copying the code. The javascript is responsible for buttons to work. If this doesn’t work then you are missing that code or might have an error.