# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajuda.temaflex.com.br/personalizar-layout/cores-da-sua-marca.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.