- Vá para sua loja online > Temas > Ações > Editar código
- Vá para a pasta Seção e abra main-product.liquid
- 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!
45 comentários
followed your latest update in the blog post. Images work fine as expected but the slider arrow that should be placed below the images has disappeared…
Awesome. Is there any way to add the function to change the variant selection by clicking the thumbnail image? Thanks.
Hi Guy,
Thank you for leaving a comment. I updated the code. Let me know if you are still experiencing some issues.
Is it possible to give the main image container a max pixel height? I’ve added my images but they are too big on the page (in my opinion) I’ve tried changing the sizes of the images themselves but that didn’t do the trick. I like the image carousel and all of the images within to be fully visible without scrolling.
This worked for me! Amazing – Thanks so much!