> For the complete documentation index, see [llms.txt](https://ajuda.temaflex.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajuda.temaflex.com.br/personalizar-layout/cabecalho/icones-nos-menus.md).

# Ícones nos menus

{% embed url="<https://www.youtube.com/watch?index=12&list=PLjqZTg-KCmj8PNgm5YdN3Zk02OZeblrQU&v=-53LqyT2lys>" %}

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Cabeçalho > Ícone nos menus".**

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FfczPoqZoFVzEU3enRIct%2Fimage.png?alt=media&amp;token=0aa22936-7eea-4f74-98b3-b7bca95bad3e" alt=""><figcaption></figcaption></figure>

**- Exibir ícones no menu principal para computador:** a exibição dos ícones no desktop é ativa.

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FLkQRbYj0Pe1BjNZK6fH1%2Fimage.png?alt=media&amp;token=6dc6d519-d164-4c19-81c3-174f3c1d2c7d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FgC59ySL5zzNG3gddjJkw%2Fimage.png?alt=media&amp;token=57711ab3-22de-483e-abfa-c6c6b9ba311c" alt=""><figcaption><p>Exemplo de ícones no computador</p></figcaption></figure>

**- Exibir ícones no menu para celulares:** a exibição dos ícones no mobile é ativa.

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F5TNjlLWOBzqZlKCPCoiQ%2Fimage.png?alt=media&amp;token=481f1a2a-e751-4acc-8796-7d083c5f1f6f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FsaQkFqcHue68VaWlp5dE%2Fimage.png?alt=media&amp;token=a2c5b753-e1c4-4189-be0a-fdcd98ca28c3" alt=""><figcaption><p>Exemplo de ícones no mobile</p></figcaption></figure>

**- Posição do ícone:** você poderá definir se o ícone será exibido **Acima** ou **Ao lado** do texto no menu principal. No menu mobile e no menu de departamentos ele será exibido sempre ao lado do texto.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F3QoGILTyihRUUrm15eEv%2Fimage.png?alt=media&amp;token=b8ae5245-f49d-4470-9c54-594db1316c6f" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Importante!

No menu mobile e no menu de departamentos, os ícones serão exibidos sempre ao lado do texto.&#x20;
{% endhint %}

Clique em **"Selecionar imagem"** e faça o upload dos ícones.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FlKdfhud7FdnxRGub1f97%2Fimage.png?alt=media&amp;token=f03279f3-4d14-4fd1-8415-5e047a91c66d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Lembrando que o formato ideal para os ícones é o **PNG**.&#x20;
{% endhint %}

Após cadastrar as imagens, clique no ícone de **editar (lápis),** para abrir as opções de configuração da imagem.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FdjLHVFJxYBttl1RoNiyI%2Fimage.png?alt=media&amp;token=be8f78b3-8641-490e-9f28-31b380cc2632" alt=""><figcaption><p>Ícone de lápis no topo</p></figcaption></figure>

Adicione o link da categoria que você deseja para aquele ícone.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FQ1AVJsk7qIjM4vSIo9EC%2Fimage.png?alt=media&amp;token=1098fe61-4fb9-4106-b046-a994a6abd83d" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
Importante! \
\
A categoria deve estar presente no menu principal, caso contrário, o ícone não aparecerá.
{% endhint %}

Por último, clique em **"Publicar Alterações"** para finalizar.

<figure><img src="https://lh5.googleusercontent.com/dPJAQCU7yUHoNKDqu3THQ0C8Wr8ZHcEtoWPbLkyALJgYpO2jkGxQSDvE4vndymASO5qqg49GbMAQUhMJlNW6Yw1S1DLSk1lLmY-WX5FIdmYU6ACDUyjQbVzZ8rMQ-SR0u_XieD2nPbKSLyow_BULUs31VHyNQMxxGxQDoByJ0s6GKFEY6TkwVtmQ-niDjQ" alt=""><figcaption></figcaption></figure>

**Pronto! 🙌**&#x20;