Icones na subcategoria tema groomb

Layout
1

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
2

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

3

image
image992×476 37.8 KB

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

4

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>
5

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?

6

Bom dia!

image
image1018×859 22.1 KB

7

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

image
image1349×493 79.1 KB

Eu também aumentei o tamanho só para ver como ficaria, o outro estava muito pequeno

8

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.

image
image1919×938 115 KB

9

A ok, muito obrigado, vou deixar do lado direito então!

Obrigado pela ajuda :wink:

1 curtida
10

Ó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
11

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?

13

Te respondi lá no privado!