> 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/cores-da-sua-marca.md).

# Cores da sua marca

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

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.&#x20;
2. Clique na opção **Cores da sua marca** no menu lateral para acessar as configurações das cores da sua loja virtual.

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

<details>

<summary>Selecionando suas cores</summary>

1 - **Cores da sua marca:** você verá os elementos que pode personalizar, como: **Cor principal**, **Cor secundária** e **Cor de destaque**. \
\
![](/files/ERkdokRVSWqNtUMOpnF9)\
\
2 - **Botão de compra:** você poderá personalizar tanto a cor de fundo, quanto a cor do texto do botão.\
\ <img src="/files/5mC5f3yuaxTrijXhdZsJ" alt="" data-size="original">\
\
Além disso, ao selecionar a opção **"Inverter as cores do botão"**, o layout irá inventer as cores e aplicar uma borda da cor de fundo do botão.\
\
\&#xNAN;**- Cores padrões no botão de compra;**\
![](/files/Ikz3yEBpx8rVnBArqkhC)\
\
\&#xNAN;**- Cores invertidas no botão de compra.**\
![](/files/lqjJHwbEuPjkGTueUmh0)\
\
3 - **Cores de contraste:** você poderá personalizar tanto a cor de fundo, quanto a cor do texto.\
\
![](/files/Rv2siYdW4b5r9gsuvCj0)\
\
4 - **Etiquetas de frete grátis e desconto:** você poderá personalizar tanto a cor de fundo, quanto a cor do texto da etiqueta.<br>

![](/files/knqulrjUrvGqe6Bjew2B)

**Dica:** recomendamos **não utilizar mais de quatro cores diferentes** para manter a identidade visual da sua marca.

\
\- Clique no **círculo de cor** de cada elemento que deseja alterar para eleger a cor de sua preferência. Para usar uma **cor diferente das que já aparecem como sugestão**, basta clicar em **"Nova cor"**.<br>

<img src="/files/j136PLVKAJH5vxSSYe0m" alt="" data-size="original">

\
Ao selecionar uma cor, você pode: \
\
**-** Mudar a escala na barra do lado direito;\
\- Selecionar o tom da cor no quadrado, no lado esquerdo; \
\- Utilizar código chamado 'hexadecimal' na personalização do seu Layout.\
\
![](/files/QwSGs7vpxzIzNOWSCMb6)\
\
Quando finalizar a escolha da cor, clique em **"Usar esta cor".** Automaticamente a mesma será implementada em seu layout para uma melhor visualização de como ficará antes de salvar.

<img src="https://lh3.googleusercontent.com/JObv4BQbADvUKlZCwkc7kMvcq06kefwqIOCcwBloZmbreV7zjQzxUaDvmqC0i3x_IjHccpvlpVX73pJEZfxR7NqQOM_EiUBaAbRMjNPouwq191QtRfrfZL7NFzrnkU7aokiu-75cGj8h5lLW5CrCScW5Sv8GlwfjGZB7pbPNXKKdSmh5qbdeWBbueddYkA" alt="" data-size="original">

</details>

{% hint style="warning" %}

#### Importante! <a href="#success-3" id="success-3"></a>

Na hora de selecionar as cores de seu layout, fique atento ao contraste entre a cor principal e secundária, e entre a cor de fundo e cor de texto dos elementos. Ao fazer isso, você **evitará que elementos fiquem ocultos** ou em uma configuração que **dificulte a sua visualização/leitura**.
{% endhint %}

<details>

<summary>Cores pré-determinadas</summary>

No Flex existem **combinações de cores pré-determinadas**, que seguem o **padrão de tema para cada segmento**. \
\
Ao selecionar a combinação pré-definida, sua loja terá as mesmas cores que demonstramos no layout escolhido de acordo com o tema em uso.

<img src="/files/jHX6T5VK0XxoGge1Nly5" alt="" data-size="original">

Ao escolher a combinação, o layout mostrará a **visualização de como as cores se aplicam**, no lado direito da tela de edição. Além disso, você pode selecionar a versão mobile, para visualizar como o site é apresentado em celulares e tablets.

</details>

Após escolher as cores para os elementos, clique **"Publicar alterações"** para finalizar.

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

**Pronto! 🙌**&#x20;

As novas cores já estão aplicadas em sua loja.

{% hint style="danger" %}
**Atenção:** caso sua página não esteja condizendo com a versão do manual entre em contato para atualizar sua versão do Tema Flex.
{% endhint %}