Compatibilidade: Compatível com versão Dawn superior a 2.5 e outros novos temas GRATUITOS do Shopify 2.0.
Se você tiver o Dawn abaixo da versão 2.5, siga estas etapas aqui .
Não sei por que o Shopify 2.0 ainda não ofereceu essa opção. O tema Shopify oculta apenas uma imagem quando você atribui a imagem a essa variante. E se quisermos ter várias imagens atribuídas à variante? Há várias maneiras de fazer isso. Podemos fazer isso SEM APP ou biblioteca EXTERNA. Mas usaremos a maneira mais simples, que é usando a imagem alt. O código se ajusta ao layout da área de trabalho e ao tamanho da mídia da área de trabalho que você escolher. Isso funciona com layout empilhado e layout deslizante de miniatura.
Dito isto, atribua a imagem alt que corresponda à opção à qual deseja associar a imagem. Certifique-se de que o texto da variante seja o mesmo da imagem alt. Veja o vídeo para mais informações.
O que você está comprando:
- Mostrar apenas imagens atribuídas à variante
- Use a imagem alt para atribuir uma variante
- Funciona com layout empilhado e layout deslizante de miniatura
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
O que você está comprando:
- Uma opção para mostrar apenas imagens conectadas quando a variante é selecionada
- No primeiro carregamento, todas as imagens aparecerão
- Código bem escrito sem nenhuma biblioteca externa sendo usada
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. Acesse Loja online > Temas > Ações > Editar código.
2. Abra main-product.liquid na pasta da seção. Encontre todos os <slider-component> e altere-os para "show-variant". Se você não conseguir encontrar o componente deslizante em main-product.liquid, será necessário ir para a pasta Snippet e abrir media-gallery.liquid ou product-media-gallery.liquid.
3. Temos que adicionar um conjunto de dados para toda a tag <li> no componente deslizante. Adicionaremos o código abaixo e o alteraremos para a variável de imagem correspondente . Certifique-se de que não haja espaços. Veja o vídeo para mais informações.
4. Antes da tag <section>, vamos adicionar um estilo ou se você estiver em media-gallery.liquid ou product-media-gallery.liquid, coloque o código bem no topo do arquivo . Corrijo a posição do controle deslizante de visualização móvel para centralizá-lo e mostrar apenas uma imagem por slide.
5. Em seguida, precisamos adicionar o código do script. Abra “global.js” na pasta Ativos. Encontre o " updateMedia() {." Antes do colchete de fechamento, adicione o código abaixo. Veja o vídeo para mais informações sobre posicionamento.
6. Para fazer o controle deslizante funcionar com a mudança de variante, temos que adicionar este código na parte inferior do global.js.
Se você deseja mostrar as imagens apenas as imagens variantes selecionadas no primeiro carregamento, faça o seguinte
1. Abra main-product.liquid na pasta da seção. Se você não conseguir encontrar o componente deslizante em main-product.liquid, será necessário ir para a pasta Snippet e abrir media-gallery.liquid ou product-media-gallery.liquid.
2. Encontre a classe do <li> e adicione o código entre aspas. Altere-o para a variável de imagem correspondente. Assim como fizemos na etapa 3
Depois de todo esse código, você precisa atribuir os alts de mídia às suas imagens.
Nota: No Editor de temas, ao clicar em "Personalizar tema", certifique-se de desmarcar a opção " Ocultar mídia de outras variantes após selecionar uma variante" para que nenhuma imagem de variante seja ocultada quando chamada.
É isso. Espero que não tenha sido demais para você (",)
Copied!
6 comentários
Hi @Albert S
Make sure to follow the steps carefully. If having trouble, please contact us using “Chat with us” feature for faster reply. Code were tested and still works with updated version of Dawn.
Hi,
I purchased and installed the “6 Steps in How To Show Only Selected Variant Images” on dawn 11.0 and it is working correctly, the only issue is in the mobile view, the total count of images is incremented by 1 so for example if an a variant has 4 images and it will show in mobile view 1 of 5 and not 1 of 4
My theme url: https://q0oqp0bjn3m298gf-27046445131.shopifypreview.com
Please search for this item “High Society Hoops” to see what I mean (in mobile view)
Hoping to hear from you soon.
Albert Salem
Hi @WILLIAM SHAPIRO,
It will not work on paid themes since the theme code will be far different. I would suggest to contact us using “Chat with us” to provide you the quote
hi does this work for paid themes?
Hi Arif,
Please message me in “Chat with us” and provide me your website. Thank you