> 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

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

<figure><img src="/files/US994Ib5VwSZ1xlewcaV" 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="/files/c1TxkSlOAe4j9t3vgZ0u" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/be3qEgPajVbG7NloIjZk" 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="/files/yM5YC6XvcQ3usCQmiois" 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="/files/bM9qxDZnm5pKv3f3d7q6" 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="/files/lIRg5h2mLTKG0bWdMUbk" 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="/files/qox4lIsPkErPaUSZGMrX" 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="/files/1sEwqyCESPbhM4EVM8WW" 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="/files/KbRJq0vxDgB1jk8jrTGF" 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="/files/wEPlXvm9saxTrjxHvXie" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

<figure><img src="/files/DwcGim8iPmOfS79QZ03w" 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="/files/OjmFJAI4BuUH31VvIiQY" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/HWbLVFvScHRoV2EsdGUm" 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! 🙌**