> 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/carrinho-de-compras.md).

# Carrinho de compras

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

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F24k9RQGTuSiZB3FuUOvy%2Fimage.png?alt=media&amp;token=e3279168-a4c0-46dd-95b9-706e4a9ed904" alt=""><figcaption></figcaption></figure>

\- **Ícone do carrinho:** você pode escolher uma das opções de ícones listados para alterar no carrinho de compra.

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F8nGFkeabLGwgKjrYMJ1R%2Fdoc25.png?alt=media&amp;token=2291e93f-0782-4717-8143-ed1d6242d6fd" alt=""><figcaption></figcaption></figure>

Na opção "**Personalizado"**, você pode fazer o upload de uma imagem e utilizá-la como ícone no carrinho, conforme imagem abaixo.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FvtcsMBBJhczSv8WOYOIg%2Fdoc26.png?alt=media&amp;token=795c8950-fb77-4b90-a250-c8cba546a932" alt=""><figcaption></figcaption></figure>

**- Quantidade de itens no carrinho:** para utilizar cores específicas da contagem dos itens do carrinho, 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.**

<div align="left"><figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FgWdmkPhpo2JalCiv1YQI%2Fimage.png?alt=media&amp;token=877db51c-41ee-464d-813d-9f75b675c21e" alt=""><figcaption></figcaption></figure></div>

Você pode configurar a **Cor de fundo** e a **Cor do texto** da contagem.

<div align="left"><figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FjnknoxpDqGb0B3SaxXp8%2Fimage.png?alt=media&amp;token=2fefcd66-eaf9-4991-8b72-34b43dc51ebd" alt=""><figcaption></figcaption></figure></div>

**Exemplo:**&#x20;

<div align="left"><figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FVM1KkOeUxm8Ib1JwaffF%2Fimage.png?alt=media&amp;token=38d6a272-090c-4488-8326-108532d2a8c0" alt=""><figcaption><p>O círculo em azul trata-se da "Cor de fundo" e da "Cor do texto", respectivamente.</p></figcaption></figure></div>

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