# 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FExbGNNZN1bBShHBy0l62%2Fimage.png?alt=media&#x26;token=2b9fd239-3be9-4311-8b31-fbeb7863ed80" 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**. \
\
![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FchILdD5PkRe8aVLpVX3Y%2Fimage.png?alt=media\&token=f8409b4d-1e4e-4534-9fb4-5827ebbdb767)\
\
2 - **Botão de compra:** você poderá personalizar tanto a cor de fundo, quanto a cor do texto do botão.\
\ <img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FOyxnzrKlm5kshjrw3WKI%2FCoresDaSuaMarca_Bot%C3%A3o.png?alt=media&#x26;token=4eda899e-ec5a-4ddd-8a69-df9ab0df79ae" 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;**\
![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fe5ocvYCWcfi5r7yhz8pR%2Fimage.png?alt=media\&token=081a259c-60ce-4af8-8e63-593c3650db0e)\
\
\&#xNAN;**- Cores invertidas no botão de compra.**\
![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FdVzxdshxF0jbqMbf1MTl%2Fimage.png?alt=media\&token=118a8982-7a76-4e79-beeb-ee99b45ba277)\
\
3 - **Cores de contraste:** você poderá personalizar tanto a cor de fundo, quanto a cor do texto.\
\
![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FDpiGsjuo1txUpq8PEJWA%2Fimage.png?alt=media\&token=b13c31f1-51af-4939-80ff-c2cbb944cf7d)\
\
4 - **Etiquetas de frete grátis e desconto:** você poderá personalizar tanto a cor de fundo, quanto a cor do texto da etiqueta.<br>

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FnbIwHsRrR04vNyL8DfFa%2Fimage.png?alt=media\&token=d972f0db-d5e1-496f-9ff3-2173eb558c91)

**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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FrmRQaKrmPEH5aKR1Jw8s%2Fimage.png?alt=media&#x26;token=3325a8ee-17ed-4c36-80fb-3bc43eb56e79" 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.\
\
![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FOuvgftFMdtPbgg7BTfBL%2Fimage.png?alt=media\&token=654ae953-dc2a-48eb-8c07-81600309c322)\
\
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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FeuYdf368hjsKsfaWij8U%2Fdoc3.png?alt=media&#x26;token=cbdac73a-0514-477b-81d0-f12987430c50" 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="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FkShIs4VGFYGg2U9iq1n3%2Fimage.png?alt=media&#x26;token=bcd87a08-5898-4874-bb68-583012612354" 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 %}