Product Image slider for Shopify Dawn theme - version 2.4 and lower

Controle deslizante de imagem do produto para o tema Shopify Dawn - versão 2.4 e inferior

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

Isso funciona apenas com Dawn 2.4 e inferior. Confira neste vídeo como ver o link da versão do seu tema.
Você usou o tema Dawn e ficou desapontado por eles não terem um controle deslizante de produto?
Não se preocupe. Neste tutorial, criaremos um.
Recomendações: Também criei um código para transformar a página do produto Dawn como o tema Debut com um controle deslizante. Verifique link .
  1. Vá para sua loja online > Temas > Ações > Editar código
  2. Vá para a pasta Seção e abra main-product.liquid
  3. Encontre o bloco <slider-component> e comente-o ou exclua-o se desejar

Comente colocando “<!--” antes do componente deslizante e “-->” após o componente deslizante. O código deve ficar como abaixo

4. Antes do <slider-component> comentado, adicione o código abaixo



5. Na parte superior cole o código abaixo e clique em SALVAR

6. Vejo que o componente-slider.css também está sendo usado para seções multicolunas, portanto, temos que criar um novo arquivo .css. Vá para a pasta Ativos, clique em 'criar novo ativo' e crie um espaço em branco. Nomeie o arquivo como 'produto deslizante'. O arquivo deve aparecer como abaixo

7. Agora abra a pasta CSS criada e cole o código abaixo.


8. Em seguida, volte para o produto principal.líquido. Na parte superior, comente este código. Você também pode simplesmente excluí-lo. Para comentar, coloque (<!-- ) antes do código e (--->) depois. Assim como fizemos no componente deslizante. O código deve ficar assim.

adicione isso depois.

9. Precisamos ir para a pasta Asset novamente e abrir global.js. Encontre o componente deslizante. Como o componente slider é um código global, ou seja, algumas seções também usam o mesmo código. Temos que adicionar uma instrução if. Desconsidere o vídeo referente a esta seção em global.js.

No construtor SliderComponent adicione o código abaixo.

10. Na função initPages precisamos alterar o totalPages. Substitua o código abaixo:

 com isso

11. Por último, na função de atualização precisamos alterar a currentPage, alterar 1 para 4. Substitua o código abaixo e clique em SALVAR

para isso

O código global.js deve ficar assim:

É isso! Você acabou de transformar a página do produto do tema Dawn. Deixe-me saber se você tiver dúvidas ou problemas com o código para que possamos corrigi-lo e ter um código atualizado. (",)

Atualização 22/09/21: acabo alterando o código no Asset/global.js para não quebrarmos o componente slider se usarmos na outra seção

Eu mudo o código CSS e removo o observador de redimensionamento. A imagem grande terá a mesma altura do item de imagem grande.

Atualização 23/09/21: Corrigidos problemas de falta de duas imagens grandes e controle deslizante. Código atualizado para usar o recurso hide_variants

Atualização 25/09/21: Correção do problema com o desaparecimento da miniatura ao adicionar uma seção que usa um componente deslizante. Atualizado o código na etapa 4.

Atualização 26/09/21: Adicionado um botão de reprodução de vídeo quando a imagem em miniatura é um vídeo

Atualização 30/09/21: Corrija o problema relacionado ao botão de vídeo. Reposicione os códigos do video-btn e adicione alguns códigos css

Atualização 01/10/21: Corrigido o problema de empilhamento de imagens grandes no celular. Adicionei um resizeObserver no Javascript para corrigir o problema de grandes lacunas entre a imagem grande e o controle deslizante. Se você não quiser, basta deletar o código

Atualização 03/10/21: Adicionado overflow: oculto em CSS de imagem grande. Eu recomendaria não ter imagens de produtos com altura extrema como imagem de primeira variante. Também foi adicionado algum CSS para que, quando ativa, a imagem em miniatura tenha uma caixa de borda e a opacidade seja 1. Veja o código em verde. A cor da borda da miniatura depende do seu var(--gradient-base-accent-1) .

Atualização 04/10/21: Altere o v-btn no arquivo product-slider.css devido a um problema ao ter um vídeo móvel

Atualização 10/10/21: Sei que resolvi o problema de espaço entre a imagem grande e o controle deslizante. Eu removi o resizeObserver e também o preenchimento inferior da imagem grande para corrigir isso. Eu atualizei o código

Atualização 11/10/21: alterei a forma como a borda e a opacidade são aplicadas. Por favor, veja o código verde destacado

Atualização 15/10/21: adicionei uma função onload para que quando a janela carregasse a primeira imagem da miniatura obtivesse a propriedade ativa. O código é rosa.

Também foi adicionado um código para quem ainda deseja a opção de ocultar as variantes quando as variantes forem selecionadas. (NOTA: este é o código original do Dawn). Veja o código em azul.

Copied!

Lutando com instruções?

Não se preocupe, nós oferecemos cobertura por um preço razoável. Entre em contato conosco através de "Converse conosco" para obter um orçamento.

Relaxe enquanto nós cuidamos disso para você!

Voltar para o blogue

44 comentários

Hi everyone,

Just FYI. This code does not work if you have Dawn version 2.0 and higher. Shopify team already added this functionality in the newer version. Please check your theme editor

Made4Uo

I have done all the steps. But slider is not coming. I can see images but arrow to slide next image is not working. Kindly advise

Priyanka

Hi,

Is it possible to add a slider buttons to the top image (main image) so the user doesn’t need to scroll down to see more images?

Thank you.
Andrei.

Andrei Aghenii

just saw you have put up an updated tutorial that seems to fix the issues, thanks! :)

Billy gates

This also ‘breaks’ all other sliders, which now start count at 4. so if you have a slider with 3 items it becomes 7 items, starting at 4.

Along with the image sizing issues I had to revert. It’s a shame as it was a cool idea. Thank for the tutorial anyway.

Billy Gates

Deixe um comentário