> 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/pagina-inicial/informacoes-de-frete-pagamento-e-compra.md).

# Informações de frete, pagamento e compra

Através dos banners de frete, parcelamento, segurança, entre outros, você pode informar aos seus clientes quais são os benefícios ao comprar em sua loja.

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

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FEgtrdsMWrfscvGsmKMSL%2Fimage.png?alt=media&amp;token=6764a797-c2e8-4598-a38a-1314125016f7" alt=""><figcaption><p>Exemplo da barra de iunformações, frete, pagamento e compra.</p></figcaption></figure>

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página inicial > Informações de frete, pagamento e compra"**.

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FG77a4vARm6a5NM0AXuZL%2Fimage.png?alt=media&amp;token=613c2b97-4f62-414c-add0-cc807ef15d2f" alt=""><figcaption></figcaption></figure>

Para habilitar essa funcionalidade, marque a opção **''Exibir os banners na home''**.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FHMLhjcWOyP044KqnYfXE%2Fimage.png?alt=media&amp;token=0efdb451-2b61-4aeb-9f74-ffe6db1c5400" alt=""><figcaption></figcaption></figure>

**- Cores:** para utilizar cores específicas, marque a opção ''**Usar estas cores''.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fz5aTxTCAETG4DmMeTkRf%2Fimage.png?alt=media&amp;token=5809e963-7b4f-4df1-b016-14b8947ea7e9" alt=""><figcaption></figcaption></figure>

Você poderá configurar a **Cor de fundo** e a **Cor do título, Cor da descrição** e **Cor do ícone.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FWcgUKD68gT6hVgzrkKMS%2Fimage.png?alt=media&amp;token=3ed75b14-98ff-4922-a603-ae32201c862a" alt=""><figcaption></figcaption></figure>

\- **Tamanho do ícone em computadores:** defina o tamanho do ícone entre **Pequeno, Médio, Grande** ou **Muito grande.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FpYz2jyuhC9qV3WiTJItl%2Fimage.png?alt=media&amp;token=c76bfa73-637f-49bd-9381-e633e6d44142" alt=""><figcaption></figcaption></figure>

\- **Tamanho do ícone em celulares:** defina o tamanho do ícone entre **Pequeno, Médio, Grande** ou **Muito grande.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FI0x0Jl8noe6He2cS0bj0%2Fimage.png?alt=media&amp;token=9a025fa6-b394-45e4-9c2f-e311caf8c674" alt=""><figcaption></figcaption></figure>

**- Posição do ícone em computadores:** defina a posição do ícone entre **Ao lado** ou **Acima.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fs7QWgwFEUglpSbxsjEpS%2Fimage.png?alt=media&amp;token=52eca37a-2873-4bc2-830b-05aba7a8bcc3" alt=""><figcaption></figcaption></figure>

**- Posição do ícone em celulares:** defina a posição do ícone entre **Ao lado** ou **Acima.**&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FqN3iPlbddWZLbnuYcJR5%2Fimage.png?alt=media&amp;token=236bf537-8e4f-449c-bf11-13e5763ccc77" alt=""><figcaption></figcaption></figure>

**- Mostrar os banners como: f**ormato carrossel, onde eles aparecem lado a lado e passam automaticamente. Um abaixo do outro onde ficam em sequência vertical, ou ainda no formato em grade, organizados em blocos.

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fl9opSBCa40EdPyYhwGKy%2Fimage.png?alt=media&amp;token=38f12a1a-7959-477d-a001-6457444c18a0" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

#### ⚠️**Importante:** O formato em grade funciona somente com o ícone posicionado acima.

{% endhint %}

Você pode cadastrar até 4 informações, configurando entre:&#x20;

**- Ícone:** defina ícones pré-estabelecidos para as informações de frete, pagamento e compra.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FC6bsyaLiQlqlOnkmo9jg%2Fimage.png?alt=media&amp;token=9f58081c-9667-4f39-a7bc-9860109e81c1" alt=""><figcaption></figcaption></figure>

**- Título:** defina o título que desejar.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FUDZrvKPrcrLZPm84IyOB%2Fimage.png?alt=media&amp;token=9ea98c73-fcd7-454d-b083-388606118175" alt=""><figcaption></figcaption></figure>

**- Descrição:** defina uma descrição, que será exibida abaixo do título.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F9CZTtptRsedzD6eLHikR%2Fimage.png?alt=media&amp;token=39260a05-b02b-4d27-8f6b-00d3b733f5a4" alt=""><figcaption></figcaption></figure>

**- Link:** adicione um link na informação cadastrada.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fnp45YezXkUBbhUmmnqI4%2Fimage.png?alt=media&amp;token=243261f9-ce23-4e68-888d-b1e0ec647253" alt=""><figcaption></figcaption></figure>

Caso deseje fazer o upload de um ícone personalizado, clique em ''**Selecionar imagem''** e faça o upload.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FtcLMRs6wt4r4sHt3lee1%2Fimage.png?alt=media&amp;token=7874c84c-89c2-4ad6-b32e-80a76a88a5b0" alt=""><figcaption></figcaption></figure>

Feito isso, na opção de ''**Ícone''**, selecione ''**Imagem personalizada**'', para que a imagem seja exibida.

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FdA4XJelcz1Nk5W8j8JDj%2Fimage.png?alt=media&amp;token=a37e1303-6c03-4e26-8c03-0946d8957399" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Importante**

O Flex permite cadastrar até 4 informações personalizadas.&#x20;
{% endhint %}

{% hint style="warning" %}
**Importante**

Para que essa seção seja ativa na página inicial, é necessário que o módulo esteja habilitado como "visível" deixando o olho em azul:

![](https://ajuda.temaflex.com.br/~gitbook/image?url=https%3A%2F%2F2606432350-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FdmDGRqcCSJvlyHS2pQ1k%252Fuploads%252FFofkmrAEXWG3DCqxlS4J%252Fativo.png%3Falt%3Dmedia%26token%3Dabecbeec-5401-4a74-851d-875e2ff680de\&width=300\&dpr=4\&quality=100\&sign=fe0acf17\&sv=2)
{% endhint %}

Por último, clique em **"Publicar Alterações"** para finalizar.

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1660828096358-bot%C3%A3o%20publicar%20altera%C3%A7%C3%B5es%20do%20layout.jpg)

**Pronto! 🙌**