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
Hey there, I purchased your code snippet and it is great in it’s own right! However, my concern is that it is using alt tag which should be reserved for SEO. Do you have a code snippet that uses that image linked to the variant?
Thanks in advance