> 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/barra-de-contatos.md).

# Barra de contatos

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

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

<figure><img src="/files/gZ5Bsx1xKgQglRj1X10I" alt=""><figcaption></figcaption></figure>

\- **Exibir barra de contatos:** quando essa opção estiver habilitada, a barra de contatos estará ativa, porém visível apenas em dispositivos desktop.

<figure><img src="/files/8km37KX9IZ3T4zlQLPsO" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/uN0tgmtbYzlCiDOv40p6" alt=""><figcaption><p>A Barra de contatos abrange a área selecionada em vermelho.</p></figcaption></figure>

{% hint style="danger" %}
Importante! <br>

A barra de contatos será exibida **apenas** se houverem informações de contato cadastradas no painel da Nuvemshop.
{% endhint %}

\
\&#xNAN;**- Cores:** para utilizar cores específicas na barra de contatos, marque a opção **usar estas cores.** Caso a opção esteja desmarcada, independente das cores escolhidas, será utilizado por padrão as **cores da sua marca.**

<figure><img src="/files/B6jNdyYp9AdZljaofn1r" alt=""><figcaption></figcaption></figure>

Você poderá definir: **Cor de fundo**, **Cor de texto** e **Cor dos ícones**.

<figure><img src="/files/enF4g5VwSkY3Dyzt1pWe" alt=""><figcaption></figcaption></figure>

**- Exibir linha divisória:** para exibir uma linha divisória entre a barra de contatos e o menu principal, marque a opção **Exibir linha divisória.**

<figure><img src="/files/ZdYa1KLhVn0q1CppEFBr" alt=""><figcaption></figcaption></figure>

<details>

<summary>Informações de contato</summary>

Você poderá definir: \
\
\- **Exibir WhatsApp:** defina se o WhatsApp será ou não exibido.&#x20;

![](/files/2NN2tSpB1PfAH6rdRDHB)

Além disso, você também poderá definir se o formato de exibição do WhatsApp será em Texto (WhatsApp) ou em Número (DDD + 9XXXX.XXXX

![](/files/0Fq6dp8qxA7uUEdEC8xw)\
\
\- **Exibir telefone:** defina se o telefone será ou não exibido.&#x20;

![](/files/RtM6gCpt6ZvvvlHPr1kV)\
&#x20;\
\- **Exibir e-mail:** defina se o e-mail será ou não exibido.&#x20;

![](/files/SDxokx7im9TMstBRlr5t)

\- **Exibir redes sociais:** defina se as redes sociais serão ou não exibidas.

![](/files/I7P7okii3dDgft00Gnre)

</details>

<details>

<summary>Menu na barra de contatos</summary>

Para exibir um menu na barra de contatos, marque a opção "**Exibir menu na barra de contatos"**&#x20;

![](/files/P9pTPmvsnZkxdPmbwoW9)

Após isso, selecione o menu que deseja ser exibido.&#x20;

![](/files/KiUnYwjBytuICaYG3T1F)

</details>

{% hint style="warning" %}
Para exibir um menu na barra de contatos, você deve primeiramente criá-lo nas [Barras de Navegação](/minha-nuvemshop/barras-de-navegacao.md). Sugerimos que este menu tenha no máximo três itens.
{% endhint %}

<details>

<summary>Idiomas</summary>

Se você possui um plano que contempla o recurso de multi-idiomas, clique em **Exibir bandeiras dos idiomas** para que o seletor fique visível no layout.&#x20;

![](/files/Exfdme7sqp7TJyj8bHJS)

</details>

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;