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.

Helpful Free links

Migrating to Shopify Transferring Domain to Shopify Master sections and blocks Free Essential tools Custom App Creation Shopify theme templates Add custom CSS to themes Master product variants in Shopify Free Shopify Themes How to customize Shopify themes Automate your store processes Improve store's search Free apps to enhance your store Upload and manage files Facebook ads for your Shopify Shopify Support Stay updated with Shopify changes Join Shopify Community for free help

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