- 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
Thank you for the prompt reply made! Sorry if I wasn’t clear in my explanation. What I mean is, for example, in your video, the order of the bike pedals on your product slider is grey > red > white > black (see 6:24 in the video). What if I want the picture of the red pedal to appear as the first picture (e.g. in this order red > white > grey > black)?
I am selling something with 3 variants in red, blue and green colours. I have a total of 4 images (1 for each colours, and 1 that shows all 3 variants in the same photo). Currently, the first picture in my slider is the one for the red variant, followed by the photo with all 3 variants as the second picture in the slider. I want the photo with all 3 variants to appear as the first picture in the slider, but I’m having some difficulty doing so. I tried to reorder my pictures and variants from my shopify admin console, but that doesn’t seem to solve it.
One issue I met: if you have video in the slider, the play button won’t show on the slider thumbnail, so the customer won’t know it’s a video. Please look into this. Thanks
Hi, I was wondering, is it possible to re-order the sequence of photos that appear in the slider?
I have a suggested quick fix:
On product-slider.css:
.slider-container {
margin: auto;
width: 100%;
overflow: auto;
display: flex;
flex-flow: column wrap;
align-items: center;
position: relative;
}
I changed the margin: auto instead of margin: 0 1rem; because it is not centered on mobile.
Re: the slider arrow issue, I get it. It shows up if the product images are 5 or more but it appears as "4 / 5 " instead of starting to 1 /5. It is not also updating the number when you select random product image.
need help *by the way, thanks a lot for posting this tutorial. Will also try to contribute the fixes that I will discover as I work on this :)