Compatibilidade: SOMENTE todos os temas GRATUITOS do Shopify 2.0 . Funciona da versão inferior até a versão 11
Quer adicionar um nível extra de interatividade às páginas de seus produtos? Com um recurso de seleção de variantes que usa imagens em miniatura, você pode oferecer aos seus clientes uma experiência de navegação única - e a boa notícia é que não é tão complicado quanto pode parecer!
Embora existam muitos tutoriais em vídeo disponíveis online, eles geralmente não funcionam com temas mais recentes do Shopify, como Dawn 5.0. E embora alguns possam sugerir o download de um aplicativo externo, isso nem sempre é necessário. Com um trecho de código simples, você mesmo pode implementar o recurso de seleção de variante de imagem em miniatura.
Além da funcionalidade básica, adicionei um recurso que permite a seleção de múltiplas imagens variantes usando o recurso alternativo de imagem. Embora atribuir tags alt a várias imagens possa ser demorado, é um processo simples se você já tiver um arquivo CSV para o seu produto.
Observe que esse recurso não funcionará com aplicativos que alteram as opções do produto. Além disso, para produtos com diversas opções, certifique-se sempre de colocar a variante a ser selecionada primeiro na seleção de variantes. Isso facilitará a resposta do código à imagem selecionada, principalmente porque uma imagem pode ser utilizada diversas vezes nas opções. Antes de começar, certifique-se de desmarcar a opção "Ocultar mídia de outras variantes após selecionar uma variante" em seu editor de tema e usar a opção "carrossel de miniaturas" ou "miniaturas". Além disso, certifique-se de atribuir uma imagem a cada opção de variante e usar a tag alt da imagem. Se você já usa tags alt de imagem para fins de SEO, entre em contato conosco para discutir outras opções.
Então, o que você está esperando? Aprimore suas páginas de produtos hoje mesmo com este recurso envolvente e interativo de seleção de variantes usando imagens em miniatura!
O que você está comprando:
- Selecione a opção do produto usando várias imagens em miniatura
- Funciona com o seletor de variantes suspenso ou de botões de opção
- Atualiza as informações do produto, por exemplo. preço
- Precisamos usar a imagem ALT para que isso funcione
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. Precisamos ir à nossa loja de administradores e abrir o editor de código. Clique em Loja online > Temas > Ações > Editar código.
2. Precisamos abrir a pasta Asset e procurar media-gallery.js. Se você não tiver esse arquivo, esse código não funcionará para você. Abra media-galley.js e encontre o código abaixo.
mediaToSwitch.querySelector('botão').addEventListener('clique', this.setActiveMedia.bind(this, mediaToSwitch.dataset.target, false));
Em seguida, insira o código abaixo dele. Consulte a imagem para posicionamento
3. Vamos começar em uma nova linha e adicionar o código abaixo, após a chave de fechamento. Consulte a imagem para posicionamento. Em seguida, clique em SALVAR.
Colocação do código:
4. Em seguida, precisamos adicionar o código na galeria de mídia. Verifique qual versão do Dawn você possui.
Para Dawn abaixo da versão 8.0 , abra a pasta Section e abra main-product.liquid. Dentro do arquivo, pesquise “<media-gallery”. Abaixo do código da galeria de mídia e após o ">", adicione o código abaixo.
Para a versão Dawn acima de 8.0, abra product-media-gallery.liquid na pasta Snippet, adicione o código abaixo após o ">", consulte a imagem abaixo
Continue abaixo se desejar várias imagens conectadas à opção de variante. Caso contrário, basta SALVAR main-product.liquid ou product-media-gallery.liquid e pronto.
5. Se você tiver várias imagens em uma opção de variante, será necessário adicionar o código abaixo ao lado de "<media-gallery". Por favor, verifique a imagem para posicionamento. Clique em SALVAR.
Para Dawn abaixo da versão 8.0, você deve abrir main-product.liquid na pasta Asset:
Para Dawn abaixo da versão 8.0, você deve abrir o product-media-gallery.liquid
6. Vá para a tela do administrador e clique em "Produtos", clique no produto e na seção Mídia. Clique nas imagens e atribua a mídia alt da mesma com a opção variante. Por favor, verifique a imagem para mais informações. Certifique-se de clicar em SALVAR.
O passo 3 abrirá a janela abaixo. Adicione a imagem alt igual à opção. Por exemplo, a opção é "Branco", adicione um alt de mídia "Branco". Isso diferencia maiúsculas de minúsculas.
NOTA: Se você não atribuir um alt de mídia, esta imagem não será usada para selecionar a opção de variante.
É isso (",)
Copied!
6 comentários
Hi @SHANNON, I’m sorry to hear about your experience. Since you purchased the code back in March 2023, there have been major changes. The code is designed to work from lower versions up to version 12. Thanks!
FYI it seems this code is broken by the latest Shopify Dawn commit which adds swatch display types.
Hi,
Make sure you follow the instructions for Dawn version 8 and higher.
Hi, I’ve tried this on Dawn 11.0 and it’s not working. We can change the variant by clicking on the picture, but when you click add to cart it’s not the variant we just selected. Can you please fix it please. It worked on dawn 7.0 for me, but not on this new version. Thank you
Hi @Jasmin,
I understand your concern. I hope you read the use of alt tag explained in this page prior to purchase (images provided as well). Unfortunately, to keep the code still a non-developer friendly, we need to utilize the alt tag to call from the backend. We can however add some code to show different tag for image and different tag for SEO. Another way is to upload the images as a variant metafield but this will require more work. You can contact me for this issue using Chat with us.