- 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!
44 comentários
@GUIDO Sorry about that. Fixed the code already. Just redo step 4
@EUNICE I think I understand what you mean. You want to update the current basing on the index. Let me take a look on this.
Uncaught TypeError: Cannot read properties of null (reading ‘parentElement’)
at newLargeImage (colorful-rug-wool-rug-vintage-rug-geometric-pattern-rug-5-5-ft-x-8-1-ft-turkish-rug-tribal-rug-area-rug-bohemian-rug-carpet-mb11705:892)
I’m having that issue when
Hi @CLIMBINGMOUNTAINS. Have you tried adjusting your media in the product section? Make your first photo as the large media.
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.