shopify dawn theme slider

Como mostrar apenas imagens de variantes selecionadas - Dawn 2.5 abaixo

Log in or Sign up to ensure access to purchased code across multiple devices.

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

Compatibilidade: Compatível apenas com versões Dawn inferiores a 2.5

Se você tiver Dawn 2.5 e superior, 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 EXTERBAL. 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

Para iniciar.

1. Acesse Loja online > Temas > Ações > Editar código.

2. Abra main-product.liquid na pasta da seção. Encontre o <slider-component> e procure o <li>. 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.

3. Em seguida, precisamos adicionar o código do script. Abra o "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

4. 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".

É isso. Espero que não tenha sido demais para você (",)

Copied!
Voltar para o blogue

Deixe um comentário