> 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FnNWruDas7C4sNiHOzeq1%2Fimage.png?alt=media&amp;token=e6f24806-ce65-4954-9569-d313ea0497e4" 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FEvevzxZmE81GxJ7GnGJx%2Fimage.png?alt=media&amp;token=30ea8653-8798-48bd-9968-85fe46914f3f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FGJiYjTFY386Mwcsbu2uq%2Fbarra-de-contatos.png?alt=media&amp;token=bb6578c8-3807-464f-a8bf-1a062625ee34" 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 %}

\
**- 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FMmW10yX7wLb0YXzJhJ1s%2Fimage.png?alt=media&amp;token=5334d68f-5ccd-4519-b246-59280b8b61e0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fxdv06NTS0HtSVUYbPoRB%2Fimage.png?alt=media&amp;token=8442b973-9feb-4f7c-bb6f-41611c3aa55f" 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FJbH2lvy3QmmH8cZfDzKD%2Fimage.png?alt=media&amp;token=f08a4a54-66a2-4091-9f24-f0f8a11c15a5" 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;

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F461kHS9Zo76hmVlMhtwz%2Fimage.png?alt=media\&token=6695b979-1736-4861-ab5a-3d56a45a3959)

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

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FUGKrRU5go2gJgngQf4LZ%2Fimage.png?alt=media\&token=1020a801-7079-45e9-9edd-cf9cb1e7784c)\
\
\- **Exibir telefone:** defina se o telefone será ou não exibido.&#x20;

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fnsk84N4PLPaxuTGZO2ld%2Fimage.png?alt=media\&token=a9a97163-cbb5-41b6-a579-7513c206a3c0)\
&#x20;\
\- **Exibir e-mail:** defina se o e-mail será ou não exibido.&#x20;

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fu61h7RajtShmUftnmTG3%2Fimage.png?alt=media\&token=599aa5e9-f33d-47f4-87b4-c3dcdf9df816)

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

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FbNISPWqz3ma41bW4nas3%2Fimage.png?alt=media\&token=3acb0428-84e8-477e-911c-f8d622adea8e)

</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;

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FvvaDpH8vg4h4BOUnNamY%2Fimage.png?alt=media\&token=6b37cc74-b1f0-4112-900d-1a5eb9df8e8b)

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

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FMFw4ASIvHOTx0RGWaxSA%2Fimage.png?alt=media\&token=0bd24996-7ab3-4555-87aa-a391da9377f1)

</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;

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FyPYjdeDkuPKWLzDldeb7%2Fimage.png?alt=media\&token=a156ce08-bd8d-492a-a906-4294624fc706)

</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;