Compatibilidade: funciona apenas no Dawn versão 5.0 e em qualquer tema GRATUITO do Shopify 2.0
Eleve a página do seu produto com um efeito de zoom flutuante atraente para as imagens do seu produto. Se você já usou o tema Debut antes, provavelmente está familiarizado com o impressionante efeito de foco que ele oferece. Agora, você pode trazer o mesmo nível de apelo visual para a página do seu produto no tema Dawn - e a melhor parte? Você não precisa instalar nenhum aplicativo ou biblioteca externa para fazer isso!
Com apenas algumas etapas simples, você pode adicionar o efeito de zoom flutuante às imagens de seus produtos no tema Dawn. Seus clientes vão adorar poder ver seus produtos de perto e detalhadamente, facilitando a tomada de decisões de compra informadas.
Então, por que se contentar com uma página de produto básica quando você pode adicionar um efeito envolvente de zoom flutuante? Siga os passos abaixo e transforme a página do seu produto hoje mesmo!
Experimente este produto em primeira mão, visitando nossa loja DEMO ! Use a senha "made4uo" para entrar.
O que você está comprando:
- Zoom da imagem do produto quando pairado na página do produto
- Script escrito em javascript, sem jquery.
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. Vá para Admin store > Loja Online > Temas > Ações > Editar código.
2. Abra o arquivo main-product.liquid na pasta Seções.
3. Precisamos aprimorar o componente deslizante. Para fazer isso, precisamos substituir o FIRST<slider-component> por <product-zoom>. Também a tag de fechamento </ slider-component> para </product-zoom>. Se você tiver Dawn versão 8.0 e superior, vá para a pasta Snippet e abra product-media-gallery.liquid para encontrar o <slider-component>
4. A seguir, precisaremos adicionar um pequeno código CSS para que o efeito de zoom funcione. Abra a pasta Ativos e encontre ‘section-main-product.css’. Em seguida, adicione o código abaixo.
5. A última coisa a adicionar é o código do script. Abra o global.js, ainda na pasta Asset. Em seguida, adicione o código abaixo.
É isso (",)
Copied!