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
I tried 6 steps for selected variants but only first option is working when i choose another option no image appears