É possível retirar as miniaturas quadradas da página de produtos e substituir por mini bolinhas como no exemplo abaixo? Acho muito poluída da forma nativa.
Boa noite,
@Leonardo_Vicentini_F será que e possível??
Tem algum código ou exemplo para mim testar??
www.bemii.com.br
em que lugar do site é assim?
Sim é possível sim, antes eu dizia que só não era possível fazer pipoca em programação, mas agora isso já é passado, hoje se faz de tudo. rsrs.
2 curtidas
Seria algo mais ou menos assim, mas depende da estrutura do seu tema ok:
// seleciona todos os elementos que possuem uma imagem dentro da div com o id "carouselImagem"
const imagens = document.querySelectorAll('#carouselImagem img');
// cria o elemento div para conter as bolinhas pretas
const dotsContainer = document.createElement('div');
dotsContainer.classList.add('dots-container');
// percorre os elementos selecionados e substitui a imagem por um elemento span com a classe "dot"
imagens.forEach((img) => {
const dot = document.createElement('span');
dot.classList.add('dot');
dotsContainer.appendChild(dot);
img.parentNode.replaceChild(dot, img);
});
// adiciona o container das bolinhas pretas após a div "carouselImagem"
const carouselImagem = document.querySelector('#carouselImagem');
carouselImagem
Com isso você já consegue “brincar” um pouco e chegar no seu objetivo.
2 curtidas
@Mauricio_Pereira cara muito top 
eu tenho o tema padrão da loja integrada… vou testar…
Muito obrigado 
2 curtidas
@Mauricio_Pereira coloquei o código porém ele bloqueou o touch de slide das fotos e o zoom…
Ficou assim
www.bemii.com.br
1 curtida
Bom como eu havia comentado com você são as características do tema aplicado, ele muda a estrutura do html que por sua vez vai interferir nos seletores.
Tente observar no código que enviei os seletores e os seletores do seu e fazer as devidas adequações.
Estou falando isso com base que você tenha conhecimento em html e JS correto?
1 curtida
Show Maurício entendi agora, tenho muito pouco conhecimento em programação, comecei estudar a pouco tempo, e as customizações que tenho na loja foi toda com ajuda aqui da comunidade…
A noite vou tentar ajustar o código…
Desde já muito obrigado!!
1 curtida
consegui fazer algo somente com CSS, assim fica menos complicado ( eu acho )
ul.miniaturas.slides li {
width: 30px!important;
height:30px!important;
margin: 0 5px
}
ul.miniaturas.slides a {
background: black;
width: 30px;
height:30px;
border-radius: 30px;
}
ul.miniaturas.slides li.active a {
border: 4px solid #f60!important;
}
ul.miniaturas.slides li:not(.active) a {
opacity: 0.5
}
ul.miniaturas.slides li img
{display:none}
1 curtida
@Leonardo_Vicentini_F top demais… Deu muito certo
Muito obrigado
2 curtidas