Olá, é possível adicionar icones para as subcategoria? Sem ser no menu principal!? Utilizo o tema Grand Store Black Gold da Groomb, gostaria de saber se tem essa opção.
Acredito ser possível sim! Consegue me enviar um print onde você quer exatamente?
Alterações para o menu de ROUPAS. Se quiser para o restante ta fácil também, vê se fica do seu agrado, qualquer coisa posso fazer unicamente por CSS, fiz por JQuery que é mais prático
Tentei deixar ao lado esquerdo como pediu, mas quase não tem espaço, então teria que aplicar um padding para deslocar todo o menu, ia ficar ruim talvez. Achei do lado direito o melhor possível!
<style>
@media only screen and (max-width: 767px) {
.icon-subcategory {
display: none !important;
}
}
.icon-subcategory {
width: 15px; /*Se quiser maior, só aumentar aqui*/
margin-left: 5px;
}
.icon-subcategory img {
display: flex;
justify-content: center;
}
</style>
<script>
$(document).ready(function() {
$('li.categoria-id-17369303.com-filho.item-level2 > a').append('<div class="icon-subcategory"><img src="https://www.svgrepo.com/show/258223/shorts-pants.svg"/></div>');
$('li.categoria-id-17369301.com-filho.item-level2 > a').append('<div class="icon-subcategory"><img src="https://www.svgrepo.com/show/258223/shorts-pants.svg"/></div>');
$('li.categoria-id-22676710.com-filho.item-level2 > a').append('<div class="icon-subcategory"><img src="https://www.svgrepo.com/show/258223/shorts-pants.svg"/></div>');
$('li.categoria-id-17369300.com-filho.item-level2 > a').append('<div class="icon-subcategory"><img src="https://www.svgrepo.com/show/258223/shorts-pants.svg"/></div>');
$('li.categoria-id-23305312.com-filho.item-level2 > a').append('<div class="icon-subcategory"><img src="https://www.svgrepo.com/show/258223/shorts-pants.svg"/></div>');
});
</script>
Olá. bom dia.
Esse código coloco no personalize sua loja > incluir código html > e adiciono como CSS esse código, correto?
E substituo a referencia de imagem.
Somente isso?
Deu certo, porém ele ficou do lado direito, como você disse não tem espaço para o lado esquerdo, né?
Qual comando eu troco para tentar colocar do lado esquerdo, só para ver como fica por favor
Eu também aumentei o tamanho só para ver como ficaria, o outro estava muito pequeno
Observe que no meio dos códigos tem .append, troque para .prepend. Se quiser testar sem sequer aplicar as modificações no painel, aperte F12 no chrome, vai na aba console e digita:
$('li.categoria-id-17369303.com-filho.item-level2 > a').prepend('<div class="icon-subcategory"><img src="https://www.svgrepo.com/show/258223/shorts-pants.svg"/></div>');
}
Assim… da forma que você quer fazer, tem como, porém teríamos que deslocar todo o sub-menu, talvez isso impacte diretamente na responsividade ou algo do tipo. Ele alinhado a direita fica perfeito, pois não tem que deslocar nenhum bloco ou algo parecido.
A ok, muito obrigado, vou deixar do lado direito então!
Obrigado pela ajuda
Ótimo então! Mas caso queira com o ícone à esquerda, só adicionar a tag abaixo dentro de <style
> junto com as outras e mudar o código para .prepend (como informei acima).
.menu-desktop .submenu .level3 .item-level3>a {
margin-left: 25px;
}
Ficaria assim (só tem que alterar o link dos ícones)
<style>
@media only screen and (max-width: 767px) {
.icon-subcategory {
display: none !important;
}
}
.icon-subcategory {
width: 15px; /*Se quiser maior, só aumentar aqui*/
margin-left: 5px;
}
.icon-subcategory img {
display: flex;
justify-content: center;
}
.menu-desktop .submenu .level3 .item-level3>a {
margin-left: 30px;
}
</style>
<script>
$(document).ready(function() {
$('li.categoria-id-17369303.com-filho.item-level2 > a').prepend('<div class="icon-subcategory"><img src="https://www.svgrepo.com/show/258223/shorts-pants.svg"/></div>');
$('li.categoria-id-17369301.com-filho.item-level2 > a').prepend('<div class="icon-subcategory"><img src="https://www.svgrepo.com/show/258223/shorts-pants.svg"/></div>');
$('li.categoria-id-22676710.com-filho.item-level2 > a').prepend('<div class="icon-subcategory"><img src="https://www.svgrepo.com/show/258223/shorts-pants.svg"/></div>');
$('li.categoria-id-17369300.com-filho.item-level2 > a').prepend('<div class="icon-subcategory"><img src="https://www.svgrepo.com/show/258223/shorts-pants.svg"/></div>');
$('li.categoria-id-23305312.com-filho.item-level2 > a').prepend('<div class="icon-subcategory"><img src="https://www.svgrepo.com/show/258223/shorts-pants.svg"/></div>');
});
</script>
Boa tarde Teus, tudo bem?
Uma outra dúvida, você sabe se é possível eu criar Kits dentro da loja integrada? Por exemplo “Kit 3 Camisetas Acostamento” Ai quando a pessoa clicar ele abre a pagina com as 3 opções das camisetas sabe?
Te respondi lá no privado!