Icones na subcategoria tema groomb

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.

1 curtida

Acredito ser possível sim! Consegue me enviar um print onde você quer exatamente?


Queria colocar os icones aonde eu fiz os pontos de vermelho, sera que teria como?

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?

Bom dia!

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 :wink:

1 curtida

Ó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>
1 curtida

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!