# Base de conhecimento TemaFlex

Aqui você encontra as principais informações para configurar a sua loja virtual Nuvemshop com o Tema Flex.

{% hint style="warning" %}
**Ainda não contratou o Tema Flex para sua loja virtual?** [Clique aqui](/sobre-o-flex/contratacao-e-recomendacoes).
{% endhint %}

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

### Por onde começar? 🤔 ​​ ​

Para facilitar a navegação, dividimos os módulos do Flex da mesma forma que você vai encontrar no seu painel Nuvemshop. Escolha uma das opções abaixo para abrir o respectivo módulo:

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Cores da sua marca</strong></td><td>1 bloco de conteúdo</td><td></td><td><a href="/pages/Lw3HyrA9LPywuWX0U6Cw">/pages/Lw3HyrA9LPywuWX0U6Cw</a></td></tr><tr><td><strong>Tipo de Letra (fontes)</strong></td><td>1 bloco de conteúdo</td><td></td><td><a href="/pages/2TIcDYW95K7vp0qeQhlY">/pages/2TIcDYW95K7vp0qeQhlY</a></td></tr><tr><td><strong>Estilos de Layout</strong></td><td>1 bloco de conteúdo</td><td></td><td><a href="/pages/yod6ewe9Yc7DJYaVtzxV">/pages/yod6ewe9Yc7DJYaVtzxV</a></td></tr><tr><td><strong>Cabeçalho</strong></td><td>11 blocos de conteúdo</td><td></td><td><a href="/pages/AKthRDrvepq57DEOR20A">/pages/AKthRDrvepq57DEOR20A</a></td></tr><tr><td><strong>Carrinho de Compras</strong></td><td>5 blocos de conteúdo</td><td></td><td><a href="/pages/aIWAnLjWRJLoMqavn0n9">/pages/aIWAnLjWRJLoMqavn0n9</a></td></tr><tr><td><strong>Página Inicial</strong></td><td>22 blocos de conteúdo</td><td></td><td><a href="/pages/A1AgMWATZBBEOAu2f9ME">/pages/A1AgMWATZBBEOAu2f9ME</a></td></tr><tr><td><strong>Página de Categoria</strong></td><td>2 blocos de conteúdo</td><td></td><td><a href="/pages/iwVyveohBuqBkmSmb3R0">/pages/iwVyveohBuqBkmSmb3R0</a></td></tr><tr><td><strong>Página de produto</strong></td><td>9 blocos de conteúdo</td><td></td><td><a href="/pages/IggAzsgvb1k2uY5JJUG8">/pages/IggAzsgvb1k2uY5JJUG8</a></td></tr><tr><td><strong>Card de produto</strong></td><td>8 blocos de conteúdo</td><td></td><td><a href="/pages/Q1s5UgAvZpDE2w87dQqE">/pages/Q1s5UgAvZpDE2w87dQqE</a></td></tr><tr><td><strong>Rodapé da página</strong></td><td>10 blocos de conteúdo</td><td></td><td><a href="/pages/22pEp5Gtw3YbfotlRgiU">/pages/22pEp5Gtw3YbfotlRgiU</a></td></tr><tr><td><strong>Ferramentas Adicionais</strong></td><td>2 blocos de conteúdo</td><td></td><td><a href="/pages/TwwCpJYqB0xu5s2qHF8G">/pages/TwwCpJYqB0xu5s2qHF8G</a></td></tr><tr><td><strong>Edição de CSS personalizado</strong></td><td></td><td></td><td><a href="/pages/2pGdpsFfUrwUEcVqlFWE">/pages/2pGdpsFfUrwUEcVqlFWE</a></td></tr></tbody></table>

#### Conteúdos mais buscados

* [Cadastrando ícones no menu](/personalizar-layout/cabecalho/icones-nos-menus)
* [Criando um slide de categorias na home](/personalizar-layout/pagina-inicial/categorias-principais) (destaques)
* [Criando uma listagem de blog na home](/personalizar-layout/pagina-inicial/postagens-do-blog)
* [Incluindo depoimentos na página inicial](/personalizar-layout/pagina-inicial/depoimentos)
* [Filtros e paginação das categorias](/personalizar-layout/pagina-de-categoria/filtros-e-paginacao)
* [Galeria de fotos do produto](/personalizar-layout/pagina-de-produto/galeria-de-fotos)
* [Selos personalizados](/personalizar-layout/pagina-de-produto/selos-personalizados)
* [Foto do produto no card](/personalizar-layout/item-de-produto/foto-do-produto)
* [Botão de compra pelo WhatsApp](/personalizar-layout/pagina-de-produto/opcoes-de-compra-e-pagamento)
* [Definindo as fontes do layout](/personalizar-layout/tipo-de-letra)
* [Campos personalizados](/personalizar-layout/pagina-de-produto/campos-personalizados)
* [Redes sociais](/personalizar-layout/pagina-inicial/postagens-do-instagram)

#### Ainda não encontrou o que procurava?

Entre em contato com nosso suporte através do **<suporte@temaflex.com.br>** ou diretamente com um de [nossos parceiros](https://temaflex.dooca.store/parceiros-flex) para um atendimento adequado.

{% hint style="danger" %}
**Atenção:** caso sua pagina não esteja condizendo com a versão do manual entre em contato para atualizar sua versão do Tema Flex.
{% endhint %}


# Treinamento em Vídeo

Treinamento completo do Tema Flex

{% embed url="<https://youtu.be/0AFo62UlhHw>" %}


# Manual e suporte

O objetivo deste manual é padronizar e centralizar nossa documentação para todos os clientes contratantes dos nossos temas para **Nuvemshop**.

Antes de entrar em contato para solicitar um suporte, pesquise se o conteúdo referente à sua dúvida está incluso no manual. Ele abrange todas as funcionalidades de edição do layout, e os principais módulos padrão da plataforma.

Se você precisar de algum material complementar em vídeo, poderá acessar nossa playlist no YouTube, com mais de 10h de conteúdo sobre gestão de loja virtual com **Nuvemshop**.

{% embed url="<https://www.youtube.com/playlist?list=PLjqZTg-KCmj8OUiyJy_psw4nbIAw-Sqz1>" %}
[Clique aqui](https://www.youtube.com/playlist?list=PLjqZTg-KCmj8OUiyJy_psw4nbIAw-Sqz1) para ser redirecionado à nossa playlist Nuvemshop.
{% endembed %}

Se você precisar de suporte após a leitura do manual, entre em contato através do **<suporte@temaflex.com.br>**, em horário comercial, ou diretamente com a agência que desenvolveu sua loja.

{% hint style="danger" %}
**Atenção:** caso sua pagina não esteja condizente com a versão do manual entre em contato para atualizar sua versão do **Tema Flex** ou contrate a **versão oficial** [clicando aqui](https://www.nuvemshop.com.br/loja-layouts-nuvem/flex).
{% endhint %}


# Contratação e recomendações

Saiba como contratar e instalar o tema Flex em sua loja virtual

{% embed url="<https://youtu.be/AflalFiOjy8>" %}

A contratação do **tema Flex para Nuvemshop** é feito <mark style="background-color:yellow;">exclusivamente pelo site da Nuvemshop</mark>, através do link <https://www.nuvemshop.com.br/loja-layouts-nuvem/flex>, e sua instalação acontece imediatamente após a validação do pagamento pela plataforma.

O processo de compra é bastante simples. Acessando o link acima, e logado no seu painel da Nuvemshop, você deve clicar em "Compre este tema", conforme imagem abaixo.

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

Feito isso, você será direcionado ao painel, para a tela de pagamento, onde deverá escolher entre Cartão de crédito ou Boleto, PIX e outros.

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

Depois disso, você será direcionado para finalizar a compra no Mercado Pago. Ao finalizar o processo, clique para **voltar ao site**.

Após a contratação do tema Flex em sua loja, você poderá iniciar a personalização do tema <mark style="background-color:yellow;">através de um rascunho</mark>. Para isso, acesse **Loja Online > Layout**, e na área de Teste em rascunho, clique em **Criar rascunho**, como na imagem abaixo:

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

Depois disso, selecione a opção: **Com outro layout**, e clique em testar mudanças, conforme mostrado na imagem abaixo:

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

Na lista de temas, basta selecionar uma das versões do **Flex** e clicar em **testar este tema**.

Pronto! O Flex será instalado na sua loja rascunho e estará pronto para você iniciar a personalização.

{% hint style="danger" %}
Ao utilizar o tema em formato rascunho, algumas funcionalidades podem não funcionar. Caso identifique que algum módulo não foi ativado em seu tema, aguarde a publicação e tente fazer a configuração novamente após estar publicado.
{% endhint %}


# Lista de Funcionalidades

O que você já encontra no Tema Flex?

* [x] Selos Personalizados no card e na página de produto
* [x] Slider desktop e mobile
* [x] Preço no PIX no card de produto
* [x] Preço no PIX na página do produto
* [x] Ícone nos links do menu principal (dekstop e mobile)
* [x] Ícones personalizados no carrinho
* [x] Botão de compra rápida no card de produto
* [x] Botão de Whatsapp no card de produto e página de produto
* [x] Botão de compra fixo na página de produto
* [x] Carrinho rápido (lateral)
* [x] Slide de categorias (banners formato stories)
* [x] Slide de marcas
* [x] Até 7 vitrines na página inicial
* [x] Listagem de produtos em bloco ou slider nas vitrines
* [x] Módulo depoimentos na página inicial
* [x] Selos de pagamento personalizados no rodapé
* [x] Selos de segurança personalizados no rodapé
* [x] Campo para WhatsApp no formulário de newsletter
* [x] Banner popup com formulário + imagem destaque
* [x] Módulo posts do blog (resumo) na página inicial
* #### Calculadora de frete grátis (quanto falta?)
* [x] Botão de compra pelo WhatsApp no produto
* [x] Alinhamento dos textos no Card de produto
* [x] Módulo de vídeo na página inicial
* [x] Módulo menu adicional na página inicial
* [x] Bandeiras para multi-idiomas no topo e menu mobile
* [x] Mensagem personalizada no topo
* [x] Submenu em cascata ou bloco
* [x] Slide de vantagens no cabeçalho
* [x] **\[NOVO]** Módulo FAQ na página inicial, interna e página de produto
* [x] **\[NOVO]** Galeria de fotos separada por cor na página de produto
* [x] Vitrine de produtos com banner (seleção de produtos)
* [x] Personalizar cor de fundo e texto em todos os módulos
* [x] Escolha entre 5 estilos de cabeçalho
* [x] Escolha entre 2 estilos de rodapé


# Log de mudanças e versões

Acompanhe as atualizações do Tema

### Atualização 03/09/26

#### 🆕 Novidades

* Adicionamos uma barra de progresso no carrinho para promoções automáticas de brindes. Os brindes são identificados como gratuitos e não podem ter a quantidade alterada nem ser removidos individualmente.
* A página de produto agora exibe corretamente promoções com desconto parcial no frete, indicando o percentual ou valor do desconto e a condição mínima da promoção.

#### ✨ Melhorias

* A notificação de produto adicionado ao carrinho agora mostra o percentual de desconto, quando aplicável.
* Melhoramos a apresentação dos preços, descontos e frequências nas opções de compra por assinatura.

### Atualização 27/08/26

#### 🆕 Novidades

* Adicionamos suporte a cupons de desconto na página do carrinho e no carrinho lateral. O recurso pode ser ativado pelos controles do painel, permitindo aplicar e remover cupons e visualizar o desconto no total da compra.
* Adicionamos suporte a descontos parciais no frete, exibindo o valor original, o valor com desconto e a economia no resumo do carrinho.
* Ampliamos a compatibilidade com aplicativos e recursos externos, com novos pontos de integração no rodapé e nas recomendações de produtos relacionados e complementares.

#### ✨ Melhorias

* Melhoramos a qualidade das imagens de produtos. A página de produto agora utiliza imagens em alta resolução no zoom e na galeria, sem ampliar imagens além da resolução disponível. As vitrines e listas de produtos também passam a selecionar automaticamente a resolução mais adequada para cada tela.
* Ajustamos as etiquetas do checkout para respeitarem as cores e o arredondamento configurados pelo tema.

#### 🛠 Correções

* Corrigimos páginas de categorias que podiam ficar incompletas ou vazias ao ocultar produtos sem estoque. Essa configuração agora segue o controle nativo da lista de produtos da Nuvemshop.
* Corrigimos a situação dos pedidos já entregues na área do cliente, que agora são identificados corretamente como “Entregue”.

### Atualização 05/08/26

#### ✨ Melhorias

* Exibição do preço original e do percentual de desconto no subtotal dos produtos em promoção no carrinho.

#### 🛠 Correções

* Correção na seção de vídeo da página inicial em largura total, evitando problemas no posicionamento do conteúdo sobre o vídeo.
* Correção no carregamento das páginas de categoria e busca quando determinados controles de navegação não estão presentes.
* Ajuste na atualização de preço, disponibilidade e botão de compra ao abrir ou trocar variações na compra rápida.
* Ajuste na adição ao carrinho de produtos por assinatura.

### Atualização 25/06/26

#### 🛠 Correções

* Correção na exibição do botão de compra nas vitrines e na compra rápida, evitando que o botão fique oculto ou desalinhado durante o carregamento.
* Ajuste em produtos com preço sob consulta, para não exibir ícone de carrinho quando a ação correta é consultar preço.
* Correção na seleção de variações na compra rápida, evitando interferência na galeria de imagens da página de produto.
* Ajuste na exibição do link para ver o conteúdo de kits no carrinho.

### Atualização 18/06/26

#### 🆕 Novidades

* Suporte à exibição de produtos vendidos em kit, mostrando os itens que compõem o kit na página de produto e no carrinho.

### Atualização 10/06/26

#### 🆕 Novidades

* Inclusão de novos pontos de integração para aplicativos e recursos externos na página de produto.

#### ✨ Melhorias

* Melhoria no carregamento inicial das imagens de produto exibidas nas vitrines, ajudando a otimizar a performance da loja.
* Ajuste no controle de consentimento para respeitar melhor as configurações de privacidade da loja.

#### 🛠 Correções

* Correção no botão de adicionar ao carrinho em cenários com botões adicionados por integrações externas.

### Atualização 01/06/26

#### 🆕 Novidades

* Suporte a vídeos nativos na galeria da página de produto, permitindo exibir vídeos junto às imagens do produto.

### Atualização 28/05/26

#### 🆕 Novidades

* Suporte a filtros e ordenação na página de resultados de busca, facilitando a navegação dos clientes pelos produtos encontrados.
* Inclusão de novos pontos de integração para aplicativos e recursos externos no cadastro de conta e na página de produto.

#### ✨ Melhorias

* Atualização de compatibilidade com mudanças recentes da plataforma Nuvemshop.

### Atualização 21/05/26

#### 🆕 Novidades

* Inclusão de novos pontos de integração para aplicativos e recursos externos em áreas como cabeçalho, rodapé, carrinho, produto, newsletter e vitrines de produtos.
* Nova opção para personalizar a cor do preço com desconto por forma de pagamento.

#### ✨ Melhorias

* Melhorias visuais no carrinho e no cálculo de frete.
* Ajuste na exibição do seletor de quantidade em vitrines com muitos produtos por linha.
* Inclusão de novos controles no painel de personalização do tema.

#### 🛠 Correções

* Correção do link de compra por WhatsApp na página de produto para considerar corretamente a variação selecionada pelo cliente.

### Atualização 05/05/26

#### 🆕 Novidades

* Nova opção para ativar ou desativar letras maiúsculas no menu de departamentos.

#### 🛠 Correções

* Correção no menu suspenso do cabeçalho da página inicial, evitando que ele feche ao mover o cursor entre o item principal e o submenu.

### Atualização 29/04/26

#### 🆕 Novidades

* Inclusão de uma observação no painel sobre quando o seletor de quantidade aparece nos produtos da vitrine.

#### ✨ Melhorias

* Ajuste no link do selo do Google exibido no rodapé, direcionando sempre para o relatório correspondente.

#### 🛠 Correções

* Correção das regras de exibição do seletor de quantidade na compra rápida.

### Atualização 21/04/26

#### ✨ Melhorias

* Carrossel de produtos recomendados/relacionados passa todos os produtos da linha no desktop.

#### 🛠 Correções

* Correção de inconsistências visuais no hover da segunda imagem do produto.
* Atualização das regras CSS da imagem secundária para evitar sobreposição/click indevido (`visibility` e `pointer-events`).
* Remoção de regras antigas de hover (`item-with-two-images`) que causavam conflito com a implementação atual.
* ⁠Remoção de regras do componente de imagem do produto na listagem que não possuíam estilos configurados.

### Atualização 16/04/26

#### 🆕 Novidades

* Suporte a link no ícone do feed do Instagram.
* Ajuste na lógica da barra de topo para exibir o seletor de idioma com comportamento mais consistente.
* Refatoração da imagem de item para uso de componente dedicado, com estrutura mais modular e otimização de performance.

#### ✨ Melhorias

* Checagem de variações de tamanho em vitrine usando regex. Permitindo que "Tamanho de/do" seja considerado como variação de tamanho.
* Melhorias de estilo/comportamento das imagens de produto na vitrine (imagem principal/secundária e formatos de proporção).

#### 🛠 Correções

* Correção da visibilidade do placeholder do botão de compra no card de produto.
* Correção de escopo nas consultas de variação por cor para atuar apenas no produto correto (para exibir no produto único da página inicial).

### Atualização 01/04/26

#### 🆕 Novidades

•⁠ ⁠Exibição da *marca do produto* na página de produto (configurável no editor).

•⁠ ⁠Suporte a *imagem de fundo no Cabeçalho e no Rodapé*, com novas opções de configuração e estilos.

#### ✨ Melhorias

•⁠ ⁠Ajustes no layout do *feed do Instagram* na home, com refinamento de colunas e organização visual.&#x20;

•⁠ ⁠Refinamento do *animação da barra de anúncios*, com ajustes de repetição e estilos para animação mais estável.

•⁠ ⁠Inclusão de traduções e novos controles no painel para os recursos adicionados.

#### 🛠 Correções

•⁠ ⁠Correção da lógica da sidebar de filtros em categoria, para evitar exibição/comportamento incorreto quando não há filtros disponíveis.

### Atualização 18/03/26

#### 🆕 Novidades

* Nova opção para exibir **conteúdo SEO da categoria** abaixo da listagem de produtos.
* Recurso configurável no editor do tema, com instrução para uso via página institucional no formato `cat-{slug}`.

#### 🛠 Correções

* Ajustes estruturais no template de categoria/paginação para evitar marcação desnecessária em cenários sem paginação.

### Atualização 09/03/26

#### 🆕 Novidades

* Nova opção para exibir a **quantidade de produtos vendidos** na página de produto.
* Nova opção para exibir o **percentual de desconto (% OFF)** ao lado do preço no produto.
* Nova opção de layout para posts do blog no mobile: **Grade** ou **Carrossel (slider)**.

#### 🛠 Correções

* Ajuste de alinhamento de textos na seção institucional da home, com comportamento responsivo mais consistente (centralizado por padrão, alinhado à esquerda se houver imagem).

### Atualização 05/03/26

#### 🛠 Correções

* Correção de redimensionamento indevido da imagem de boas-vindas em dispositivos móveis.
* Ajuste das dimensões padrão dos banners promocionais mobile no editor do tema (`640x320`) para melhor proporção no layout.
* Correção de layout no banner de serviço para evitar desalinhamento quando há ou não descrição.

### Atualização 26/02/26

#### 🆕 Novidades

* Suporte completo para produtos **somente por assinatura** na vitrine e na página de produto.
* Ajuste do texto do botão para contexto de assinatura (ex.: “Assinar”) e adaptação do layout dos seletores nesse cenário.

#### ✨ Melhorias

* Evolução da animação da adbar (marquee) com controle via JavaScript para um comportamento mais consistente.
* Refatoração da estrutura do placeholder do botão de compra para padronizar o comportamento entre produto, vitrine e quickshop.
* Transições visuais do botão de compra aprimoradas (estado de carregamento/sucesso com CSS dedicado).

#### 🛠 Correções

* Correção na notificação de “adicionado ao carrinho” para manter posicionamento fixo correto.
* Correção de conflito de classes/seletores no placeholder do add-to-cart que podia disparar lógica indevida de clique.
* Correção de seleção do placeholder no JS para usar o elemento correto em cada contexto.
* Correção no fluxo de add-to-cart para evitar cálculo de largura inconsistente no placeholder.
* Correção de link destacado do menu quando a categoria possui subcategorias.
* Ajuste final de CSS (`overflow`) na área da adbar para evitar vazamento visual durante animação.

### Atualização 12/02/26

#### ✨ Melhorias

* Refinamento da adbar com animação marquee controlada por JavaScript.
* Duração da animação ajustada dinamicamente conforme o tamanho do texto, deixando o movimento mais fluido.

#### 🛠 Correções

* Correção na abertura de links do Instafeed para evitar conflito com modal/fancybox.
* Correção de preço oculto no produto, com ajuste no controle do container de pagamentos via JS.

***

### Atualização 28/01/26

#### 🆕 Novidades

* Nova configuração de animação da barra de anúncios.
* Possibilidade de escolher entre carrossel e texto correndo da direita para a esquerda.

#### ✨ Melhorias

* Ajustes nas regras de promoções e descontos combináveis.
* Melhoria de textos de aviso para cenários de promoções não acumuláveis.
* Ajuste visual no posicionamento de setas de slider.

#### 🛠 Correções

* Correção para ocultar o módulo de pagamentos quando o produto não exibe preço.
* Correção de comportamento do Instafeed em posts com link externo.

***

### Atualização 19/01/26

#### 🆕 Novidades

* Novos módulos de imagem + texto na home.
* Novas opções de layout/configuração para esses módulos, com suporte em CSS e JavaScript.

***

### Atualização 19/12/25

#### ✨ Melhorias

* Aprimorada a extração de src de imagens no add-to-cart, reduzindo inconsistências de imagem no carrinho/notificações.

***

### Atualização 17/12/25

#### ✨ Melhorias

* Pacote de performance com foco em LCP e lazy loading.
* Melhorias em preload de imagens e carregamento de fontes.
* Ajustes na lógica de banner de categoria com imagem personalizada.
* Melhoria semântica no header para evitar múltiplos H1.

***

### Atualização 19/11/25

#### 🆕 Novidades

* Novo módulo de FAQ na home, com perguntas e respostas configuráveis.
* Opção para alterar o título da seção de produtos complementares.

#### ✨ Melhorias

* Ajustes na lógica de exibição de preço com desconto por forma de pagamento.

#### 🛠 Correções

* Correções na exibição de preço com desconto na vitrine/listagem.
* Remoção de opções legadas de etiqueta de oferta (% OFF).
* Correções gerais de pré-release (traduções, exibição de preço sem impostos e comportamento da FAQ).
* Ajustes de alinhamento em preços/cards.
* Correções pós-deploy em zoom de galeria, botões e placeholders.

### Atualização 17/11/25

#### 🆕 Novidades

* Novo módulo de FAQ, permitindo criar perguntas e respostas diretamente pelo editor do tema.
* Opção de alterar ou remover o título da seção de produtos complementares.

#### ✨ Melhorias

* Sistema de galeria por cor aprimorado, agora aceitando nomes de cores com barra ( / ) e espaços.\
  Ex.: “Preto/Branco”, “Vermelho Escuro”.
* Lógica aperfeiçoada para exibição do preço com desconto por meio de pagamento.
* Ajustes no alinhamento do ícone do Pix nas opções de desconto.

#### 🛠️ Correções

* Remoção das opções de edição de etiquetas de desconto (% OFF) que estavam obsoletas.

### Atualização 08/10/25

#### Novidades

•⁠ ⁠Banner promocional na página do produto •⁠ ⁠Banner de topo para vitrines na página inicial

#### Melhorias

•⁠ ⁠Informações de frete, pagamento e compra ajustado à largura do conteúdo

•⁠ ⁠Ajuste no espaçamento entre banners para banners de categoria e promocionais

#### Correções

•⁠ ⁠Removido espaçamento extra entre o ícone de carrinho e conta em alguns estilos de cabeçalho

•⁠ ⁠⁠Correções de traduções

•⁠ ⁠Ajuste na largura dos pop-ups

•⁠ ⁠Cor do ícone na barra de anúncios

### Atualização 06/08/25

#### Melhorias

•⁠ ⁠Revisão das colunas no módulo de Instagram (@ e galeria)

•⁠ ⁠Exibição dos selos personalizados na página do produto (posição do texto e tamanho)

•⁠ ⁠Exibição do tamanho único no item de produto quando existem outras variações

•⁠ ⁠Opção de passar automaticamente o carrossel de marcas

#### Correções

•⁠ ⁠Inclusão de Link para o banner em celulares (produtos com banner)

•⁠ ⁠Tamanhos no item de produto quebrando em duas linhas em celulares

•⁠ ⁠Seta do YouTube sobrepondo botão fixo na página de produto

•⁠ ⁠Informações de frete sobrepostas e em duas linhas no cálculo de frete

•⁠ ⁠Exemplos dos banners de serviços com botão para edição (alguns lojistas pensavam que eram conteúdo real)

### 07/07/25

#### Adicionado

* Opção de configurar a ação do botão "Ver mais produtos" do carrinho

#### Melhorias

* CSS do filtro de preço na página de categoria

#### Correções

* Revertido a remoção de `height: auto !important;` do `.user-content img`&#x20;
* Textos que estavam exibindo em espanhol sem tradução

### 30/06/25

#### Adicionado

* Opção de personalizar a mensagem de sucesso do formulário de pop-up

#### Melhorias

* Imagem das postagens personalizadas do Instagram abrem em uma galeria "fancybox"

#### Correções

* Erros de inglês e espanhol nas traduções
* Alterado CSS para o formulário de busca no iOS
* Ajustado espaçamento lateral quando o conteúdo está ocupando largura total
* Condição para exibir somente o @ do instagram no módulo
* Botões de navegação da barra de anúncios agora só aparecem se há mais de um anúncio
* Ajustada a largura do botão da mensagem institucional em celulares
* Removido `height: auto !important;` do `.user-content img`&#x20;

### 18/06/25

#### Melhorias

* Barra de anúncios agora exibe setas por padrão e é alinhado ao centro verticalmente
* Borda arredondada na imagem da mensagem institucional
* Ajuste de cores para menu hamburger

#### Correções

* Alterada condição para ocultar módulo exemplo de mensagem institucional
* Linha do título da mensagem institucional quando alinhado ao centro exibia à esquerda
* Quantidade de posts exibidos no feed do Instagram não estava funcionando
* Banners de categorias sem espaçamento quando houvesse 2 linhas
* Removido `!important` de `.user-content` para lojistas poderem alterar a descrição como quiser
* Ajustes no layout do item quando alinhado à esquerda
* Ajustes no bullet das cores do item não estava com background e borda da cor correta
* Banner de serviços estava exibindo ícone acima do texto em celulares quando selecionado ao lado
* Setas sobrepondo banners informativos do produto em celulares

### 02/06/25 - Release Melhorias Gerais 🔔

#### Novidades

* Banner no carrinho
* Opção de alterar texto do botão de compra (página de produto)
* Opção de exibir banners de serviços em grade 2x2 em celulares
* Opção de alterar a posição dos banners informativos na página de produto

#### Correções

* Botão de fechar sobre o texto na mensagem de popup
* Label de esgotado duplicado

#### Melhorias

* Tempo de expiração de cookie exibe que somente números são aceitos

### 16/05/25 - Release Melhorias Gerais 🔔

#### Adicionado

* Opção de adicionar banner na página em construção
* Opção de alterar (ou remover) o título "Descrição" no produto
* Opção de selecionar a quantidade de depoimentos para exibir em computadores
* Opção para destacar link no menu principal (em computadores)
* Opção de passar os produtos automaticamente nas vitrines

### 29/04/25 - Release Melhorias Gerais 🔔

#### Adicionado

* Opção de alinhamento dos textos no item (esquerda ou centro)
* Opção de personalizar o ícone da conta no cabeçalho
* Opção de personalizar a cor do preço principal do item
* Opção de personalizar a cor do preço principal na página de produto
* Opção para exibir informações de contato no menu mobile

#### Alterado

* Melhoria de layout para os depoimentos da home, com limite de altura e exibindo barra de rolagem
* Cor da mensagem de atenção no checkout, para dar mais ênfase

### 10/04/25 - Release Melhorias Gerais 🔔

#### Adicionado

* Opção para exibir o vídeo do produto abaixo do carrossel e do formulário
* Opção para posicionar a mensagem de cookies (esquerda, centro, direita)
* Opção de exibir tamanho único para produtos sem variações ou com somente uma variação

#### Alterado

* Redesign do botão fixo de compra na página do produto
* Ajustes na mensagem de cookies

### 03/04/25 - Release Melhorias Gerais 🔔

#### Adicionado

* Opção de alterar o texto e o link do botão da vitrine "Ver todos os produtos"
* Opção de formato 9:16 para a imagem do item de produto

#### Alterado

* Link do banner inferior da página de categoria
* Ajuste na posição do ícone do menu quando o cabeçalho possui logo à esquerda e menu ao lado
* Ajuste no banner quando tiver link na vitrine "produtos com banner"
* Ajuste no espaçamento entre submenu e menu quando a opção de menu for largura total e opção de cabeçalho for logo à esquerda e menu ao lado
* Correção da imagem esticada nos banners de serviços

### 17/03/25 - Release Melhorias Página Personalizada 🔔

#### Alterado

* Nome da página institucional para página personalizada
* Botão para as seções customizadas com opção de texto, cores, link e abrir em nova janela

### 06/03/25 - Release novas fontes + Largura total + ajustes 🔔

#### Adicionado

* Novas fontes: Onest, Quattrocento Sans, Fraunces (títulos) e Sacramento (títulos)
* Opção para a largura das seções ocuparem 100% da tela

#### Alterado

* Erro de placeholder não exibia seção de produtos com banner
* Banner dos produtos com banner não estava ajustando à coluna
* Exibir ESGOTADO no botão fixo de compra quando não tiver estoque

### 24/02/25 - Release ajustes gerais 🐞

#### Adicionado

* Opção de alterar a quantidade de produtos por linha nos Produtos com Banner
* Descontos progressivos na página de produto

#### Alterado

* Correção para ícone de banner de serviços que não exibia (Safari)
* Correção da altura da imagem no quickshop (Safari)
* Correção Categorias principais não exibia o conteúdo no painel, somente o placeholder
* Seção "Mensagem institucional" não exibia o conteúdo no painel quando houvesse apenas imagem
* Cores sem definição no item exibia apenas "+X cores"
* Ajuste na largura da variação pequena do logo
* Ajustes visuais nas páginas Blog e Post do blog
* Ajuste do corte da parte superior do item quando tem animação dentro de um slider-wrapper
* Removido cor de fundo do botão "play" (vídeo na home)
* Layout do banner em Produtos com Banner, agora é exibido como se fosse mais um produto na linha
* Correção de breadcrumb e tradução na página de alteração de senha

### 17/02/25 - Release Flex Joias + Drag and Drop Módulos Home 🔔

#### Adicionado

* Adicionado versão de Joias do Flex
* Adicionado drag and drop (arrastar e soltar) para os módulos da home

### 03/02/25 - Release Blog 🔔

#### Adicionado

* Estrutura de blog nativa Nuvemshop
* Produtos recomendados

### 06/01/25 - Release correções gerais 🐞

#### Alterado

* Corrigido ícone do play no vídeo do YouTube na home
* Corrigido quando a opção de preço unitário está marcada e o produto não possui variação 'Quantidade'
* Corrigido a contagem de produtos na paginação das categorias

### 19/11/24 - Release correções gerais 🐞

#### Alterado

* Corrigido bug do carrossel das categorias principais
* Correções de traduções

### 14/11/24 - Release Preço unitário + Marca + ajustes 🔔

#### Adicionado

* Opção para mostrar o preço unitário para produtos que tenham a variação 'Quantidade'
* Opção para exibir a marca do produto na lista
* Opção para alterar o nome do "Nosso local" na calculadora de frete

#### Alterado

* Contagem errada na lista de produtos quando há mais de 4 variações

### 23/10/24 - Release Preço em destaque + Botão Whats no Item 🔔

#### Adicionado

* Opção de "Preço em destaque" para definir qual opção de preço aparecerá por primeiro no item
* Botão de WhatsApp no item do produto

#### Alterado

* Correções de traduções

### 03/10/24 - Release Carrinho Rápido + Notificações 🔔

#### Adicionado

* Opção para exibir o carrinho ao adicionar produto quando for compra rápida
* Opção para manter a notificação do primeiro produto adicionado até adicionar um segundo produto

#### Alterado

* Posição da notificação de último pedido

### 23/09/24 - Release Correções 🐞

#### Alterado

* Exibição do ícone do meio de pagamento
* "Sobre nós" no rodapé exibindo ao desmarcar opção
* Título dos "Meios de pagamento" no rodapé exibindo ao desmarcar opção
* Atualizado script de variações sem estoque
* Corrigido produto com variação sem estoque não exibe preços das outras variações

### 19/09/24 - Release Final Traduções ES, ES-MX e EN 🔀

#### Adicionado

* Traduções para ES, EN e ES-MX

### 29/08/24 - Release Correções 🐞

#### Alterado

* Quantidade do item não altera quando é exibido no scroll infinito
* Scroll infinito carregando colunas diferentes das configuradas
* Opção para ocultar o produto quando não tem estoque

### 23/08/24 - Release Novidades 🔔

* Opções de posicionamento de busca em celulares
* Novo ícone do carrinho
* Campo de quantidade no item do produto

### 13/08/24 - Release Correções 🐞

* Traduções adicionais
* Desconto promocional no carrinho

### 06/08/24 - Release Traduções 🔀

* Adicionadas traduções para as seções da página inicial

### 16/07/24 - Release Novas funcionalidades 🔔

* Novos produtos relacionados/complementares

**Correções:**

* Descrição da categoria no lugar errado
* Bug do Instagram sem token
* Posição da newsletter no rodapé quando não há redes sociais

### 02/07/24 - Release Traduções 🔀

* Adicionadas novas traduções

### 14/06/24 - Release Correções 🐞

* Zoom sem opção selecionada
* Parcelamento no item do produto
* Cor de fundo da variação selecionada

### 10/06/24 - Release Correção carrossel 🐞

* Vitrine de mais vendidos não estava passando todos os produtos

### 06/06/24 - Atualizações 🔔

**Adicionado:**

* Primeiras traduções para as configurações
* Opção de exibir/ocultar a barra de progresso para frete grátis
* Nome comercial
* Nova página de ativação da conta
* Desconto por meio de pagamento

**Correções**

* Menu não estava alterando de acordo com a opção selecionada
* Formulário de newsletter com bug
* Botão de compra rápida quando tem 2 produtos por linha em celulares
* Banners em grade mostrando sem banners
* Animação de adicionar ao carrinho quando botão de compra rápida
* Miniaturas de imagem do produto com 100% de altura com scroll ao invés do slider
* Alerta da página do produto saindo do bloco
* Remoção do preço unitário
* Pop-up de newsletter sem espaçamento
* Feed de instagram com colunas erradas

### 03/06/24 - Informações da conta

* Novas informações da conta (perfil do consumidor)

### 03/05/24 - Correções 🐞

* Correção nas etiquetas dos produtos

### 03/04/24 - Correções 🐞

* Navegação dando erro 500 na página
* Conflito de nome na vitrine com banner

### 22/01/24 - Lançamento Versão oficial Nuvemshop

{% hint style="info" %}
Liberação da versão nativa do tema Flex, para contratação direta pelo site, sem a necessidade de instalação via FTP.
{% endhint %}

### 4.4

#### Novidades

* Melhoria de performance com carregamento de imagens de qualidade menor no card do produto
* Adicionada opção de selecionar o peso das fontes na personalização
* Validação de licença do Tema Flex (feita pelo domínio da loja, se alterar é necessário solicitar nova licença)

#### Correções

* Ajuste nas formas de envio
* Atualização para utilizar novos componentes dos layouts da Nuvem
* Correção de bug ao passar o mouse na foto do card do produto (segunda imagem)
* Scripts refatorados para a V2 do Linkedstore - Nuvemshop
* Corrigido campo de seleção de variação (card e página do produto)
* Corrigido botão de seleção de variação
* Alinhamentos das vitrines
* Nomenclaturas no painel de personalização
* Ajustes de estrutura dos ícones do cabeçalho
* Corrigido pré-carregamento de imagens e arquivos
* Ajustes de headings equivocados
* Corrigido passar imagem do produto (celular)
* Ajuste de classe do item da navegação para atributo data

### 4.3.17

#### Novidades

* Alterações na nomenclatura de “data-attributes” para facilitar na personalização da loja (clicar na seção para personalizar)

#### Correções

* Correções de textos e traduções
* Alteração novo ícone do Twitter → X
* Remoção de arquivos desnecessários
* Correções no modal das parcelas de produtos

### 4.3.16

#### Correções

* Ajuste no card horizontal
* Ajustes de estilos

### &#x20;4.3.15

#### Novidades

* Suporte aos novos filtros e campos personalizados (Painel Nuvemshop)

#### Correções

* Correções de nomenclaturas no painel
* Ajustes de estrutura de arquivos
* Ajustes de CSS

### 4.3.14

#### **Novidades**

* Possibilidade de exibir variações de cores e tamanhos no card de produto separado da página de produto
* Ajuste para as imagens da página de produto não ficarem esticadas/achatadas
* Adição de postagens do Instagram, com simulação da galeria
* Ajustes pontuais de CSS

#### **Correções**

* Imagens da página de produto não apareciam no mobile/Iphone
* Semântica dos títulos do rodapé
* Guia de tamanhos (modal estava sumindo em algumas lojas)

### 4.3.13

#### **Novidades**

* Módulo de Campos Personalizados
* Módulo de Conteúdo Institucional
* Títulos e textos das vitrines agora aceitam HTML&#x20;

#### **Correções**

* Ajustes gerais de estrutura / CSS
* Adição de cor do ícone da barra de anúncio
* Ajustes nos filtros de categorias
* Ajuste na nomenclatura do filtro "Maiores descontos"
* Remoção do limite de 20 produtos em uma vitrine

### 4.3.12

* Ajuste na opção de descrição na lateral (interna do produto)
* Ajuste na barra de anúncios
* Ajuste na paginação clássica da lista de produtos
* Melhorias no painel de personalização

### 4.3.11

* Ajuste nos filtros de categorias
* Ajuste no campo de e-mail do formulário
* Ajuste nas variações do card e da interna do produto

### 4.3.10

* Correção de bug na grade das vitrines
* Correção na barra de anúncios
* Correção dos meios de pagamento na página do produto
* Ajustes no slider
* Melhorias estéticas e estruturais (CSS)

### 4.3.9

* Correção de bugs no carrinho
* Ajustes na galeria de imagens da página do produto
* Melhorias no painel de personalização
* Adição de classe nas páginas para estilização via CSS
* Opção de exibir/ocultar produtos relacionados
* Correções de textos

### 4.3.8

* Melhorias no painel de personalização
* Ajustes estruturais e CSS

### 4.3.7

* Melhorias no módulo de depoimentos
* Melhorias no módulo de blog
* Correção do accordion nos filtros de categoria

### 4.3.6

* Correções na barra de progresso para frete grátis
* Ajuste na imagem de placeholder do card de produto
* Ajuste nos banners de serviços
* Ajuste na estrutura da página de produto

### 4.3.5

* Melhorias no módulo de blog
* Ajuste na barra de frete grátis
* Correção nos filtros
* Correção estrutural nas variações dos produtos

### 4.3.4

* Correção de espaçamento em algumas vitrines
* Melhorias na estrutura do rodapé
* Melhoria no slider de banners em destaque
* Ajuste na altura do logo quando o cabeçalho é fixo
* Ajustes nos banners de serviços
* Ajustes na nomenclatura dos módulos
* Ajuste no cabeçalho das páginas internas
* Adição de identificação de página no carrossel das vitrines
* Melhorias no carrinho

### 4.3.3

* Adição de botão de logout no menu mobile
* Ajuste na galeria de fotos na vertical (página de produto)
* Ajustes na barra de progresso para frete grátis
* Ajustes no carrinho

### 4.3.2

* Ajuste da nomenclatura do filtro de produtos
* Opção de ocultar breadcrumbs na página de produto
* Melhorias na barra de anúncios
* Melhorias nos banners de categoria
* Correção do bloco de frete grátis na página de produto
* Correção no zoom da imagem na página de produto

### 4.3.1

* Adicionada opção de inserir os depoimentos na página do produto
* Opção de diferenciar níveis de submenus (menu mobile)
* Exibir ícone de carrinho no botão de compra
* Ajuste dos botões do card de produto
* Correções de estilos na paginação
* Melhorias nos sliders das vitrines
* Ajuste no popup de boas vindas

### 4.3

#### Novidades

* Opção de colunas desktop e mobile
* Módulo de banners de categoria com até 10 banners
* Nova barra de anúncio
* Reestruturação dos módulos no painel de personalização
* Mais opções de personalização e customização de módulos
* Opção de cor de fundo em todos os módulos da home
* Novo modal de políticas de privacidade

#### Correções gerais

* Modal
* Menu
* Módulo de idiomas
* Banners de serviços
* Módulo de depoimentos
* Módulo de blog
* Newsletter
* Notificações
* Carrinho
* Opções de cores / fontes
* Card do produto
* Página do produto
* Filtros
* Remoção das opções BETA

### 4.2.3

* Melhorias para o módulo de compra rápida
* Ícones de garantia, informação e atenção para os banners do produto
* Melhorias do card horizontal do produto
* Card horizontal no mobile, slide no desktop (BETA)
* Opção de miniaturas na vertical na página de produto
* Melhorias para o módulo de compra rápida
* Ajustes na paginação (lista de produtos)
* Opção de exibir variações de cores e tamanhos em formato de botão
* Correções no carrinho
* Ajustes na paginação (lista de produtos)

### 4.2.2

* Opção de exibir variações de cores e tamanhos em formato de botão
* Alterado o módulo de LGPD para banner de cookies padrão dos temas Nuvem
* Novas traduções
* Melhoria no preço unitário
* Melhoria na página de busca
* Ajustes no carrinho
* Padronização do ícone do carrinho apresentado no carrinho / carrinho rápido
* Nova opção de cabeçalho (Logo na esquerda / menu ao lado / busca aberta)
* Ajustes no banner de popup
* Melhorias no slider (banner principal)
* Correções no carrinho

### 4.2.1

#### Correções

* Barra de anúncios
  * Removida opção de animação
  * Adição de ícones
  * Melhora na exibição dos itens
  * Melhoria no painel
* Card de produto
  * Largura do botão detalhes
  * Melhoria do botão comprar
  * Melhoria na exibição mobile
  * Ajuste no botão fechar (X)
* Produto (interna)
  * Melhorias no botão fixo ao rolar a página
* Botão de compra transparente (borda da cor escolhida)
* Ajuste nos dados de contato no rodapé
* Traduções
* Fontes (Opção de peso 300 para Montserrat)

### 4.2

#### Novidades

* Barra de anúncios com opção de carrossel ou animada
* Módulo de blog

#### Correções

* Barra de progresso (cores)
* Imagem do produto (card)
* Segunda imagem no hover (card)
* Melhorias no módulo de seleção de produtos
* Newsletter (espaçamento e imagem)
* Traduções
* Ajustes de CSS
* Ajustes de estrutura do painel administrativo

### 4.1.3

* Slide de categorias (categorias infinitas)
* Adição de pesos 500 e 600 para fonte Montserrat
* Ajustes na barra de progresso

### 4.1.2

* Removidos os comentários do Facebook
* Correções dos banners de serviços

### 4.1.1

* Filtros de marca e preços nas categorias
* Barra de progresso para frete grátis no carrinho
* Ajustes de traduções
* Correções de estilos (cores na interna do produto)

### 4.1

* Preço unitário para produtos com variação de quantidade
* Novo logo no rodapé
* Ajuste do vídeo na interna do produto
* Ajustes de estilos (transições)


# Roadmap - Melhorias

Funcionalidades já mapeadas por nossa equipe para aplicação no Flex e suas respectivas expectativas de finalização.

### Entregues

\[estilos do layout] Banner para página em breve

\[carrinho de compras] Adicionar Banner (desktop e mobile)

### Planejados

\[página inicial] Módulo Banners em Cascata

\[página de categoria] Opção para exibir Banners de serviços

\[página incial] Módulo Vídeo + Texto (Estilo Brasilia)

\[rodapé] Terceira versão de rodapé conforme Figma

\[carrinho de compras] Ativar Position sticky no preço e botão comprar do carrinho rápido

\[checkout] Ajuste de cores via painel

\[card] Exibir parte da descrição no card de produto

\[cabeçalho] Exibir opção para selecionar o estilo do cabeçalho fixo

### Em análise

\[estrutural] Revisão responsivo 1024px (tablet)

\[cabeçalho > menu principal] Banners de categoria e produto destaque no submenu

\[cabeçalho] Revisar layout topo menu mobile (conta)

\[cabeçalho > menu] Opções para função hover (cor / opacidade / animação)

\[cabeçalho > menu] Ícone nos submenus

\[card] Refazer opção de Card horizontal (mobile)

\[card] Exibir preço apenas para usuários logados \[função atacado]

\[página produto] Estudar opção de descrição abaixo da imagem no produto, com ficha lateral fixada (desktop)

\[página produto] Opção para Exibir opções de frete no produto dentro de um modal

\[página de categoria] Submenu de categorias em accordion

\[página de categoria] Módulo SEO avançado de categorias

\[página incial] Testar opção parallax nos banners rotativos quando integrado ao topo

\[rodapé] Ativar Menu Fixo Mobile (estilo App)

\[rodapé] Estudar viabilizar toggle no rodapé (mobile)

### Mapeados (sem previsão)

\[página produto] Galeria de imagens formato mosaico 2/2 e vídeo separado

\[pagina produto] Melhorar experiência na compra por atacado (preços fechados)


# FTP - Edição via código

Antes de abrir o FTP do Tema Flex para realizar edições via código leia atentamente todas as informações contidas nessa página!

O Tema Flex foi desenvolvido com diversas funcionalidades que permitem ao cliente ou parceiro criar uma loja virtual profissional de forma simples, em poucos cliques, sem precisar mexer diretamente no código.

Já para atender demandas mais avançadas, a plataforma Nuvemshop disponibiliza acesso ao código-fonte (via FTP) do layout, possibilitando que *<mark style="color:orange;">**parceiros, desenvolvedores e clientes com conhecimento técnico**</mark>* *<mark style="color:orange;">**em programação**</mark>* realizem personalizações profundas e construam uma identidade visual única para a loja.

{% hint style="danger" %}

#### LOJA COM FTP ABERTO <a href="#success-7" id="success-7"></a>

As lojas que possuem o FTP aberto **não recebem as atualizações de melhorias, correções e novas funcionalidades feitas pela nossa equipe no layout automaticamente** e nem suporte para aplicá-las. Por isso, o código deve sempre ser atualizado por algum profissional que possua conhecimentos avançados em linguagens de programação.
{% endhint %}

{% hint style="warning" %}
A FlexCommerce e a Nuvemshop não recomendam a abertura do FTP para realizar edições via código justamente porque essa ação desvincula totalmente o Tema Flex da plataforma e ***não nos responsabilizamos e nem prestamos suportes de bugs/erros acontecidos em lojas que possuem o FTP aberto.***
{% endhint %}

Para saber mais sobre edições via código consulte a própria base de conhecimento da plataforma- Nuvemshop nesse link: [Informações FTP ](https://atendimento.nuvemshop.com.br/pt_BR/parceiros-especialistas/como-trabalhar-com-codigo-fonte-ftp-aberto)


# Template Guide - Figma

Para facilitar a adaptação do seu layout ao Tema Flex, disponibilizamos um modelo no Figma para você copiar e utilizar em seu projeto.

{% embed url="<https://www.figma.com/community/file/1247708842521967166>" %}


# Dúvidas Frequentes

As principais dúvidas antes e depois de contratar o Flex

<details>

<summary>O Flex contempla todas as funcionalidades de um tema padrão da Nuvemshop?</summary>

Sim. O Flex contempla todas as funcionalidades dos temas padrão da Nuvemshop. Algumas variações de aplicação são possíveis, dentro da variação já presente entre os próprios temas padrão.

</details>

<details>

<summary>Se eu precisar personalizar alguma coisa via código, é possível?</summary>

Sim. Você pode personalizar o código via FTP, como nos temas padrão da Nuvemshop. **Importante:** Caso você opte por fazer isso, você deixará de receber as atualizações automáticas do tema. **Veja mais informações nas orientações** [**FTP- Edição via código**](/sobre-o-flex/ftp-edicao-via-codigo)**.**

</details>

<details>

<summary>Comprei o tema mas estou com dificuldade de personalizar. O que devo fazer?</summary>

Você pode buscar apoio de um profissional. Todos os especialistas Nuvemshop possuem condições de prestar um bom trabalho de personalização com o TemaFlex, mas se preferir falar diretamente com os desenvolvedores, entre em contato pelo <comercial@temaflex.com.br> e solicite atendimento para serviços de personalização.

</details>

<details>

<summary>Se eu comprar o tema pela Nuvemshop ele se adapta automaticamente?</summary>

Não. O TemaFlex é instalado em rascunho apenas com os módulos da variação contratada já ativos. Banners e conteúdos devem ser personalizados via painel, da mesma forma que os demais temas da Nuvemshop.

</details>

<details>

<summary>Ao realizar a compra do tema, teremos todas essas 6 versões disponíveis para utilizar ou será necessário escolher apenas uma?</summary>

Antes da compra, você pode escolher qualquer versão do tema para ir ao checkout. Após efetuar o pagamento, você deve escolher a versão mais compatível com o seu negócio ou ideia de layout, pois será a base (cores, configurações, blocos ativos) instalada na sua loja.

</details>

<details>

<summary>Existe alguma diferença de funcionalidade entre as versões do tema Flex, ou a diferença é apenas visual, relacionada ao design e ao segmento de cada versão?</summary>

Não existe diferença a nível de funcionalidade. Todas as versões possuem as mesmas possibilidades de personalização. A única diferença é estética, para apresentar diferentes opções para quem deseja contratar.

</details>

<details>

<summary>Não existe uma versão do Tema Flex para o meu segmento, o que devo fazer?</summary>

Escolha a versão mais adequada ao estilo de layout que você deseja. Os segmentos são apenas exemplos, mas o tema Flex se adapta a qualquer tipo de negócio.

</details>

<details>

<summary>É possível comprar o Tema Flex parcelado?</summary>

Não. Atualmente a Nuvemshop não disponibiliza parcelamento. Apenas pagamento via PIX ou cartão à vista.

</details>

<details>

<summary>Vocês tem cupom de desconto para contratar o Flex?</summary>

Não. Esta funcionalidade não está disponível.

</details>

<details>

<summary>Comprei o tema mas não aparece para editar. O que devo fazer? </summary>

Volte na loja de temas e clique em "testar este tema" na versão do Flex que desejar. Ele será instalado em rascunho. Caso você tenha um rascunho já ativo, será necessário deletar ou substituir.

</details>


# Cores da sua marca

Veja os passos para alterar as cores de elementos do layout, para personalizar a loja virtual de acordo identidade visual 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.\
\
**- Cores padrões no botão de compra;**\
![](/files/Ikz3yEBpx8rVnBArqkhC)\
\
**- 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 %}


# Tipo de Letra

Na seção Tipo de Letra, você pode alterar o tipo de fonte de todos os elementos do seu layout, criando um design totalmente personalizado e ajudando na identidade visual da sua loja virtual.

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

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. Clique na opção **Tipo de Letra** no menu lateral para acessar as configurações do tipo de fonte da sua loja virtual.<br>

   <figure><img src="https://lh4.googleusercontent.com/_Mn-2QAkl45DvIb1Cr5aCGp2J5J1c7JSgLlaafKsGLmw6kL_iJiIUcUviQ4FgjHgRnJjXnNatr3XO4IWB3K0Wv90bfXgbpeRc159xzodKhgtsMnaXVdCvNx3v0W9K_7be5zNaurZOYQ2E_Gbiz_EP7Cr5tf3VlPxwCrLknuaPCRmV4oHa41Zd7jotiks-g" alt=""><figcaption></figcaption></figure>

<details>

<summary>Texto do menu</summary>

Você poderá definir: \
\
\- **Fonte:** qual opção de fonte deseja para o seu layout. \
\ <img src="/files/yRDOPQki9mYPamLUTFeL" alt="" data-size="original"> \
\
&#x20;![](/files/OmzIPmH7GJgxggLZyemh)\
\
\- **Tamanho:** qual o tamanho da fonte escolhida.

![](/files/m1cBDCGUFuepP8qfJfqp)

\- **Peso:** qual o estilo da fonte, por exemplo, itálico, negrito, negrito itálico, entre outros. \
\
![](/files/HMR6YwU34ZMLapHqRTiu)\
\
\- Além disso, também poderá selecionar a opção **"Letras Maíusculas"**, onde os textos ficarão em maiúsculo.\
\
![](/files/kyyYGpC3tyXjhGd9pbo5)

</details>

<details>

<summary>Títulos das páginas e banners</summary>

Você poderá definir: \
\
\- **Fonte:** qual opção de fonte deseja para o seu layout. \
\ <img src="/files/yRDOPQki9mYPamLUTFeL" alt="" data-size="original"> \
\
&#x20;![](/files/OmzIPmH7GJgxggLZyemh)\
\
\- **Tamanho:** qual o tamanho da fonte escolhida.

![](/files/WPyka3qCv9omZ32hMjxE)

\- **Peso:** qual o estilo da fonte, por exemplo, itálico, negrito, negrito itálico, entre outros. \
\
![](/files/HMR6YwU34ZMLapHqRTiu)\
\
\- Além disso, também poderá selecionar a opção **"Letras Maíusculas"**, onde os textos ficarão em maiúsculo.\
\
![](/files/kyyYGpC3tyXjhGd9pbo5)

</details>

<details>

<summary>Outros textos do site</summary>

Você poderá definir: \
\
\- **Fonte:** qual opção de fonte deseja para o seu layout. \
\ <img src="/files/yRDOPQki9mYPamLUTFeL" alt="" data-size="original"> \
\
&#x20;![](/files/OmzIPmH7GJgxggLZyemh)\
\
\- **Tamanho:** qual o tamanho da fonte escolhida.

![](/files/vG2RZUBoPcbiVAuaapAR)

</details>

{% hint style="info" %}
**Observação**

Apenas fontes do Google são compatíveis e possíveis de escolher para o layout. As demais fontes podem trazer problemas de visualização para a loja. Por isso, não estão inclusas.
{% endhint %}

{% hint style="success" %}
**Dica:**&#x20;

Para que sua loja fique mais harmoniosa, sugerimos que não escolha mais do que 2 fontes diferentes e o ideal é que sejam parecidas ou da mesma família.
{% endhint %}

\
\
Após definir as fontes, clique em **"Publicar Alterações"** para finalizar.<br>

<figure><img src="https://lh5.googleusercontent.com/dPJAQCU7yUHoNKDqu3THQ0C8Wr8ZHcEtoWPbLkyALJgYpO2jkGxQSDvE4vndymASO5qqg49GbMAQUhMJlNW6Yw1S1DLSk1lLmY-WX5FIdmYU6ACDUyjQbVzZ8rMQ-SR0u_XieD2nPbKSLyow_BULUs31VHyNQMxxGxQDoByJ0s6GKFEY6TkwVtmQ-niDjQ" alt=""><figcaption></figcaption></figure>

**Pronto! 🙌**&#x20;

Agora sua loja já está com a fonte que você escolheu e com a cara da sua marca.


# Estilos de layout

Defina a aparência geral de elementos da sua loja virtual.

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

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. Clique na opção **Estilos de layout** no menu lateral para acessar as configurações.

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

<details>

<summary>Espaçamento</summary>

Na opção **Espaçamento**, defina a distância entre as seções na página inicial: Mínimo, Médio ou Máximo.

<img src="/files/Z7Thj1fY1c2CEq62JkCZ" alt="" data-size="original">

</details>

<details>

<summary>Bordas</summary>

Na opção **Bordas,** você pode aplicar um tipo de aspecto, reto ou níveis de arredondamento, para as bordas de elementos e formulários no layout.&#x20;

![](/files/Zsx4m6Q04066gmt4fSON)

</details>

<details>

<summary>Largura das seções</summary>

Configure a largura do conteúdo das seções, podendo aplicar largura "normal"  que deixara todas as seções centralizadas ou "completo" que deixara todas as seções com margens até as bordas.

<div align="left"><figure><img src="/files/Sf5Q6tUJVuPmXKjKEdtz" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary>Mensagem de cookies</summary>

Escolha a osição da mensagem de cookies em ***computadores.***

<div align="left"><figure><img src="/files/K1OiR9Lfp0WhOcCHfOpD" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary>Cor do tema no navegador</summary>

Nesta opção você pode marcar se deseja que a cor no navegador, via mobile, seja a mesma que a cor principal do Tema.&#x20;

<img src="/files/GpPPfrsJEW6X21U7cICQ" alt="" data-size="original">

</details>

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;

Agora os elementos da sua loja já estão como você escolheu.


# Cabeçalho

O Cabeçalho do layout é a primeira parte da loja que seus clientes irão visualizar quando acessá-la. Por esse motivo é importante personalizar, tornando o visual de sua loja ainda mais atrativo.

Confira os módulos de personalização do cabeçalho:

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden></th><th data-hidden></th><th data-hidden data-type="content-ref"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Layout</td><td></td><td></td><td></td><td></td><td><a href="/pages/8vK3jNO0HCeuoHzqv4i9">/pages/8vK3jNO0HCeuoHzqv4i9</a></td><td></td></tr><tr><td>Imagem de fundo</td><td></td><td></td><td></td><td></td><td><a href="/pages/8owtRdhyVSxMu0MNgWNH">/pages/8owtRdhyVSxMu0MNgWNH</a></td><td></td></tr><tr><td>Cores</td><td></td><td></td><td></td><td></td><td><a href="/pages/dTyVao2VmetNfNznQf2M">/pages/dTyVao2VmetNfNznQf2M</a></td><td></td></tr><tr><td>Barra de anúncio</td><td></td><td></td><td></td><td></td><td><a href="/pages/9boPTpUUuEbi98LTEa72">/pages/9boPTpUUuEbi98LTEa72</a></td><td></td></tr><tr><td>Barra de contatos</td><td></td><td></td><td></td><td></td><td><a href="/pages/GASZo1kowPGPGyz6qtq8">/pages/GASZo1kowPGPGyz6qtq8</a></td><td></td></tr><tr><td>Logo</td><td></td><td></td><td></td><td></td><td><a href="/pages/lFFIr9IHDsBtjZJe4xo6">/pages/lFFIr9IHDsBtjZJe4xo6</a></td><td></td></tr><tr><td>Barra de busca</td><td></td><td></td><td></td><td></td><td><a href="/pages/BrVCmhThozsWzyCt5Xfa">/pages/BrVCmhThozsWzyCt5Xfa</a></td><td></td></tr><tr><td>Conta de usuário</td><td></td><td></td><td></td><td></td><td><a href="/pages/RI4m1FDPIoR4zr8Hflf9">/pages/RI4m1FDPIoR4zr8Hflf9</a></td><td></td></tr><tr><td>Carrinho de compras</td><td></td><td></td><td></td><td></td><td><a href="/pages/Za46J0eXhBcPf2ziDpdW">/pages/Za46J0eXhBcPf2ziDpdW</a></td><td></td></tr><tr><td>Menu principal</td><td></td><td></td><td></td><td></td><td><a href="/pages/aFNWEKjZXo2YisK4V4B0">/pages/aFNWEKjZXo2YisK4V4B0</a></td><td></td></tr><tr><td>Menu de departamentos (todas as categorias)</td><td></td><td></td><td></td><td></td><td><a href="/pages/kmIBJYSMGokuPQdEftEb">/pages/kmIBJYSMGokuPQdEftEb</a></td><td></td></tr><tr><td>Menu mobile</td><td></td><td></td><td></td><td></td><td><a href="/pages/ga1Cyb2a2cmapOpujaik">/pages/ga1Cyb2a2cmapOpujaik</a></td><td></td></tr></tbody></table>

<br>


# Layout

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

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

\
\
A seleção de **estilo de layout do cabeçalho** vai definir a organização dos elementos no topo da sua loja.&#x20;

![](/files/Zze0NhN2yK7QUePBnRRC)

Atualmente, o Flex disponibiliza **cinco opções de estilos**, conforme abaixo: \
\
**-** Logo na esquerda e menu abaixo:&#x20;

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

**-** Logo centralizado e menu abaixo:

<figure><img src="/files/8Gz6KhmO8tZRVyHYGxaY" alt=""><figcaption></figcaption></figure>

**-** Logo na esquerda e menu ao lado:

<figure><img src="/files/0lagtebuveQsxysfL1oy" alt=""><figcaption></figcaption></figure>

**-** Logo centralizado e menu oculto:

<figure><img src="/files/7tBgmrbX92PXC7IoGB7S" alt=""><figcaption></figcaption></figure>

**-** Logo na esquerda, menu centralizado e busca à direita: &#x20;

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

Ainda neste seção, você pode selecionar se deseja que o cabeçalho esteja sempre visível ao navegar pela loja, ou seja, sempre ao rolar a tela ou navegar por outras abas, o cabeçalho será exibido.

{% hint style="warning" %}
OBS: O cabeçalho sempre visível terá o mesmo layout e disposição do cabeçalho ativo no site.&#x20;
{% endhint %}

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

Por último, você pode selecionar se deseja que o cabeçalho fique transparente e sobre os banners rotativos.&#x20;

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

Exemplo de cabeçalho sem a transparência:

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

Exemplo de cabeçalho transparente sobre os banners:

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

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

Ao ativar a seleção de cabeçalho transparente, certifique-se de que os **banners rotativos tenham uma margem superior lisa**, para que as informações não fiquem sobrepostas aos títulos dos menus e informações do cabeçalho.&#x20;
{% endhint %}

Após definir todas essas opções para a sua loja, 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;


# Imagem de fundo

Personalize o cabeçalho da sua loja com uma imagem de fundo.

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Cabeçalho > Layout".**
3. Acesse a seção **"imagem de fundo"**

Para exibir a imagem de fundo tanto em computadores quanto em celulares você deve marca a caixa "exibir imagem".            &#x20;

<div align="left"><figure><img src="/files/grXEtHSIa4bd6IFwVxEg" alt="" width="275"><figcaption></figcaption></figure></div>

Para adicionar a imagem clique em "Selecionar imagem". Siga as recomendações de tamanho 1920px x 400px:

<div align="left"><figure><img src="/files/hOZOSZ55GKXwkzFCQR4I" alt="" width="524"><figcaption></figcaption></figure></div>

Em *"Ajuste da imagem"* você pode escolher entre as opções:

* **Sem ajuste:** não haverá nenhum ajuste e a imagem ficará centralizada;
* **Cobrir o espaço (pode recortar):** a imagem será aplicada com zoom e recorte para se encaixar em todo o espaço do cabeçalho;
* **Mostrar completa (sem corte):** Mostra completamente a imagem evitando cortes podendo deixar margens vazias.

<div align="left"><figure><img src="/files/4rjmdN9d61iW3wBJ86xK" alt="" width="560"><figcaption></figcaption></figure></div>

Em *"Repetir Imagens"* você pode escolher entre as opções:

* **Repetir:** a imagem sera replicada em todo o cabeçalho;
* **Não repetir:** a imagem ficara centralziada sem duplicação.

<div align="left"><figure><img src="/files/zmZY2tvXMoskbxpcvdVg" alt="" width="280"><figcaption></figcaption></figure></div>

Após definir todas essas opções para a sua loja, clique em **"Publicar Alterações"** para finalizar.


# Cores

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

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Cabeçalho > Cores".**&#x20;

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

\
As opções de seleção de cores são: \
\
**- Cor de fundo:** define a cor de fundo do cabeçalho da sua loja;\
\
**- Cor dos textos:** define a cor dos textos do cabeçalho;\
\
**- Cor dos ícones:**  define a cor dos ícones do cabeçalho.&#x20;

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

{% hint style="danger" %}
**Importante!**

Caso você queira utilizar essas cores em específico para o layout do cabeçalho, é importante selecionar **usar estas cores**, caso contrário serão utilizadas por padrão as **cores da sua marca**.
{% endhint %}

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;


# Barra de anúncio

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

<div data-full-width="false"><figure><img src="/files/hbm4smFtjBTWNGs99zw3" alt=""><figcaption><p>Exemplo da barra de anúncio (barra rosa no topo)</p></figcaption></figure></div>

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

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

Na funcionalidade de **Barra de anúncio**, você poderá exibir mensagens sobre promoções, produtos, regras de frete e novidades.      &#x20;

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

\- Marcando a opção **"Exibir barra de anúncio"** esta funcionalidade será habilitada no topo da sua loja **tanto no desktop quanto no mobile**.&#x20;

\- Ao marcar a opção **"Usas estas cores"** você poderá definir: **Cor de fundo**, **Cor de texto** e **Cor do ícone**. Caso essa opção esteja desabilitada, será utilizado por padrão as **cores da sua marca**.\
\
\- Ao marcar a opção **"Exibir mensagem em carrossel",** a mensagem **não** será exibida de forma fixa.

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

É possível incluir **até 4 mensagens** para serem exibidas. Para o cadastro das mensagens é possível incluir: um \
\
**- Ícone (pré-definidos):** ,&#x20;

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

**- Texto (até 40 caracteres):**

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

**- Link (opcional):**&#x20;

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

Após preencher as mensagens desejadas para esta área, 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;


# Barra de contatos

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

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

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

\- **Exibir barra de contatos:** quando essa opção estiver habilitada, a barra de contatos estará ativa, porém visível apenas em dispositivos desktop.

<figure><img src="/files/8km37KX9IZ3T4zlQLPsO" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/uN0tgmtbYzlCiDOv40p6" alt=""><figcaption><p>A Barra de contatos abrange a área selecionada em vermelho.</p></figcaption></figure>

{% hint style="danger" %}
Importante! <br>

A barra de contatos será exibida **apenas** se houverem informações de contato cadastradas no painel da Nuvemshop.
{% endhint %}

\
**- Cores:** para utilizar cores específicas na barra de contatos, 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.**

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

Você poderá definir: **Cor de fundo**, **Cor de texto** e **Cor dos ícones**.

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

**- Exibir linha divisória:** para exibir uma linha divisória entre a barra de contatos e o menu principal, marque a opção **Exibir linha divisória.**

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

<details>

<summary>Informações de contato</summary>

Você poderá definir: \
\
\- **Exibir WhatsApp:** defina se o WhatsApp será ou não exibido.&#x20;

![](/files/2NN2tSpB1PfAH6rdRDHB)

Além disso, você também poderá definir se o formato de exibição do WhatsApp será em Texto (WhatsApp) ou em Número (DDD + 9XXXX.XXXX

![](/files/0Fq6dp8qxA7uUEdEC8xw)\
\
\- **Exibir telefone:** defina se o telefone será ou não exibido.&#x20;

![](/files/RtM6gCpt6ZvvvlHPr1kV)\
&#x20;\
\- **Exibir e-mail:** defina se o e-mail será ou não exibido.&#x20;

![](/files/SDxokx7im9TMstBRlr5t)

\- **Exibir redes sociais:** defina se as redes sociais serão ou não exibidas.

![](/files/I7P7okii3dDgft00Gnre)

</details>

<details>

<summary>Menu na barra de contatos</summary>

Para exibir um menu na barra de contatos, marque a opção "**Exibir menu na barra de contatos"**&#x20;

![](/files/P9pTPmvsnZkxdPmbwoW9)

Após isso, selecione o menu que deseja ser exibido.&#x20;

![](/files/KiUnYwjBytuICaYG3T1F)

</details>

{% hint style="warning" %}
Para exibir um menu na barra de contatos, você deve primeiramente criá-lo nas [Barras de Navegação](/minha-nuvemshop/barras-de-navegacao). Sugerimos que este menu tenha no máximo três itens.
{% endhint %}

<details>

<summary>Idiomas</summary>

Se você possui um plano que contempla o recurso de multi-idiomas, clique em **Exibir bandeiras dos idiomas** para que o seletor fique visível no layout.&#x20;

![](/files/Exfdme7sqp7TJyj8bHJS)

</details>

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;


# Logo

{% 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 > Logo".**

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

Selecione uma das opções pré-definidas de tamanho para o logo no cabeçalho da sua loja, sendo: **Pequeno, Médio** ou **Grande.**

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

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;


# Barra de busca

{% 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 > Barra de busca".**

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

**- Texto padrão da busca:** você pode personalizar o texto que será exibido na barra de busca.

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

**- Cores:** para utilizar cores específicas na barra de busca, 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.**&#x20;

<figure><img src="/files/0dpAk1kwPzl3x3tsZEET" alt=""><figcaption></figcaption></figure>

Abaixo, você pode personalizar: **Cor de fundo, Cor do texto, Cor do ícone** e **Cor da borda.**

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

**- Localização da busca em celulares:** você pode ajustar a localização da barra de busca nas posições:&#x20;

<div align="center"><figure><img src="/files/C1yq8sXgbSwlCTOBZJ4T" alt=""><figcaption></figcaption></figure></div>

1. **Abaixo da logo:**&#x20;

<figure><img src="/files/9rIxNmOSoEiYtynEGinD" alt=""><figcaption></figcaption></figure>

2. **Ao lado do carrinho:**&#x20;

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

3. **Dentro do menu:**&#x20;

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

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;


# Conta de Usuário

Você pode adicionar uma imagem e/ou ícone para substituir o padrão de "usuário" do cabeçalho.

<div align="left"><figure><img src="/files/SWJBYorEy7YWeUV1qr52" alt=""><figcaption><p>EXEMPLO USUÁRIO</p></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/LWuMjPeRj4BjSsZTVegG" alt=""><figcaption></figcaption></figure></div>

Clique em **"Selecionar imagem"** e faça o upload do ícone.

![](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%252FlKdfhud7FdnxRGub1f97%252Fimage.png%3Falt%3Dmedia%26token%3Df03279f3-4d14-4fd1-8415-5e047a91c66d\&width=768\&dpr=4\&quality=100\&sign=99247321\&sv=2)

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

![](https://ajuda.temaflex.com.br/~gitbook/image?url=https%3A%2F%2Flh5.googleusercontent.com%2FdPJAQCU7yUHoNKDqu3THQ0C8Wr8ZHcEtoWPbLkyALJgYpO2jkGxQSDvE4vndymASO5qqg49GbMAQUhMJlNW6Yw1S1DLSk1lLmY-WX5FIdmYU6ACDUyjQbVzZ8rMQ-SR0u_XieD2nPbKSLyow_BULUs31VHyNQMxxGxQDoByJ0s6GKFEY6TkwVtmQ-niDjQ\&width=768\&dpr=4\&quality=100\&sign=3016a533\&sv=2)


# 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="/files/nYBjnWqbmzqhFZWptFyg" 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="/files/4hx33CVFTuTWQee7xYjy" 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="/files/qoGfAdGjEh3y7GN1sdBW" 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="/files/V5K3HsqVKJba1D3HEgS1" 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="/files/qR42GTzaQCENNrSg4OKg" alt=""><figcaption></figcaption></figure></div>

**Exemplo:**&#x20;

<div align="left"><figure><img src="/files/iZgTY7UgYnNTzI7O504U" 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;


# Menu principal

{% 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 > Menu principal".**

<figure><img src="/files/1RBkn81NhUr1buLzurv4" alt=""><figcaption></figcaption></figure>

\- **Escolher o menu principal:** você deve selecionar um menu previamente cadastrado nas [Barras de navegação](/minha-nuvemshop/barras-de-navegacao).

<figure><img src="/files/5PoOxweIymSLLMO6k2O8" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/L3IqDdErCOFqA1VB10pY" alt=""><figcaption><p>O Menu principal abrange a área selecionada em vermelho. Obs.: pode variar conforme estilo de cabeçalho selecionado.</p></figcaption></figure>

**- Cores:** para utilizar cores específicas neste módulo, 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.**

<figure><img src="/files/4i73YHgLvLaNsQinHtKq" alt=""><figcaption></figcaption></figure>

Você pode configurar a **Cor de fundo, Cor dos textos** e **Cor ao passar o mouse.**

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

{% hint style="info" %}
As selecionar o campo **"Cor ao passar o mouse"**, você terá a flexibilidade de minimizar problemas de contraste de cor, selecionando uma cor específica.
{% endhint %}

**- Exibição do menu principal:** você poderá optar entre **Centralizado** ou **Alinhado ao conteúdo**.

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

**- Design do submenu:** você poderá optar entre Cascata (menu aberto em cascata) ou Largura total (menu em largura total).&#x20;

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

#### - Link em destaque: Você pode escolher um link para a página, categoria e ou produto que deseja destacar

<figure><img src="/files/0pXGCIZxrtI1TA4tt4ZK" alt=""><figcaption><p>EXP: OUTLET COM FUNDO EM VERMELHO</p></figcaption></figure>

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

No campo de link, insira a URL que deseja destacar. Em seguida, escolha cores contrastantes para dar mais destaque ao botão no menu.

{% hint style="warning" %}
O link destacado funciona apenas para desktop.
{% endhint %}

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;


# Menu para celulares

{% 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 > Menu para celulares".**

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

**- Cores:** para utilizar cores específicas neste módulo, 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.**

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

Você poderá definir a **Cor de fundo** e a **Cor do texto.**

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

<figure><img src="/files/7f7kyvGkON3fr3FzNpv7" alt="" width="350"><figcaption><p>Exemplo de menu para celulares</p></figcaption></figure>

**- Escolha o menu para exibir:** você deve selecionar um menu previamente cadastrado nas [Barras de navegação](/minha-nuvemshop/barras-de-navegacao).

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

**- Ícone no menu:** você pode selecionar entre **Linhas variadas** ou **Linhas uniformes**.

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

**Linhas variadas:**

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

**Linhas uniformes:**

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

**- Título:** você poderá definir um título que será exibido antes do menu.

<figure><img src="/files/9pWnid1rkO2YEWUsUJFN" alt=""><figcaption></figcaption></figure>

Ao marcar a opção **"Exibir menu secundário em celulares"**, você pode selecionar um menu adicional.

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

**- Escolher menu secundário:** você deve selecionar um menu previamente cadastrado nas [Barras de navegação](/minha-nuvemshop/barras-de-navegacao).

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

**- Título do menu secundário:** você pode definir um título que será exibido antes do menu.

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

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;


# Menu de departamentos

{% 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 > Menu de departamentos".**

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

**- Exibir menu de departamentos:** ao ativar essa opção, será habilitado como primeiro item do menu principal um bloco de submenu com todas as categorias de produtos cadastradas.

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

<figure><img src="/files/fJkEtHlAakFcNSGWUwHP" alt=""><figcaption><p>O Menu de departamentos abrange a área selecionada em vermelho.</p></figcaption></figure>

\- **Escolha o menu:** você deve selecionar um menu previamente cadastrado nas [Barras de navegação](/minha-nuvemshop/barras-de-navegacao).

<figure><img src="/files/2TTa5gsgkbEKGXHyim7K" alt=""><figcaption></figcaption></figure>

**- Título:** você poderá definir o título que será apresentado no item do menu principal.&#x20;

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

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;


# Ícones nos menus

{% 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 > Ícone nos menus".**

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

**- Exibir ícones no menu principal para computador:** a exibição dos ícones no desktop é ativa.

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

<figure><img src="/files/zgoUieZrOgLkCbD9h4N2" alt=""><figcaption><p>Exemplo de ícones no computador</p></figcaption></figure>

**- Exibir ícones no menu para celulares:** a exibição dos ícones no mobile é ativa.

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

<figure><img src="/files/jR73DBHMUOk6u796TOiL" alt=""><figcaption><p>Exemplo de ícones no mobile</p></figcaption></figure>

**- Posição do ícone:** você poderá definir se o ícone será exibido **Acima** ou **Ao lado** do texto no menu principal. No menu mobile e no menu de departamentos ele será exibido sempre ao lado do texto.&#x20;

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

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

No menu mobile e no menu de departamentos, os ícones serão exibidos sempre ao lado do texto.&#x20;
{% endhint %}

Clique em **"Selecionar imagem"** e faça o upload dos ícones.&#x20;

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

{% hint style="info" %}
Lembrando que o formato ideal para os ícones é o **PNG**.&#x20;
{% endhint %}

Após cadastrar as imagens, clique no ícone de **editar (lápis),** para abrir as opções de configuração da imagem.&#x20;

<figure><img src="/files/Jgo5CEiy5Yvb0SwFSlue" alt=""><figcaption><p>Ícone de lápis no topo</p></figcaption></figure>

Adicione o link da categoria que você deseja para aquele ícone.&#x20;

<figure><img src="/files/4EJ0wdHc1iuN7cHAuTpt" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
Importante! \
\
A categoria deve estar presente no menu principal, caso contrário, o ícone não aparecerá.
{% endhint %}

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;


# Página inicial

A página inicial da sua loja é a que mais reflete a imagem da sua marca.

O layout Flex possui diferentes possibilidades de personalização, tornando a busca e a visualização de produtos mais amigável tanto para grandes quanto para pequenos negócios.

Listamos todas as possibilidades de configuração da **página inicial**, para **personalizar o design de sua loja** ao máximo e se diferenciar de outras marcas.

Confira os módulos de personalização da Página inicial:

<table data-view="cards"><thead><tr><th></th><th data-type="content-ref"></th><th data-hidden></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Banners rotativos</td><td></td><td></td><td></td><td><a href="/pages/2mTlJH333fRZIvrB3OVt">/pages/2mTlJH333fRZIvrB3OVt</a></td></tr><tr><td>Informações de frete, pagamento e compra</td><td></td><td></td><td></td><td><a href="/pages/8uF3U3jq0DqUYIzT0mGA">/pages/8uF3U3jq0DqUYIzT0mGA</a></td></tr><tr><td>Banners de categorias</td><td></td><td></td><td></td><td><a href="/pages/jWGal2xic3oB1FWUG2i4">/pages/jWGal2xic3oB1FWUG2i4</a></td></tr><tr><td>Banner destaque</td><td></td><td></td><td></td><td><a href="/pages/QayUkgDg02OZ3IkHHZSj">/pages/QayUkgDg02OZ3IkHHZSj</a></td></tr><tr><td>Banners promocionais</td><td></td><td></td><td></td><td><a href="/pages/o9BNCtVjZGuC7hjyORqb">/pages/o9BNCtVjZGuC7hjyORqb</a></td></tr><tr><td>Banners em grid</td><td></td><td></td><td></td><td><a href="/pages/kPIPsitVk2RFFAr9I755">/pages/kPIPsitVk2RFFAr9I755</a></td></tr><tr><td>Slide de marcas</td><td></td><td></td><td></td><td><a href="/pages/A6johixDv0CG6jqaJ84C">/pages/A6johixDv0CG6jqaJ84C</a></td></tr><tr><td>Slide de categorias</td><td></td><td></td><td></td><td><a href="/pages/6sfz66DeZO2BuPPCnwOL">/pages/6sfz66DeZO2BuPPCnwOL</a></td></tr><tr><td>Produtos em destaque</td><td></td><td></td><td></td><td><a href="/pages/QJFvsSIifAREqEUGKVz2">/pages/QJFvsSIifAREqEUGKVz2</a></td></tr><tr><td>Produtos novos</td><td></td><td></td><td></td><td><a href="/pages/zW32t1y6UrsSwvQgQNgU">/pages/zW32t1y6UrsSwvQgQNgU</a></td></tr><tr><td>Produtos em promoção </td><td></td><td></td><td></td><td><a href="/pages/8CixwxGKlNFdsQmvaPTS">/pages/8CixwxGKlNFdsQmvaPTS</a></td></tr><tr><td>Seleção de produtos</td><td></td><td></td><td></td><td><a href="/pages/VkQsDH0cj1y6Aki6hEOK">/pages/VkQsDH0cj1y6Aki6hEOK</a></td></tr><tr><td>Produto destaque</td><td></td><td></td><td></td><td><a href="/pages/kJ3XEG4i6aBQ2hflnb0c">/pages/kJ3XEG4i6aBQ2hflnb0c</a></td></tr><tr><td>Blog</td><td></td><td></td><td></td><td><a href="/pages/1WOJ4cwOEvDJ1xCDHbUR">/pages/1WOJ4cwOEvDJ1xCDHbUR</a></td></tr><tr><td>Imagem e texto</td><td></td><td></td><td></td><td><a href="/pages/ei6CSWqSUfFQBxfO2zqG">/pages/ei6CSWqSUfFQBxfO2zqG</a></td></tr><tr><td>Vídeo</td><td></td><td></td><td></td><td><a href="/pages/bFEdb3ZKFsWZIqCkJjgp">/pages/bFEdb3ZKFsWZIqCkJjgp</a></td></tr><tr><td>Depoimentos</td><td></td><td></td><td></td><td><a href="/pages/clYzdTjs7fd1LWAoDIgb">/pages/clYzdTjs7fd1LWAoDIgb</a></td></tr><tr><td>Mensagem Institucional</td><td></td><td></td><td></td><td><a href="/pages/RzQp1p2W9Hqi4KjQfr1m">/pages/RzQp1p2W9Hqi4KjQfr1m</a></td></tr><tr><td>HTML Personalizado</td><td></td><td></td><td></td><td><a href="/pages/g9gxxiaCrRni8vzwxGKt">/pages/g9gxxiaCrRni8vzwxGKt</a></td></tr><tr><td>Menu adicional</td><td></td><td></td><td></td><td><a href="/pages/iEOFKMWcboDHIF6jPLJJ">/pages/iEOFKMWcboDHIF6jPLJJ</a></td></tr><tr><td>Redes sociais</td><td></td><td></td><td></td><td><a href="/pages/hP4rWAoXDuu7NZ47Ty5P">/pages/hP4rWAoXDuu7NZ47Ty5P</a></td></tr><tr><td>Ordem das seções</td><td></td><td></td><td></td><td><a href="/pages/f9kXksHeTmvmUcBJ8y7D">/pages/f9kXksHeTmvmUcBJ8y7D</a></td></tr></tbody></table>

{% hint style="danger" %}
**Atenção:** caso sua pagina não esteja condizendo com a versão do manual entre em contato para atualizar sua versão do Tema Flex.
{% endhint %}


# Banners rotativos

Os banners rotativos são uma ótima forma de comunicar informações importantes sobre seu negócio, promoções, novidades e produtos.

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.**.**
2. No menu lateral, clique em "**Página Inicial" > "Banners rotativos".** &#x20;

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

Nesta seção, você pode configurar:&#x20;

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

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

Ao habilitar essa opção, você poderá configurar a cor de fundo da seção do banner.

<figure><img src="/files/5A5ftgrnH98lm5fS8C1b" alt=""><figcaption></figcaption></figure>

**- Aumentar a largura da tela:** aumenta o tamanho do banner para que o mesmo se estenda até as bordas da tela.

<figure><img src="/files/hSxoITwy7Qhrnx4vRGg8" alt=""><figcaption><p>Exemplo de banner rotativo em largura total</p></figcaption></figure>

**- Adicionar efeito de movimento às imagens:** habilita um efeito de zoom automático ao banner.&#x20;

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

**- Adicionar espaçamento em computadores:** habilita um espaçamento entre o menu de categorias e o banner rotativo.&#x20;

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

**- Adicionar espaçamento em celulares:** habilita um espaçamento entre a barra de busca e o banner rotativo.&#x20;

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

**- Alinhamento do texto:** caso seja configurado um texto dentro do banner, permite escolher se o mesmo será exibido na **Esquerda** ou **Centralizado.**&#x20;

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

**- Tempo de transição:** é o possível definir o tempo de transição dos banners em **4 segundos, 6 segundos, 8 segundos** ou **12 segundos.**&#x20;

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

**- Efeito ao passar:** permite definir o efeito de visualização do banner seguinte entre **Deslizar** ou **Passar.**&#x20;

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

Clique em **"Selecionar imagem",** procure e carregue a imagem. Lembrando que os formatos suportados pela plataforma são: **JPEG**, **GIF** e **PNG**.&#x20;

<figure><img src="/files/7gJjiieqgT3BQfHnDYxn" alt=""><figcaption></figcaption></figure>

Habilite a opção **''Carregar outras imagens para celulares''** para fazer o upload dos banners mobile.&#x20;

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

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

Após carregar as imagens dos banners é possível editar as informações dos banners rotativos.&#x20;

1. Clique no ícone de edição (lápis) localizado sobre a imagem do seu banner, para **configurar o link de direcionamento**, **título, descrição e botão**.

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

* **Link ao clicar na imagem:** adicione um link para levar os seus clientes a uma página específica quando clicam na imagem.
* **Título**: nome da sua marca, de alguma categoria da loja ou alguma palavra para informar os seus visitantes de promoções ou lançamentos.
* **Descrição:** você pode passar mais detalhes sobre o que quer informar naquele banner, como as características do seu produto, a porcentagem de desconto, etc.
* **Botão:** um texto curto que convide os seus clientes a clicar no botão, como "Comprar" ou "Ver mais".
* **Cor do texto**: escolha se a cor do texto do seu banner terá a mesma cor dos demais textos da sua loja ou se será igual a sua cor de fundo.&#x20;

<figure><img src="https://s3.amazonaws.com/helpjuice-static/helpjuice_production%2Fuploads%2Fupload%2Fimage%2F7634%2Fdirect%2F1623682149327-configurar+banners+rotativos+idea+bahia+amazona+cubo1.gif" alt=""><figcaption></figcaption></figure>

Caso adicione mais de 1 banner, aparecerá uma caixa de sugestão indicando que **arraste as imagens para organizá-las:**&#x20;

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643231386953-banner%20rotativo%206.png)

Para isso, basta segurar o banner e arrastar para a posição desejada, igual o exemplo abaixo:

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643231881968-banner%20rotativo%204.gif)

{% hint style="info" %}
Você poderá **adicionar quantos quiser**, porém, recomendamos que **não sejam adicionados mais do que cinco**, para não deixar sua loja "poluída". Para **remover um banner,** é só você clicar no ícone da **"lata de lixo".**
{% endhint %}

{% hint style="info" %}
O layout tem **medidas específicas de banners rotativos**. Portanto, lembre-se de incluir imagens seguindo os tamanhos recomendados de acordo com a versão estabelecida (desktop ou mobile) e informados no painel.
{% endhint %}

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**<br>


# Categorias principais

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

<figure><img src="/files/lzvvKswOCiqH5eRvh5Mq" alt=""><figcaption><p>Exemplo das categorias principais.</p></figcaption></figure>

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. Em seguida, clique em **"Página Inicial > Categorias principais"**.

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

Nesta seção, você pode configurar:&#x20;

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

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

Você poderá configurar a **Cor de fundo** e a **Cor dos texto.**&#x20;

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

**- Exibir texto fora da imagem:** faz com que o texto da categoria seja aplicado fora da imagem.&#x20;

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

**- Imagens em formato de círculo:** faz com que as imagens sejam arredondadas.&#x20;

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

**- Título:** defina o título que deseja para a seção.&#x20;

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

**- Exibição de banners em celulares:** você pode configurar a disposição dos banner entre **1, 2** ou **3 banners por linha.**&#x20;

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

**- Exibição de banners em computadores:** você pode configurar a disposição dos banner entre **1, 2** ou **3, 4, 5, 6, 8** ou **10 banners por linha.**&#x20;

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

Clique em **''Selecionar imagem''** e faça o upload da imagem que deseja.&#x20;

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

Clique no **ícone de lápis** na imagem e adicione o link que deseja.&#x20;

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

Para reordenar as categorias principais você deve clicar, segurar e arrastar a imagem pare posicionar aonde desejar. A numeração no canto esquerdo inferior informara a posição exata.&#x20;

<div align="center"><figure><img src="/files/WRyzyX7wAJmEZe9gG4Qd" alt=""><figcaption></figcaption></figure></div>

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

O texto que aparecerá na imagem está diretamente relacionado ao link adicionado. Se as imagens não possuírem nenhum link, o texto não aparecerá.&#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/1643232327031-1643232327031.png)

**Pronto! 🙌**


# 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="/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! 🙌**


# Produtos em destaque

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

<figure><img src="/files/3urzcjfQ1Z3YcxUfDBfD" alt=""><figcaption><p>Exemplo de vitrine de produtos.</p></figcaption></figure>

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. Em seguida, clique em **"Página Inicial > Produtos em destaque"**.

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

Nessa seção, você pode configurar:&#x20;

\- **Título:** define o título do carrossel de produtos.&#x20;

&#x20;\- **Subtítulo:** define o subtítulo do carrossel de produtos.&#x20;

<figure><img src="/files/4FZTQ2uI18C9ZjK66TiF" alt=""><figcaption></figcaption></figure>

**- Cores:** ao habilitar a opção **''Usar estas cores'',** você pode configurar a **Cor de fundo** e a **Cor dos textos** da seção.&#x20;

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

<details>

<summary>Exibição em celulares</summary>

\- **Mostrar produtos como:** você definir a exibição entre **Carrossel** ou **Grade.**&#x20;

![](/files/MnxBROw28273h2VzlTHR)

**- Quantidade de produtos por linha:** defina quantos produtos serão exibidos por linha no mobile.&#x20;

![](/files/FKqNAJF2AZtn7iVkoPBj)

</details>

<details>

<summary>Exibição em computadores</summary>

\- **Mostrar produtos como:** você definir a exibição entre **Carrossel** ou **Grade.**&#x20;

![](/files/MnxBROw28273h2VzlTHR)

**- Quantidade de produtos por linha:** defina quantos produtos serão exibidos por linha no desktop.&#x20;

![](/files/6ZNZePBSWGwO8sdzxxcQ)

Caso a exibição seja em modo **Carrossel**, você pode definir quantos produtos passam por vez entre **Todos da linha** ou **Apenas um**.

![](/files/YzqzKYKl1GQs79KApsVl)

</details>

**- Exibir paginação:** habilita a paginação abaixo do carrossel.&#x20;

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

**- Exibir botão** ''**Ver todos os produtos**'': habilita um botão que direciona para o link que desejar. Em "texto do botão" escreva o nome do mesmo. No campo “Link do botão”, insira a URL para onde deseja direcionar o usuário ao clicar.

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

<details>

<summary>Escolhendo os produtos das vitrines:</summary>

1 - **Painel Nuvemshop > Produtos > Organizar > Destacar > Escolha a vitrine com o nome correspondente (Destaque>>Destaque).**

<div align="left"><figure><img src="/files/GA3zz61clGQvA8asbPVS" alt=""><figcaption></figcaption></figure></div>

2 - Em organizar você precisa escolher a vitrine correspondente ao nome da seção do Tema Flex.&#x20;

*Exemplo:* "Vitrine Destaques" na Nuvemshop corresponde a seção chamada "Produtos em Destaque"

3 - Na vitrine é possível adicionar até 40 produtos, mas recomendamos **no máximo 20 para manter o site mais leve**. Você também pode reordenar e excluir os produtos sempre que quiser.

<div align="left"><figure><img src="/files/QOfkUGW2gX3PWHo0YNVJ" alt=""><figcaption></figcaption></figure></div>

</details>

{% 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:&#x20;

![](/files/3se7YISR0j4XAoGBGt1K)
{% endhint %}

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Produtos novos

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

<figure><img src="/files/3urzcjfQ1Z3YcxUfDBfD" alt=""><figcaption><p>Exemplo de vitrine de produtos.</p></figcaption></figure>

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout".**
2. Em seguida, clique em **"Página Inicial > Produtos novos"**.

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

Nessa seção, você pode configurar:&#x20;

\- **Título:** define o título do carrossel de produtos.&#x20;

&#x20;\- **Subtítulo:** define o subtítulo do carrossel de produtos.&#x20;

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

**- Cores:** ao habilitar a opção **''Usar estas cores'',** você pode configurar a **Cor de fundo** e a **Cor dos textos** da seção.&#x20;

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

<details>

<summary>Exibição em celulares</summary>

\- **Mostrar produtos como:** você definir a exibição entre **Carrossel** ou **Grade.**&#x20;

![](/files/MnxBROw28273h2VzlTHR)

**- Quantidade de produtos por linha:** defina quantos produtos serão exibidos por linha no mobile.&#x20;

![](/files/FKqNAJF2AZtn7iVkoPBj)

</details>

<details>

<summary>Exibição em computadores</summary>

\- **Mostrar produtos como:** você definir a exibição entre **Carrossel** ou **Grade.**&#x20;

![](/files/MnxBROw28273h2VzlTHR)

**- Quantidade de produtos por linha:** defina quantos produtos serão exibidos por linha no desktop.&#x20;

![](/files/6ZNZePBSWGwO8sdzxxcQ)

Caso a exibição seja em modo **Carrossel**, você pode definir quantos produtos passam por vez entre **Todos da linha** ou **Apenas um**.

![](/files/YzqzKYKl1GQs79KApsVl)

</details>

**- Exibir paginação:** habilita a paginação abaixo do carrossel.&#x20;

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

**- Exibir botão** ''**Ver todos os produtos**'': habilita um botão que direciona para o link que desejar. Em "texto do botão" escreva o nome do mesmo. No campo “Link do botão”, insira a URL para onde deseja direcionar o usuário ao clicar.

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

<details>

<summary>Escolhendo os produtos das vitrines:</summary>

1 - **Painel Nuvemshop > Produtos > Organizar > Destacar > Escolha a vitrine com o nome correspondente (Destaque>>Destaque).**

<div align="left"><figure><img src="/files/GA3zz61clGQvA8asbPVS" alt=""><figcaption></figcaption></figure></div>

2 - Em organizar você precisa escolher a vitrine correspondente ao nome da seção do Tema Flex.

*Exemplo:* "Vitrine Destaques" na Nuvemshop corresponde a seção chamada "Produtos em Destaque"

3 - Na vitrine é possível adicionar até 40 produtos, mas recomendamos **no máximo 20 para manter o site mais leve**. Você também pode reordenar e excluir os produtos sempre que quiser.

<div align="left"><figure><img src="/files/QOfkUGW2gX3PWHo0YNVJ" alt=""><figcaption></figcaption></figure></div>

</details>

{% 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:&#x20;

![](/files/3se7YISR0j4XAoGBGt1K)
{% endhint %}

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Produtos em oferta

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

<figure><img src="/files/3urzcjfQ1Z3YcxUfDBfD" alt=""><figcaption><p>Exemplo de vitrine de produtos.</p></figcaption></figure>

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. Em seguida, clique em **"Página Inicial > Produtos em oferta"**.

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

Nessa seção, você pode configurar:&#x20;

\- **Título:** define o título do carrossel de produtos.&#x20;

&#x20;\- **Subtítulo:** define o subtítulo do carrossel de produtos.&#x20;

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

**- Cores:** ao habilitar a opção **''Usar estas cores'',** você pode configurar a **Cor de fundo** e a **Cor dos textos** da seção.&#x20;

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

<details>

<summary>Exibição em celulares</summary>

\- **Mostrar produtos como:** você definir a exibição entre **Carrossel** ou **Grade.**&#x20;

![](/files/MnxBROw28273h2VzlTHR)

**- Quantidade de produtos por linha:** defina quantos produtos serão exibidos por linha no mobile.&#x20;

![](/files/FKqNAJF2AZtn7iVkoPBj)

</details>

<details>

<summary>Exibição em computadores</summary>

\- **Mostrar produtos como:** você definir a exibição entre **Carrossel** ou **Grade.**&#x20;

![](/files/MnxBROw28273h2VzlTHR)

**- Quantidade de produtos por linha:** defina quantos produtos serão exibidos por linha no desktop.&#x20;

![](/files/6ZNZePBSWGwO8sdzxxcQ)

Caso a exibição seja em modo **Carrossel**, você pode definir quantos produtos passam por vez entre **Todos da linha** ou **Apenas um**.

![](/files/YzqzKYKl1GQs79KApsVl)

</details>

**- Exibir paginação:** habilita a paginação abaixo do carrossel.&#x20;

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

**-Exibir botão** ''**Ver todos os produtos**'': habilita um botão que direciona para o link que desejar. Em "texto do botão" escreva o nome do mesmo. No campo “Link do botão”, insira a URL para onde deseja direcionar o usuário ao clicar.

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

<details>

<summary>Escolhendo os produtos das vitrines:</summary>

1 - **Painel Nuvemshop > Produtos > Organizar > Destacar > Escolha a vitrine com o nome correspondente (Destaque>>Destaque).**

<div align="left"><figure><img src="/files/GA3zz61clGQvA8asbPVS" alt=""><figcaption></figcaption></figure></div>

2 - Em organizar você precisa escolher a vitrine correspondente ao nome da seção do Tema Flex.

*Exemplo:* "Vitrine Destaques" na Nuvemshop corresponde a seção chamada "Produtos em Destaque"

3 - Na vitrine é possível adicionar até 40 produtos, mas recomendamos **no máximo 20 para manter o site mais leve**. Você também pode reordenar e excluir os produtos sempre que quiser.

<div align="left"><figure><img src="/files/QOfkUGW2gX3PWHo0YNVJ" alt=""><figcaption></figcaption></figure></div>

</details>

{% 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:&#x20;

![](/files/3se7YISR0j4XAoGBGt1K)
{% endhint %}

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Produtos em promoção

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

<figure><img src="/files/3urzcjfQ1Z3YcxUfDBfD" alt=""><figcaption><p>Exemplo de vitrine de produtos.</p></figcaption></figure>

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. Em seguida, clique em **"Página Inicial > Produtos em promoção"**.

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

Nessa seção, você pode configurar:&#x20;

\- **Título:** define o título do carrossel de produtos.&#x20;

&#x20;\- **Subtítulo:** define o subtítulo do carrossel de produtos.&#x20;

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

**- Cores:** ao habilitar a opção **''Usar estas cores'',** você pode configurar a **Cor de fundo** e a **Cor dos textos** da seção.&#x20;

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

<details>

<summary>Exibição em celulares</summary>

\- **Mostrar produtos como:** você definir a exibição entre **Carrossel** ou **Grade.**&#x20;

![](/files/MnxBROw28273h2VzlTHR)

**- Quantidade de produtos por linha:** defina quantos produtos serão exibidos por linha no mobile.&#x20;

![](/files/FKqNAJF2AZtn7iVkoPBj)

</details>

<details>

<summary>Exibição em computadores</summary>

\- **Mostrar produtos como:** você definir a exibição entre **Carrossel** ou **Grade.**&#x20;

![](/files/MnxBROw28273h2VzlTHR)

**- Quantidade de produtos por linha:** defina quantos produtos serão exibidos por linha no desktop.&#x20;

![](/files/6ZNZePBSWGwO8sdzxxcQ)

Caso a exibição seja em modo **Carrossel**, você pode definir quantos produtos passam por vez entre **Todos da linha** ou **Apenas um**.

![](/files/YzqzKYKl1GQs79KApsVl)

</details>

**- Exibir paginação:** habilita a paginação abaixo do carrossel.&#x20;

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

**- Exibir botão** ''**Ver todos os produtos**'': habilita um botão que direciona para o link que desejar. Em "texto do botão" escreva o nome do mesmo. No campo “Link do botão”, insira a URL para onde deseja direcionar o usuário ao clicar.

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

<details>

<summary>Escolhendo os produtos das vitrines:</summary>

1 - **Painel Nuvemshop > Produtos > Organizar > Destacar > Escolha a vitrine com o nome correspondente (Destaque>>Destaque).**

<div align="left"><figure><img src="/files/GA3zz61clGQvA8asbPVS" alt=""><figcaption></figcaption></figure></div>

2 - Em organizar você precisa escolher a vitrine correspondente ao nome da seção do Tema Flex.

*Exemplo:* "Vitrine Destaques" na Nuvemshop corresponde a seção chamada "Produtos em Destaque"

3 - Na vitrine é possível adicionar até 40 produtos, mas recomendamos **no máximo 20 para manter o site mais leve**. Você também pode reordenar e excluir os produtos sempre que quiser.

<div align="left"><figure><img src="/files/QOfkUGW2gX3PWHo0YNVJ" alt=""><figcaption></figcaption></figure></div>

</details>

{% 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/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Produtos mais vendidos

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

<figure><img src="/files/3urzcjfQ1Z3YcxUfDBfD" alt=""><figcaption><p>Exemplo de vitrine de produtos.</p></figcaption></figure>

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. Em seguida, clique em **"Página Inicial > Produtos mais vendidos"**.

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

Nessa seção, você pode configurar:&#x20;

\- **Título:** define o título do carrossel de produtos.&#x20;

&#x20;\- **Subtítulo:** define o subtítulo do carrossel de produtos.&#x20;

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

**- Cores:** ao habilitar a opção **''Usar estas cores'',** você pode configurar a **Cor de fundo** e a **Cor dos textos** da seção.&#x20;

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

<details>

<summary>Exibição em celulares</summary>

\- **Mostrar produtos como:** você definir a exibição entre **Carrossel** ou **Grade.**&#x20;

![](/files/MnxBROw28273h2VzlTHR)

**- Quantidade de produtos por linha:** defina quantos produtos serão exibidos por linha no mobile.&#x20;

![](/files/FKqNAJF2AZtn7iVkoPBj)

</details>

<details>

<summary>Exibição em computadores</summary>

\- **Mostrar produtos como:** você definir a exibição entre **Carrossel** ou **Grade.**&#x20;

![](/files/MnxBROw28273h2VzlTHR)

**- Quantidade de produtos por linha:** defina quantos produtos serão exibidos por linha no desktop.&#x20;

![](/files/6ZNZePBSWGwO8sdzxxcQ)

Caso a exibição seja em modo **Carrossel**, você pode definir quantos produtos passam por vez entre **Todos da linha** ou **Apenas um**.

![](/files/YzqzKYKl1GQs79KApsVl)

</details>

**- Exibir paginação:** habilita a paginação abaixo do carrossel.&#x20;

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

**- Exibir botão** ''**Ver todos os produtos**'': habilita um botão que direciona para o link que desejar. Em "texto do botão" escreva o nome do mesmo. No campo “Link do botão”, insira a URL para onde deseja direcionar o usuário ao clicar.

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

<details>

<summary>Escolhendo produtos das vitrines:</summary>

1 - **Painel Nuvemshop > Produtos > Organizar > Destacar > Escolha a vitrine com o nome correspondente (Destaque>>Destaque).**

<div align="left"><figure><img src="/files/GA3zz61clGQvA8asbPVS" alt=""><figcaption></figcaption></figure></div>

2 - Em organizar você precisa escolher a vitrine correspondente ao nome da seção do Tema Flex.

*Exemplo:* "Vitrine Destaques" na Nuvemshop corresponde a seção chamada "Produtos em Destaque"

3 - Na vitrine é possível adicionar até 40 produtos, mas recomendamos **no máximo 20 para manter o site mais leve**. Você também pode reordenar e excluir os produtos sempre que quiser.

<div align="left"><figure><img src="/files/QOfkUGW2gX3PWHo0YNVJ" alt=""><figcaption></figcaption></figure></div>

</details>

{% 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/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Produtos com banner

Configure uma seção incrível com produtos em destaque para dar total enfoque. Perfeita para anunciar uma nova coleção, enfatizar aquela promoção ou até mostrar mais detalhes de um determinado produto!

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

<figure><img src="/files/RlB2LabYilx4LUs5MRPt" alt=""><figcaption><p>Exemplo de vitrine com banner.</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 > Produtos com banner"**.&#x20;

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

**- Título:** configure o título para a seção.&#x20;

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

Habilite a opção **''Usar estas cores para a seção''**, para utilizar cores específicas.

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

Configure a **Cor de fundo da seção, Cor de fundo do bloco** e a **Cor dos textos.**&#x20;

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

**- Quantidade de produtos por linha:** configure a exibição dos produtos por linha em **1** ou **2**.&#x20;

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

**- Quantidade de produtos que passam por vez:** configure a transição dos produtos entre **Todos da linha** ou **Apenas um.**&#x20;

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

Habilite a opção **''Exibir paginação''** para que a paginação seja exibida abaixo do carrossel de produtos.&#x20;

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

Escolha se você deseja exibir o **Banner** ou o **Texto** na página inicial.&#x20;

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

Clique em **''Selecionar imagem''** e faça o upload de um banner para a seção, tanto para o computador quanto para o celular.&#x20;

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

**- Link:** adicione um link para o banner.&#x20;

<figure><img src="/files/7ELDG6OWnOM8vW2x0uxa" alt=""><figcaption></figcaption></figure>

Configure o **Título, Descrição, Texto do botão** e **Link do botão** do texto da seção que será exibido na página inicial.&#x20;

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

{% hint style="info" %}
Para que o texto seja habilitado, é necessário a opção ''**Texto''** estar ativa.&#x20;
{% endhint %}

Exemplo de vitrine com banner:

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

Exemplo de vitrine com texto:

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

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

Para que essa seção seja ativa na página inicial o tema precisa estar publicado (não em rascunho) e é necessário que existam produtos cadastrados no painel da Nuvemshop, em: **Produtos > Lista de produtos > Organizar > Produtos com banner**
{% 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/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Produto principal

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

<figure><img src="/files/zZj19MYLvoPG2brZvN3p" alt=""><figcaption><p>Exemplo do produto principal na home versão desktop.</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 > Produto principal"**.&#x20;

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

Nesta seção, você pode configurar um produto principal que será exibido na página inicial.&#x20;

**- Mostrar:** selecionar a forma de visualização do produto entre **Aleatoriamente** ou **O primeiro da lista.**&#x20;

<figure><img src="/files/2R1Fk353p5by29HyKGy2" alt=""><figcaption></figcaption></figure>

**- Título:** defina o título da seção.&#x20;

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

**- Subtítulo:** defina o subtítulo para a seção.&#x20;

<figure><img src="/files/6OqC3IVu27smortrm2i2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Só um produto da seção 'Principal' será exibido.
{% endhint %}

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

Para que essa seção seja ativa na página inicial, é necessário que existam produtos cadastrados no painel da Nuvemshop, em: **Produtos > Lista de produtos > Organizar > Principal.**
{% 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/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Banners de categorias

Destacar as categorias na página inicial é umas das melhoras formas para atrair seus clientes, fazendo com que conheçam os seus produtos, novidades e até mesmo ofertas.

{% embed url="<https://www.youtube.com/watch?t=70s&v=qZjXusyV7PE>" %}

<figure><img src="/files/ofeursEFwY32WQJV43Fw" alt=""><figcaption><p>Exemplo de banners de categoria.</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 > Banners de categorias"**.&#x20;

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

Habilite a opção **''Usar estas cores para a seção''**, para utilizar cores específicas.

<figure><img src="/files/2iMuWwQjFJ6iyfdZ5HFW" alt=""><figcaption></figcaption></figure>

Você pode configurar a **Cor do fundo** e a **Cor do texto.**&#x20;

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

**- Exibir texto fora da imagem:** faz com que o texto cadastrado seja aplicado fora da imagem.&#x20;

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

\- **Usar a mesma altura para todos os banners:** aplica a mesma altura para as imagens cadastradas.&#x20;

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

**- Remover espaços entre os banners:** remove o espaçamento entre um banner e outro.&#x20;

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

**- Alinhamento do texto:** permite definir o alinhamento do texto em **Esquerda** ou **Centralizado.**&#x20;

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

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

\
Para que essa opção funcione, é necessário ter um texto cadastrado dentro da imagem via Tema Flex.&#x20;
{% endhint %}

Clique em **''Selecionar imagem''**, e faça o upload do banner que deseja.&#x20;

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

Clique no **ícone de lápis** na imagem e configure o **Link**, **Título, Descrição, Botão** e **Cor.**&#x20;

<figure><img src="/files/3hm7SOVPf5EENnloel2C" alt=""><figcaption></figcaption></figure>

**- Título:** defina o título da seção.&#x20;

<figure><img src="/files/55PVfqFhqMkoRtvVQjWg" alt=""><figcaption></figcaption></figure>

**- Subtítulo:** defina o subtítulo para a seção.&#x20;

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

<details>

<summary>Exibição em celulares</summary>

Você pode configurar a exibição entre **Grade** ou **Carrossel.**&#x20;

![](/files/uVHmq9TkpA3yDyQUTrUX)

</details>

<details>

<summary>Exibição em celulares</summary>

Você pode configurar a exibição entre **Grade** ou **Carrossel.**&#x20;

![](/files/QYkf1fBn0rNnknhx5Nwu)

Defina também a quantidade de banners por linha entre **1**, **2**, **3** ou **4.**

![](/files/4Pd1SM1UpdSXyadz0oCF)

</details>

{% 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/1643317524355-1643317524355.png)

**Pronto! 🙌**&#x20;


# Banner em destaque

Destaque seus produtos, novidades e até mesmo ofertas com o Banner destaque.

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

<figure><img src="/files/TqJj7cVgeV3Ri3cHPo0G" alt=""><figcaption><p>Exemplo de banner em destaque</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 > Banner em destaque"**.&#x20;

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

Habilite a opção **''Usar esta cor''**, para utilizar cores específicas.

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

Configure a **Cor de fundo** da seção.&#x20;

<figure><img src="/files/0SJ7BrhuD1riDUVK0Lcn" alt=""><figcaption></figcaption></figure>

**- Link:** adicione um link para os banners.&#x20;

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

Clique em **''Selecionar imagem''** e faça o upload de um **banner em computadores** e de um **banner em celulares.**&#x20;

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

{% 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/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Banners promocionais

Os banners promocionais é uma ferramenta bastante útil, que permite divulgar as promoções e descontos da sua loja virtual de forma fácil e profissional.

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

<figure><img src="/files/w4mtShBV5heINnX8vAxK" alt=""><figcaption><p>Exemplo de banners promocionais.</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 > Banners promocionais"**.&#x20;

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

Habilite a opção **''Usar estas cores para a seção''**, para utilizar cores específicas.

<figure><img src="/files/2iMuWwQjFJ6iyfdZ5HFW" alt=""><figcaption></figcaption></figure>

Você pode configurar a **Cor do fundo,** **Cor do texto** e a **Cor da sobreposição da imagem.**&#x20;

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

\- **Intensidade da sobreposição:** defina a intensidade da cor da sobreposição.&#x20;

<p align="center"><img src="/files/2iYhT7jozBZnyCcNqPDY" alt=""></p>

**- Exibir texto fora da imagem:** faz com que o texto cadastrado seja aplicado fora da imagem.&#x20;

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

**- Remover espaços entre os banners:** remove o espaçamento entre um banner e outro.&#x20;

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

**- Alinhamento do texto:** permite definir o alinhamento do texto em **Esquerda** ou **Centralizado.**

<p align="center"><img src="/files/oBrVR86OSh3QMdL2j0zv" alt=""></p>

{% hint style="info" %}
Para que essa opção funcione, é necessário ter um texto cadastrado dentro da imagem via Tema Flex.&#x20;
{% endhint %}

**-** Título para os banners promocionais: adicione um titulo a seção que ficará acima dos banners.

<details>

<summary><strong>Imagens para computadores</strong></summary>

**Mostrar como:** você pode definir entre grade e carrossel a disposição dos banners no desktop.

<figure><img src="/files/558GPndaOm1s7PdjICeU" alt=""><figcaption></figcaption></figure>

**Exibição de banners em computadores:** você pode definir quantos banners por linha serão exibidos no computador.&#x20;

[***OBS: Quanto mais banners por linha menor será a exibição dos banners.***](#user-content-fn-1)[^1]

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

Clique em **''Selecionar imagem''**, e faça o upload do banner que deseja.&#x20;

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

Clique no **ícone de lápis** na imagem e configure o **Link**, **Título, Descrição, Botão** e **Cor.**&#x20;

<figure><img src="/files/3hm7SOVPf5EENnloel2C" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Imagens para celulares</strong></summary>

**Mostrar como:** você pode definir entre grade e carrossel a disposição dos banners no mobile.

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

Marque a opção **'Carregar outras imagens para celular''** para habilitar o campo de adição das imagens pro mobile.

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

Clique em **''Selecionar imagem''**, e faça o upload do banner que deseja.&#x20;

Clique no **ícone de lápis** na imagem e configure o **Link**, **Título, Descrição, Botão** e **Cor.**&#x20;

</details>

{% 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/1643317524355-1643317524355.png)

**Pronto! 🙌**&#x20;

[^1]:


# Banners em grade

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

<figure><img src="/files/rvwfsESVhp9SjWIPsXzm" alt=""><figcaption><p>Exemplo de banners em grade (disposição 3)</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 > Banners em grade".**

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

Habilite a opção ''**Usar estas cores para a seção''** para utilizar cores específicas.

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

Você pode configurar a **Cor de fundo** e a **Cor do texto** da seção.&#x20;

<figure><img src="/files/2O5dua1X0EzrjxnC7MX9" alt=""><figcaption></figcaption></figure>

Para configurar os **Banners em grade**, você deve se atentar aos tamanhos, pois os mesmos dependem da quantidade que deseja exibir.

<figure><img src="/files/YhjMiRs0gTdUFSVX7sEI" alt=""><figcaption><p>Escolha a quantidade para exibir as dimensões. </p></figcaption></figure>

Clique na quantidade de banners que deseja colocar para ser exibido as dimensões de cada banner de acordo com a sua composição.

Marque a caixa "**Mostrar banner**" para habilitar a sua exibição.

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

Clique em **''Selecionar imagem''** e faça o upload do banner que desejar.&#x20;

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

**- Título:** configure o título do banner.

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

**- Texto do botão:** configure o texto do botão.&#x20;

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

**- Link:** adicione um link para a seção.&#x20;

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

{% hint style="info" %}
É possível configurar até 4 banners diferentes.
{% 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/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Marcas

Os banners de marcas é uma ferramenta criada pensando em negócios multimarcas. Se sua loja vende produtos de diferentes marcas, essa configuração irá te ajudar a divulgá-las na página inicial da loja.

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

<figure><img src="/files/ljtU1YmEkQJcQ3l6Li97" alt=""><figcaption><p>Exemplo de banners de marcas.</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 > Marcas".**

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

Nesta seção, você pode configurar um slide de marcas para o seu layout.&#x20;

**- Título:** adicione um título para a seção.&#x20;

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

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

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

Você pode configurar a **Cor de fundo** e a **Cor do texto** da seção.&#x20;

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

Defina a exibição dos slides de marcas entre **Carrossel** ou **Grade.** Você também pode marcar a opção **"Passar de forma automática quando for carrossel"** para que os banners rotacionem automaticamente.

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

Clique em **''Selecionar imagem''** e faça o upload da marca que desejar.&#x20;

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

Clique no **ícone de lápis** na imagem e configure o **Link** da marca.&#x20;

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

{% 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/1643396316893-1643396316893.png)

**Pronto! 🙌**&#x20;


# Depoimentos

Os Depoimentos/Avaliações é uma ótima estratégia para dar mais credibilidade a sua loja.

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

<figure><img src="/files/Xr82ti7fRp9YzMst39d5" alt=""><figcaption><p>Exemplo de depoimentos.</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 > Depoimentos".**

<figure><img src="/files/15YWJpBHUu0rODWkrCqf" alt=""><figcaption></figcaption></figure>

Nesta seção, você pode configurar um seção de depoimentos personalizados via painel do Tema Flex.&#x20;

Habilite a opção ''**Usar estas cores''** para utilizar cores específicas.&#x20;

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

Você pode configurar a **Cor de fundo, Cor dos títulos, Cor de fundo do depoimento** e **Cor do texto do depoimento.**&#x20;

<figure><img src="/files/7Gq47WuT9acUUWZzrMim" alt=""><figcaption></figcaption></figure>

\- **Título:** configure o título da seção.&#x20;

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

\- **Subtítulo:** configure o subtítulo da seção.&#x20;

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

Habilite a opção **''Exibir estrelas nos depoimentos''** para que as estrelas sejam ativas.&#x20;

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

Em depoimentos por linha em computadores você pode definir quantos depoimentos serão exibidos por linha no desktop. Podendo ser, 2, 3 ou 4.

<figure><img src="/files/1TF3bFcQbi5SujRgk5mG" alt=""><figcaption></figcaption></figure>

Para fazer o upload dos depoimentos, clique em **''Selecionar imagem''** e faça o upload.&#x20;

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

\- **Nome completo:** adicione o nome da cliente.&#x20;

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

\- **Descrição:** adicione o feedback da cliente.&#x20;

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

{% hint style="info" %}
Você pode configurar até 8 depoimentos personalizados.
{% 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/1643317524355-1643317524355.png)

**Pronto! 🙌**&#x20;


# Postagens do instagram

Divulgue seu instagram com feed automático, personalizado ou com destaque ao @.

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

<figure><img src="/files/vxDeSb4Z9jRGIlb57GZw" alt=""><figcaption><p>Exemplo somente com @ do Instagram.</p></figcaption></figure>

<figure><img src="/files/iJXbWUvfA8ZftxURg44w" alt=""><figcaption><p>Exemplo com feed (personalizado ou automático).</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 > Postagens do instagram".**

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

Nesta seção, você pode configurar as postagens do instagram na sua loja.&#x20;

Habilite a opção ''**Usar estas cores''** para utilizar cores específicas.&#x20;

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

Você pode configurar a **Cor de fundo** e a **Cor do texto** da seção.&#x20;

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

**- Quais postagens deseja exibir:** selecione se deseja exibir as postagens do **Instagram** ou **Personalizadas.**&#x20;

<figure><img src="/files/50ba6gYLcVyZLkPmAVE7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Caso selecione a opção **Instagram,** você pode realizar toda configuração de vinculação gerando o seu token [clicando aqui](https://atendimento.nuvemshop.com.br/pt_BR/123412-redes-sociais/969168-como-mostrar-minhas-publicacoes-do-instagram-em-minha-loja?__hstc=191046581.b4cd98ca359396aa62d2c65d19ab3ca8.1678240686315.1692121637613.1692281632161.37&__hssc=191046581.1.1692281632161&__hsfp=1451776223).
{% endhint %}

**- Exibição:** configure a exibição dos posts entre **Largura do conteúdo** ou **Largura total.**&#x20;

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

**- Quantidade de publicações:** defina a quantidade de publicações que serão exibidas entre **3, 4, 6** ou **8** postagens por linha.&#x20;

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

**- Espaçamento entre as imagens:** defina o espaçamento entre as imagens em **Nenhum, Pequeno, Médio** ou **Grande.**&#x20;

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

**- Tamanho do nome do usuário:** defina o tamanho do nome entre **Pequeno, Médio** ou **Grande.**&#x20;

<figure><img src="/files/6IcoLiPvTMDEpFov6AcN" alt=""><figcaption></figcaption></figure>

Habilite a opção **''Exibir link para instagram junto dos posts''** para que o link seja exibido.&#x20;

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

**Exibição do usuário para Instagram:** defina a posição do @ podendo ser acima das publicaçõe sou a esquerda das publicações.

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

Para fazer o upload de um **Feed personalizado**, clique em **''Selecionar imagem''.**&#x20;

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

Clique no **ícone de lápis** na imagem e configure o **Link**, **Título, Descrição, Botão** e **Cor.**&#x20;

<figure><img src="/files/3hm7SOVPf5EENnloel2C" alt=""><figcaption></figcaption></figure>

{% 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.

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

**Pronto! 🙌**


# Postagens do blog

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

<figure><img src="/files/C86veWYWMrGSYeqRJOPq" alt=""><figcaption><p>Exemplo de prévia do blog na home.</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 > Postagens do blog".**

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

Nesta seção, você pode configurar um blog personalizado por conta própria via painel do Tema Flex.&#x20;

Habilite a opção ''**Usar estas cores''** para utilizar cores específicas.&#x20;

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

Você pode configurar a **Cor de fundo** e a **Cor do texto** da seção.&#x20;

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

**- Título:** configure o título da seção.&#x20;

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

**- Descrição:** configure um subtítulo para a seção.

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

**- Texto do botão para o blog:** configure o texto do botão principal desta seção.&#x20;

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

**- Link do botão para o blog:** configure o link do botão principal.&#x20;

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

**- Texto do botão do post:** configure o texto do botão de cada post.&#x20;

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

Clique em **''Selecionar imagem''** e faça o upload do banner que desejar para o blog.&#x20;

<figure><img src="/files/6fkJXYf1pk5TOkSaeDlU" alt=""><figcaption></figcaption></figure>

**- Título:** configure o título da postagem.&#x20;

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

**- Descrição:** configure a descrição de cada postagem.&#x20;

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

**- URL:** configure o link do botão da postagem

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

{% hint style="info" %}
Você pode configurar até 4 postagens diferentes no blog.
{% 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/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Mensagem de boas vindas

Apresente uma mensagem de boas vindas na página inicial. Essa mensagem pode ser um texto que descreva o seu negócio ou sobre seus produtos.

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

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página Inicial > Mensagem de boas vindas".**

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

Habilite a opção **''Usar estas cores''**, para utilizar cores específicas.

<figure><img src="/files/2iMuWwQjFJ6iyfdZ5HFW" alt=""><figcaption></figcaption></figure>

Você pode configurar a **Cor do fundo** e a **Cor do texto.**&#x20;

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

**- Título:** defina o título da mensagem.&#x20;

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

**- Mensagem:** defina a mensagem que será exibida.&#x20;

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

**- Link:** adicione um link para a seção.&#x20;

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

Clique em **''Selecionar imagem''** e faça o upload da imagem que deseja para a seção.&#x20;

<figure><img src="/files/2LOK0jZujVKFxFMtiBL0" alt=""><figcaption></figcaption></figure>

Defina a posição da imagem entre **Esquerda, Direita** ou **Centralizado.**&#x20;

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

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

Para que essa seção seja ativa na página inicial, é necessário que o módulo esteja configurado, em: **Página inicial > Ordem das seções.**
{% endhint %}

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1645446730290-1645446730290.png)

**Pronto!** 🙌&#x20;


# Mensagem institucional

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

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página Inicial > Imagem e texto".**

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

Habilite a opção **''Usar estas cores''**, para utilizar cores específicas.

<figure><img src="/files/2iMuWwQjFJ6iyfdZ5HFW" alt=""><figcaption></figcaption></figure>

Você pode configurar a **Cor do fundo** e a **Cor do texto.**&#x20;

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

\- **Intensidade da sobreposição:** defina a intensidade da sobreposição da imagem.&#x20;

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

Clique em **''Selecionar imagem''** e faça o upload da imagem que desejar.&#x20;

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

\- **Aumentar à largura da tela:** aumenta o tamanho da imagem para que a mesma se estenda até as bordas da tela.

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

\- **Usar imagem como fundo do bloco:** habilita a imagem como plano de fundo da seção.&#x20;

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

\- **Exibir nas páginas institucionais:** habilita a mensagem nas páginas institucionais.&#x20;

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

Defina o conteúdo da seção e configure **Título, Descrição, Texto do botão** e **Link.**&#x20;

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

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

Para que essa seção seja ativa na página inicial, é necessário que o módulo esteja configurado, em: **Página inicial > Ordem das seções.**
{% endhint %}

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

<figure><img src="https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1646061373656-1646061373656.png" alt=""><figcaption></figcaption></figure>

**Pronto!🙌** &#x20;


# Vídeo

Para apresentar mais informações sobre seu negócio em um formato bastante inovador, é possível adicionar e exibir um vídeo hospedado no YouTube ou Vimeo, na página inicial de sua loja.

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

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página Inicial > Vídeo".**

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

Configure para que um vídeo seja exibido na página inicial do seu layout.&#x20;

Habilite a opção **''Aumentar à largura da tela''** para que o tamanho do vídeo para se estenda até as bordas da tela.

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

**- Tipo de reprodução:** defina o tipo de reprodução do vídeo entre **Automática e sem som** ou **Com som e sem reprodução automática.**

<figure><img src="/files/8T1lSC1MzijBwdNhCCLp" alt=""><figcaption></figcaption></figure>

**- Link do youtube:** adicione o link do vídeo.&#x20;

<figure><img src="/files/37PEtn3fkba05zu0CdZ1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
O vídeo necessariamente precisa estar upado no Youtube.&#x20;
{% endhint %}

**- Imagem do vídeo:** adicione uma imagem inicial para o vídeo. Clique em **''Selecionar imagem''** e faça o upload.&#x20;

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

{% hint style="info" %}
Essa funcionalidade não se aplica se o tipo de reprodução for automática e o vídeo não estiver na primeira posição.
{% endhint %}

**- Cores:** defina a **Cor dos textos** e **ícones** na seção.&#x20;

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

**- Subtítulo:** defina o subtítulo da seção.&#x20;

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

**- Título:** defina o título da seção.&#x20;

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

**- Descrição:** defina uma descrição.&#x20;

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

\- **Texto do botão:** defina um texto para o botão.&#x20;

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

**- Link do botão:** adicione um link para o botão.&#x20;

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

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

Para que essa seção seja ativa na página inicial, é necessário que o módulo esteja configurado, em: **Página inicial > Ordem das seções.**
{% endhint %}

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1645708994721-1645708994721.png)

**Pronto!**&#xD83D;� <br>


# Menu adicional

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

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página Inicial > Menu adicional".**

<figure><img src="/files/7m8FR1YhiCEehShfNMw4" alt=""><figcaption></figcaption></figure>

Nesta seção, você pode habilitar um menu extra na página inicial do seu layout. Para isso, clique em **''Exibir menu na página''.**&#x20;

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

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

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

Configure a **Cor de fundo** e a **Cor dos textos**.&#x20;

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

**- Título:** defina um título para a seção.&#x20;

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

**- Tamanho dos itens no menu:** defina o tamanho dos itens entre **Pequeno, Médio** ou **Grande.**&#x20;

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

**- Espaçamento entre os itens:** defina se o espaçamento entre os itens será **Pequeno, Médio** ou **Grande.**&#x20;

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

**- Escolha o menu:** você deve selecionar um menu previamente cadastrado nas [Barras de navegação](/minha-nuvemshop/barras-de-navegacao).

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

<figure><img src="/files/qumh7XFT0sxdWMLG2efp" alt=""><figcaption><p>Exemplo de menu adicional na página inicial</p></figcaption></figure>

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

Para que essa seção seja ativa na página inicial, é necessário que o módulo esteja configurado, em: **Página inicial > Ordem das seções.**
{% endhint %}

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Newsletter

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

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página inicial > Newsletter".**

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

Nesta seção, você pode **configurar uma Newsletter** para que seja exibida na página inicial do seu layout, ao invés de apenas no rodapé.&#x20;

Clique em **''Usar estas cores para a seção''** para utilizar cores específicas na Newsletter.&#x20;

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

Configure a **Cor de fundo, Cor do texto, Cor do botão** e **Texto do botão.**&#x20;

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

{% hint style="info" %}
As cores escolhidas para a seção não interferem na Newsletter presente no rodapé
{% endhint %}

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

Para que essa seção seja ativa na página inicial, é necessário que o módulo esteja configurado, em: **Página inicial > Ordem das seções.**
{% endhint %}

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# FAQ - Perguntas Frequentes

Adicione até 10 perguntas frequentes para exibir na página inicial, na página de produto ou em uma página específica.

{% embed url="<https://www.youtube.com/watch?v=DyKU4YoFg2c>" %}

{% hint style="warning" %}

* Você pode configurar até **10** perguntas frequentes;
* As perguntas frequentes configuradas serão **exibidas igualmente** em todas as páginas selecionadas.
* **Não é possível** definir perguntas diferentes para páginas específicas.
* Caso não queira exibir as perguntas frequentes na página inicial, basta **desativar a visualização** clicando no ícone de exibição (olho). Assim, elas não ficarão visíveis na home.<br>
  {% endhint %}

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.**.**
2. No menu lateral, clique em "**Página Inicial" > "Perguntas frequentes".**

**Usar estas cores:** para utilizar cores específicas, marque a opção **usar estas cores.**

<div align="left"><figure><img src="/files/HcWLmvJKk1Ti0MsEktxr" alt=""><figcaption></figcaption></figure></div>

Ao habilitar essa opção, você poderá configurar a cor de fundo e cor de texto.

Defina "**Título**" e "**subtítulo**" para a seção:

<div align="left"><figure><img src="/files/apOPBti3AXbTp5N57DXm" alt="" width="548"><figcaption></figcaption></figure></div>

<details>

<summary>Exibir módulo em uma página específica</summary>

Marque a opção "Exibir módulo de perguntas frequentes em uma página" para exibir as perguntas frequentes em uma página específica da sua loja.

***OBS: Não pode ser categoria ou URL de produto, precisa ser uma página já criada na própria Nuvemshop.***

<div align="left"><figure><img src="/files/uxRMoG8h6wX4zKTjsbqt" alt=""><figcaption></figcaption></figure></div>

* Em "link da página" coloque a URL da página que deseja exibir as perguntas frequentes.
* Em "exibir em" escolha como deseja mostrar as perguntas frequentes.&#x20;

**Página exclusiva:** o conteúdo das perguntas frequentes vai sobrescrever o conteúdo da página.&#x20;

**Abaixo do conteúdo:** o conteúdo da página será exibido e as perguntas frequentes ficaram abaixo desse conteúdo.

</details>

<details>

<summary>Exibir módulo nas páginas de produtos</summary>

Basta **marcar a caixa** que todas as perguntas frequentes configuradas serão exibidas nas páginas de ***todos os produtos.***

<div align="left"><figure><img src="/files/zLMnh9kWffa4jo8b6GF8" alt=""><figcaption></figcaption></figure></div>

***OBS: Não há como escolher produtos específicos para as perguntas frequentes serem exibidas.***

</details>

<details>

<summary>Configurando as perguntas</summary>

* Você pode configurar **até 10** perguntas frequentes.
* As perguntas que não tiverem os campos preenchidos **não serão exibidas.**

Em "**Pergunta**", informe a dúvida que deseja responder. Em "**Resposta**", insira a resposta correspondente à pergunta cadastrada.

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

</details>

{% 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:

![](/files/otJskBpXKQwPk5PkUYPo)
{% endhint %}

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


# Módulos de Imagem e Texto

Você pode carregar os módulos que precisar, sem limite de quantidade.

Os módulos de imagem e texto podem ser usados para adicionar qualquer tipo de conteúdo à sua loja. Eles são frequentemente utilizados como prova social, exibindo imagens de influenciadores ou depoimentos mais visuais.

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

<details>

<summary><strong>Configurações iniciais</strong></summary>

* Usar a **mesma altura** para todos os módulos fará com que eles fiquem alinhados, mantendo a mesma altura entre si.
* Adicionar **sombra ao módulo** criará uma leve sombra no fundo, destacando o módulo visualmente.
* **Alinhamento do texto:** fará com que todos os textos do módulo se alinhem conforme a opção marcada.
* Em **título** e **subtítulo** você define os textos que ficaram acima da seção.

<div align="left"><figure><img src="/files/MOaRqunOWKbiDfZCnKpa" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary><strong>Adicionando os módulos</strong></summary>

Em **'Selecionar imagem',** escolha as imagens que serão exibidas nos módulos. Para um visual mais harmonioso e organizado, recomenda-se que todas as imagens tenham as mesmas dimensões.

<div align="left"><figure><img src="/files/0ahqEWo2jMFRvAoirc8D" alt=""><figcaption></figcaption></figure></div>

Depois de adicionar as imagens clique no ícone de "lápis" para adicionar os textos do módulo.

* **Link ao clicar na imagem:** defina a URL para a qual o cliente será direcionado ao clicar na imagem do módulo.
* **Título e descrição:** defina os textos que serão exibidos abaixo da imagem dentro do módulo.
* **Botão:** defina o texto que será exibido no botão.

<div align="left"><figure><img src="/files/nD964VbsF63ROk3mf4cT" alt=""><figcaption></figcaption></figure></div>

Exemplo de módulo com e sem botão:

<div align="left"><figure><img src="/files/05ZM9Qo6inuakQ1210FI" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary><strong>Exibição em computadores</strong></summary>

**Mostrar como:** você pode escolher entre carrossel (um ao lado do outro) ou grade (um abaixo do outro);

**Passar de forma automática quando for carrossel:** quando escolher a opção em carrossel você pode definir se os módulos passaram de forma automática ou manual.

**Quantidade de módulos por linha:** escolha quantos módulos ficaram exibidos por linha (um ao lado do outro).

<div align="left"><figure><img src="/files/8d4ySAVkBDTzhEYHQsjR" alt=""><figcaption></figcaption></figure></div>

</details>

<details>

<summary><strong>Exibição em celulares</strong></summary>

**Mostrar como:** você pode escolher entre carrossel (um ao lado do outro) ou grade (um abaixo do outro);

**Passar de forma automática quando for carrossel:** quando escolher a opção em carrossel você pode definir se os módulos passaram de forma automática ou manual.

**Centralizar o módulo ao ser exibido como carrossel:** deixara o módulo no centro para manter o padrão e deixar harmônico.&#x20;

**Posição do texto**: Você pode escolher se ficará abaixo da imagem ou ao lado da imagem.

<div align="left"><figure><img src="/files/zanqMfbZfZxCBp8fLdqu" alt=""><figcaption></figcaption></figure></div>

</details>

{% 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:

<img src="/files/otJskBpXKQwPk5PkUYPo" alt="" data-size="original">
{% endhint %}

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


# Popup promocional

O Banner popup pode ser usado para captação de leads, informações promocionais ou para algum aviso importante.

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

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout".**
2. No menu lateral, clique em **"Página inicial > Popup promocional".**

<figure><img src="/files/2aZbAhUs3OgoMA2YqGe1" alt=""><figcaption></figcaption></figure>

Habilite a opção **''Exibir popup''** para que a funcionalidade seja ativa.&#x20;

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

Habilite a opção **''Exibir formulário''** para que o formulário de cadastro seja ativo.&#x20;

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

Clique em **''Selecionar imagem''** para fazer o upload tanto da imagem para o popup, quanto da logo para o popup.&#x20;

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

**- Frase:** adicione uma frase para a Newsletter do popup.&#x20;

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

**- Link:** adicione um link para a imagem do popup.&#x20;

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

{% hint style="info" %}
O link so será ativo caso a opção de formulário não esteja ativa.&#x20;
{% endhint %}

Habilite para que o link seja aberto em uma nova janela ao clicar em **''Abrir link em uma nova janela''.**&#x20;

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

**- Cookie:** adicione um tempo de armazenamento até o popup aparecer novamente ao acessar o site.&#x20;

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

{% 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:

<img src="/files/otJskBpXKQwPk5PkUYPo" alt="" data-size="original">
{% endhint %}

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Ordem das seções

Defina a ordem de cada seção na página inicial, escolhendo a posição de cada elemento.

1. Acesse o painel Nuvemshop e siga pelo caminho **"Minha Nuvemshop > Personalizar layout".**
2. No menu lateral, clique em **"Página Inicial" > "Ordem das seções"**.

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

Para cada **Posição**, selecione uma **seção** da Página Inicial. Com isso, você estará adicionando a seção na sua loja virtual e definindo a posição em que ela aparecerá na página inicial.

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

Para **ocultar alguma posição**, basta selecionar a opção **"Nenhum"**.

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

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

![Botão para publicar as alterações](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643643543524-1643643543524.png)

#### **Pronto!** 🙌&#x20;


# Página de categoria

Saiba como habilitar a opções de compra rápida, os filtros de busca de produtos, quantidade de produto por categoria e muito mais dentro do menu Página de categoria na sua loja virtual.

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

Confira os módulos de personalização da Página de categoria:

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Banners padrão</td><td><a href="/pages/KTlsQLB5zCGVq9sVLXDY">/pages/KTlsQLB5zCGVq9sVLXDY</a></td></tr><tr><td>Filtros e paginação</td><td><a href="/pages/6dXcuV7C7PO8fEciTwWW">/pages/6dXcuV7C7PO8fEciTwWW</a></td></tr></tbody></table>


# Banner de topo

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página de categoria > Banner de topo".**

<figure><img src="/files/4mbDVafbnVcG00JU629n" alt=""><figcaption></figcaption></figure>

Você poderá definir: **Banner em computadores** e **Banner em celulares.**

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

Para carregar a imagem do banner, clique em **"Selecionar imagem"** e adicione o banner desejado.

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

{% hint style="warning" %}
Importante!&#x20;

Fique atento para as dimensões sugeridas para o banner desktop e mobile.&#x20;
{% endhint %}

{% hint style="info" %}
Para incluir link no banner clique no ícone **editar (lápis),** no topo do banner.
{% endhint %}

\- **Abrir link em nova janela:** caso o link do banner seja para um site ou ferramenta externa (outro site) habilite a opção.

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

Ao finalizar, clique em **"Publicar Alterações"**.

<figure><img src="https://lh5.googleusercontent.com/dPJAQCU7yUHoNKDqu3THQ0C8Wr8ZHcEtoWPbLkyALJgYpO2jkGxQSDvE4vndymASO5qqg49GbMAQUhMJlNW6Yw1S1DLSk1lLmY-WX5FIdmYU6ACDUyjQbVzZ8rMQ-SR0u_XieD2nPbKSLyow_BULUs31VHyNQMxxGxQDoByJ0s6GKFEY6TkwVtmQ-niDjQ" alt=""><figcaption></figcaption></figure>

**Pronto! 🙌**&#x20;


# Banner de rodapé

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página de categoria > Banner de rodapé".**

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

Você poderá definir: **Banner em computadores** e **Banner em celulares.**

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

Para carregar a imagem do banner, clique em **"Selecionar imagem"** e adicione o banner desejado.

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

{% hint style="warning" %}
Importante!&#x20;

Fique atento para as dimensões sugeridas para o banner desktop e mobile.&#x20;
{% endhint %}

{% hint style="info" %}
Para incluir link no banner clique no ícone **editar (lápis),** no topo do banner.
{% endhint %}

\- **Abrir link em nova janela:** caso o link do banner seja para um site ou ferramenta externa (outro site) habilite a opção.

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

Ao finalizar, clique em **"Publicar Alterações"**.

<figure><img src="https://lh5.googleusercontent.com/dPJAQCU7yUHoNKDqu3THQ0C8Wr8ZHcEtoWPbLkyALJgYpO2jkGxQSDvE4vndymASO5qqg49GbMAQUhMJlNW6Yw1S1DLSk1lLmY-WX5FIdmYU6ACDUyjQbVzZ8rMQ-SR0u_XieD2nPbKSLyow_BULUs31VHyNQMxxGxQDoByJ0s6GKFEY6TkwVtmQ-niDjQ" alt=""><figcaption></figcaption></figure>

**Pronto! 🙌**&#x20;


# Filtros e paginação

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página de categoria > Filtros e paginação".**

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

{% hint style="warning" %}
Importante!&#x20;

Você deve configurar os filtros da sua loja no painel administrador da Nuvemshop.
{% endhint %}

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

**- Filtros:** ao ativar essa opção, será habilitado um filtro de produtos na direita ao clicar no botão "Filtrar".&#x20;

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

**- Mostrar produtos:** você pode selecionar a visualização entre **Navegação entre páginas** ou **Carregamento infinito.**

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

Ao finalizar, clique em **"Publicar Alterações"**.

<figure><img src="https://lh5.googleusercontent.com/dPJAQCU7yUHoNKDqu3THQ0C8Wr8ZHcEtoWPbLkyALJgYpO2jkGxQSDvE4vndymASO5qqg49GbMAQUhMJlNW6Yw1S1DLSk1lLmY-WX5FIdmYU6ACDUyjQbVzZ8rMQ-SR0u_XieD2nPbKSLyow_BULUs31VHyNQMxxGxQDoByJ0s6GKFEY6TkwVtmQ-niDjQ" alt=""><figcaption></figcaption></figure>

**Pronto! 🙌**&#x20;


# Produtos na lista

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página de categoria > Produtos na lista".**

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

**- Quantidade de produtos por linha em celulares:** você pode definir a quantidade de produtos por linha no mobile.

<figure><img src="/files/0jSuu5nB4oy2EzlhOrVm" alt=""><figcaption></figcaption></figure>

**- Quantidade de produtos por linha em computadores:** você pode definir a quantidade de produtos por linha no desktop.

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

Ao finalizar, clique em **"Publicar Alterações"**.

<figure><img src="https://lh5.googleusercontent.com/dPJAQCU7yUHoNKDqu3THQ0C8Wr8ZHcEtoWPbLkyALJgYpO2jkGxQSDvE4vndymASO5qqg49GbMAQUhMJlNW6Yw1S1DLSk1lLmY-WX5FIdmYU6ACDUyjQbVzZ8rMQ-SR0u_XieD2nPbKSLyow_BULUs31VHyNQMxxGxQDoByJ0s6GKFEY6TkwVtmQ-niDjQ" alt=""><figcaption></figcaption></figure>

**Pronto! 🙌**&#x20;


# Conteúdo da categoria (SEO)

Configure textos para serem exibidos no final das categorias da sua loja.

{% hint style="warning" %}
O conteúdo de SEO (texto) é ***exibido somente nas categorias*** seguindo as configurações abaixo. O mesmo não pode ser exibido em páginas de conteúdo da Nuvemshop ou páginas de produtos.
{% endhint %}

1. Acesse o painel Nuvemshop e siga o caminho **"Loja Online > Layout > Editar layout"** .
2. No menu lateral, clique em **"Página Inicial > Conteúdo da categoria (SEO)"** .

Para ativar você precisa marca a caixa "Exibir conteúdo da categoria..."

> **O conteúdo ficara abaixo da listagem dos produtos (no final da página).**

<div align="left"><figure><img src="/files/y7eurzUNXKkw9PnlJZEN" alt=""><figcaption></figcaption></figure></div>

<details>

<summary>Como funciona?</summary>

1. **Primeiro:** as categorias precisam estar todas configuradas (cadastradas na Nuvemshop e vinculadas aos respectivos produtos).
2. **Página Nuvemshop:** Após isso, você precisa criar uma página na Nuvemshop onde o conteúdo de SEO (texto) será configurado. Essa página, quando criada, precisa conter uma URL específica seguindo essa estrutura:&#x20;

**/cat-slug da categoria desejada.** Exemplo: ***/cat-camisetas*****&#x20;(**&#x6F; slug da categoria é **camisetas)**

Precisa contar o texto **"**<sup>***cat***</sup>**"** seguindo do traço <sup>***"-"***</sup> e depois o **"**<sup>**slug"**</sup>**.**

{% hint style="info" %}

## O **slug** é a última parte da URL da categoria (por exemplo, em **/vestidos**, o slug é **vestidos**).

{% endhint %}

Formas de achar o "slug":

**1 -** Na própria URL da categoria:

<div align="left"><figure><img src="/files/gD9cn9QMvTx4Nygw8Dhy" alt=""><figcaption></figcaption></figure></div>

**2 -** Painel Nuvemshop > Produtos > Categorias > 3 pontinhos > Editar > URL da categoria.

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

</details>

<details>

<summary>Configurando a página para o conteúdo SEO</summary>

**Criar página:** Painel Nuvemshop > Loja Online > Páginas > Criar página > Opções Avançadas > URL da página.

**Configurando Link:** Em URL da página você ajusta para seguir as regras explicadas anteriormente: **/cat-slug da categoria desejada**

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

**Adicionando conteúdo:** Você pode adicionar textos e imagens para enriquecer o conteúdo da categoria e contribuir para o SEO da página. Recomendamos incluir conteúdos relevantes com palavras-chave relacionadas ao tema da categoria, ajudando a melhorar seu posicionamento nos mecanismos de busca.

Também é importante analisar as imagens utilizadas, verificando sua qualidade, tamanho e otimização para garantir um bom desempenho da página.

{% hint style="warning" %}
**Atenção:** toda alteração realizada nesta página será refletida automaticamente no tema da loja.
{% endhint %}

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

</details>

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

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

<img src="/files/otJskBpXKQwPk5PkUYPo" alt="" data-size="original">
{% endhint %}

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


# Item de produto

Aprenda como personalizar os itens de produto nas vitrines da página inicial e nas listagens de produtos nas categorias.

{% embed url="<https://youtu.be/iWH8rn4RxnE>" %}

Confira os módulos de personalização do Card de produto:

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Layout do card</td><td><a href="/pages/GJ2r8DmRzxTNhhxpiXRN">/pages/GJ2r8DmRzxTNhhxpiXRN</a></td></tr><tr><td>Produtos na lista</td><td><a href="/pages/jgBPGlI5AySPaEs4xj5J">/pages/jgBPGlI5AySPaEs4xj5J</a></td></tr><tr><td>Foto do produto</td><td><a href="/pages/aM716ClViMO6QGSfE2v8">/pages/aM716ClViMO6QGSfE2v8</a></td></tr><tr><td>Variações e quantidade</td><td><a href="/pages/Pkr9Tub5d2EH1t2zTVeK">/pages/Pkr9Tub5d2EH1t2zTVeK</a></td></tr><tr><td>Título do produto</td><td><a href="/pages/ypb7O9DsgFxPPNL4VBRg">/pages/ypb7O9DsgFxPPNL4VBRg</a></td></tr><tr><td>Preço do produto</td><td><a href="/pages/nuVErAUkQmbacOHF4BYv">/pages/nuVErAUkQmbacOHF4BYv</a></td></tr><tr><td>Produto esgotado</td><td><a href="/pages/K9DlNe3XLDi3BnWwj8Ae">/pages/K9DlNe3XLDi3BnWwj8Ae</a></td></tr><tr><td>Botões de compra</td><td><a href="/pages/Gec6lUJhZGASGH5Lgn1V">/pages/Gec6lUJhZGASGH5Lgn1V</a></td></tr></tbody></table>


# Estrutura

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Item de produto > Estrutura".**

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

Na personalização de **Estrutura do card,** é possível ativar as seguintes configurações:

**- Adicionar efeito de animação ao colocar o mouse:** adiciona um leve movimento ao passar o mouse no card do produto.

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

**- Usar a mesma altura para todos os itens:** aplica a mesma altura para o card e seus itens.&#x20;

<figure><img src="/files/9YdaShFJoCXGsSuGdwWM" alt=""><figcaption></figcaption></figure>

**- Remover bordas e espaçamentos do item:** remove as linhas do card.&#x20;

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

**- Exibir campo de quantidade:** adiciona um seletor de quantidade ao lado do botão comprar.&#x20;

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

{% hint style="warning" %}
Importante!&#x20;

O seletor de quantidade apenas será ativo caso o produto não possua variações.&#x20;
{% endhint %}

**- Usar estas cores:** para utilizar cores específicas no card do produto, marque a opção "**Usar estas cores".**&#x20;

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

Você pode configurar a **Cor de fundo** do card.&#x20;

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

<details>

<summary>Variações</summary>

Nessa seção, você pode:&#x20;

**- Exibir variações de tamanho:** habilita as variações de tamanho no card do produto.&#x20;

![](/files/tPrMQOplcswJXtKVMhJP)

**- Exibir variações de cores:** habilita as variações de cores no card do produto.

![](/files/X4dMLJTz4jFYZttjZFtY)

</details>

<details>

<summary>Etiquetas</summary>

Na edição das **Etiquetas,** é possível definir:&#x20;

**- Texto que vai ao lado do % de desconto:** define o texto de apoio da tag de desconto (exemplo: 10% **OFF,** **menos** 10%).

![](/files/tN0CJrV4yJ7K86oDSjoV)

**- Posição da etiqueta:** define se a tag será exibida antes ou depois.

![](/files/iQW4ipyvirQtFE8LBHfi)

**- Exibir etiqueta de última unidade:** habilita a opção de etiqueta de última peça em estoque.&#x20;

![](/files/kNWws1G3YBuVxmePbIaI)

</details>

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;


# Foto do produto

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Item de produto > Foto do produto".**

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

Na edição de **Foto do produto,** é possível **"Mostrar a segunda foto ao colocar o mouse".**

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

**- Formato da imagem:** é possível definir as dimensões da imagem no card do produto, entre: **Original, Quadrada, Horizontal** e **Vertical.**

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

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;


# Nome do produto

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Item de produto > Nome do produto".**

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

Na edição de **Nome do produto**, você pode definir:&#x20;

**- Tamanho:** o tamanho do texto, entre: **Pequeno, Médio** e **Grande.**

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

**- Limite de linhas:** define a quantidade de linhas que será permitida para o nome do produto.

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

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;


# Preço do produto

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.**.**
2. No menu lateral, clique em **"Item de produto > Preço do produto".**

<figure><img src="/files/9TlTwXANurYlc48uUNb6" alt=""><figcaption></figcaption></figure>

Na edição de **Preço do produto**, você pode definir:&#x20;

**- Tamanho:** define o tamanho do preço do produto entre **Pequeno, Médio** ou **Grande.**

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

**- Exibir ícones:** habilita a visualização dos ícones no card do produto.&#x20;

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

**- Exibir parcelas na lista de produtos:** habilita o parcelamento no card do produto.

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

<details>

<summary>Desconto por meio de pagamento</summary>

Nessa seção, você pode:&#x20;

**- Exibir o ícone do meio de pagamento:** habilita os ícones de pagamento personalizados no card (Exemplo: PIX, Boleto, etc).

![](/files/lqfnmVA6MvojnQYgyhlC)

**- Mostrar o preço com maior desconto:** habilita o preço com maior desconto no card do produto (Exemplo: PIX 5%, Boleto 7%, etc).&#x20;

![](/files/Nf7mG1UhxNinGdZgIl1L)

</details>

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;


# Produto sem estoque

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Item de produto > Produto sem estoque".**

<figure><img src="/files/0UdOFRnvWwbpbywnsMbp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Produto na lista</summary>

**- Exibir o produto quando não houver estoque:** habilita a exibição do produto mesmo quando não há estoque.&#x20;

![](/files/hftQHmh9J28jxtyHMQhx)

</details>

<details>

<summary>Preço do produto</summary>

**- Exibir o preço do produto quando não houver estoque:** habilita a exibição do preço no card do produto mesmo quando não há estoque.

![](/files/lWy2cHXMZiQ7e8Pv8iPg)

</details>

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;


# Botões

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.**".**
2. No menu lateral, clique em **"Item de produto > Botões".**

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

<details>

<summary>Botão de compra</summary>

**- Exibir botão de compra:** habilita o botão de compra no card do produto.

![](/files/wHG0QvWVCLhs2o6CjmLs)

**- Exibir ícone do carrinho no botão:** habilita o ícone do carrinho ao lado do texto.&#x20;

![](/files/lfA1QtV2WCHOebEQu2FR)

\- **Texto do botão:** permite alterar o texto do botão de compra no card (Exemplo: Eu quero, Adicionar, etc).&#x20;

![](/files/XVw52r9ynxfkUkT0T5yE)

</details>

<details>

<summary>Compra rápida</summary>

**- Permitir que seus clientes possam agregar produtos ao seu carrinho rapidamente na lista de produtos:**&#x20;

![](/files/rcYWFgltpYo9FhtPK3pO)

**- Exibir segundo botão para compra rápida (ícone de carrinho):** habilita um segundo botão ao lado do botão comprar.

![](/files/RyoZS5TYuTdFY1jpo6Fg)

</details>

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;


# Página de produto

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

Confira os módulos de personalização da Página de produto:

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Cabeçalho</td><td><a href="/pages/TDqHIxTHbKBaN4aQSb8B">/pages/TDqHIxTHbKBaN4aQSb8B</a></td></tr><tr><td>Informações do produto</td><td><a href="/pages/n3MT4ym5csLEXITsKisd">/pages/n3MT4ym5csLEXITsKisd</a></td></tr><tr><td>Galeria de fotos e vídeo</td><td><a href="/pages/sOewgdFDzDTDNDECh11e">/pages/sOewgdFDzDTDNDECh11e</a></td></tr><tr><td>Opções de compra e pagamento</td><td><a href="/pages/zf0NFDeC3FgJxwKoSvX2">/pages/zf0NFDeC3FgJxwKoSvX2</a></td></tr><tr><td>Guia de medidas</td><td><a href="/pages/1NLojihFPEYvWYV7fMxD">/pages/1NLojihFPEYvWYV7fMxD</a></td></tr><tr><td>Calculadora de frete</td><td><a href="/pages/4WUD9dwRH94KRWmLHLST">/pages/4WUD9dwRH94KRWmLHLST</a></td></tr><tr><td>Informações sobre a compra</td><td><a href="/pages/qHiAZ80Mhcuzrk7jMEwm">/pages/qHiAZ80Mhcuzrk7jMEwm</a></td></tr><tr><td>Selos personalizados</td><td><a href="/pages/P3MHlyIZPJzsCD2lT9EK">/pages/P3MHlyIZPJzsCD2lT9EK</a></td></tr><tr><td>Termo de aceite no produto</td><td><a href="/pages/ek40Z8RBmVdnC0DEHUkp">/pages/ek40Z8RBmVdnC0DEHUkp</a></td></tr></tbody></table>


# Cabeçalho

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

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

**- Exibir navegação estrutural:** habilita o caminho que o usuário percorre até o produto (Exemplo: Categoria > Produto).

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

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;


# Informações do produto

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

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

Na personalização de **Informações do produto,** é possível ativar as seguintes configurações:

\- **Exibir código SKU:** habilita o código SKU na página do produto.&#x20;

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

**- Exibir estoque disponível:** habilita o estoque do produto ao lado do botão comprar.&#x20;

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

**- Mostrar variações como botões:** habilita as opções cadastradas no produto em formato de botão (por padrão, é exibido um campo seletor).

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

{% hint style="info" %}
Por padrão, é exibido um campo seletor.&#x20;
{% endhint %}

**- Exibir a foto da variação de cor como botão:** habilita a foto da variação de cor do produto como botão.&#x20;

<figure><img src="/files/2ZzJKEbHjlxBwtXUsNTF" alt=""><figcaption></figcaption></figure>

**- Exibir tags do produto:** habilita as tags cadastradas no produto.&#x20;

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

**- Exibir descrição abaixo do botão comprar:** habilita a descrição abaixo do botão comprar.

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

{% hint style="info" %}
Por padrão, a descrição é exibida abaixo do produto.
{% endhint %}

**- Exibir depoimentos na página do produto:** habilita os depoimentos na página do produto.

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

{% hint style="warning" %}
Importante!&#x20;

Os depoimentos devem estar cadastrados para que essa opção sejá ativa.
{% endhint %}

**- Exibir opções para compartilhar:** habilita opções de compartilhamento para redes sociais na página do produto.&#x20;

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

**- Título:** permite a edição do título do carrossel de produtos relacionados.&#x20;

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

<details>

<summary>Informações das parcelas</summary>

**- Exibir parcelas na página do produto:** habilita o parcelamento na página do produto.&#x20;

![](/files/JDMKZFumbGWDb9njd702)

</details>

{% hint style="warning" %}
Importante!&#x20;

O parcelamento deve estar configurado nos meios de pagamento para que essa funcionalidade seja ativa.&#x20;
{% endhint %}

<details>

<summary>Desconto por meio de pagamento</summary>

**- Mostrar o preço com maior desconto:** habilita o preço com maior desconto na página do produto.&#x20;

![](/files/u70mqIDkKCgDTSNrHBBG)

</details>

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;


# Galeria de fotos

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.**.**
2. No menu lateral, clique em **"Página de produto > Galeria de fotos".**

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

<details>

<summary>Design da galeria em celulares</summary>

Nessa seção você pode **Exibir miniaturas** ou **Exibir parte da próxima foto.**

![](/files/WSmqknwJGt4MGS2PP6Zc)

**- Exibir miniaturas:** exibe miniaturas abaixo da foto do principal do produto.&#x20;

![](/files/gFhk5UEz7s15CyQRVIK6)

&#x20;**-** **Exibir parte da próxima foto:** exibe parte da próxima foto na página.&#x20;

![](/files/Eili533kwyz109Ai9rt0)

</details>

<details>

<summary>Como ampliar as imagens da galeria em computadores</summary>

Nessa seção você pode **Ampliar ao passar o mouse** ou **Abrir um popup ao clicar.**

![](/files/5yWLAzI9Et6QCqPIlP1Y)

**- Ampliar ao passar o mouse:** habilita um zoom na imagem.

**-** **Abrir um popup ao clicar:** habilita um popup na imagem.&#x20;

</details>

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;


# Opções de compra e pagamento

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

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

Na personalização de **Opções de compra e pagamento,** é possível ativar as seguintes configurações:

**- Exibir o botão do WhatsApp no produto:** habilita o botão de WhatsApp abaixo do botão comprar.

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

{% hint style="warning" %}
Importante!&#x20;

O número do WhatsApp deve estar configurado no administrador da Nuvemshop para que essa funcionalidade seja ativa.
{% endhint %}

**- Texto do botão comprar:** permite alterar o texto do botão do WhatsApp.

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

**- Fixar o botão de compra ao rolar:** fixa o botão de compra ao rolar a página do produto.&#x20;

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

**- Exibir mensagem de última peça em estoque:** habilita uma etiqueta de última peça no produto.

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

**- Mensagem:** permite alterar o texto da etiqueta de última peça.&#x20;

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

<figure><img src="/files/Tj8QNYbkti8fX2YIs75H" alt="" width="375"><figcaption><p>Exemplo de mensagem de última peça em estoque</p></figcaption></figure>

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;


# Guia de medidas

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página de produto > Guia de medidas".**

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

Caso sua loja possua produtos com variações de 'Tamanho', você pode incluir um pop-up na página de produto da sua loja com as tabelas de medidas.&#x20;

Para isso, é necessário [criar uma página](/minha-nuvemshop/paginas-de-conteudo) e inserir o link no campo **"Link da página"**, conforme imagem abaixo:

<figure><img src="/files/Hd1ZIwdRxZ5O9AdlsVJz" alt="" width="375"><figcaption></figcaption></figure>

Ao clicar no botão "Guia de Medidas", será apresentado um modal conforme exemplo abaixo:

<figure><img src="/files/aNfq1txsa7r2w6oJHGQk" alt=""><figcaption><p>Exemplo de exibição do Guia de Medidas na página de produto</p></figcaption></figure>

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;


# Formas de entrega

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página de produto > Formas de entrega".**

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

Na personalização de **Formas de entrega,** é possível ativar:&#x20;

**- Exibir a calculadora de frete e as lojas físicas na página de produto:** habilita a calculadora de frete e a listagem de lojas físicas na página do produto.

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

{% hint style="warning" %}
Importante!&#x20;

Os meios de envio devem estar cadastrados no painel da Nuvemshop.
{% endhint %}

<details>

<summary>Layout da calculadora</summary>

Na opção de **Layout da calculadora**, você pode definir entre **Aberto** ou **Fechado.**&#x20;

![](/files/SLR47iTuRiVo7RFJvbTo)

</details>

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;


# Informações sobre a compra

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

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

Nessa seção, você pode adicionar informações abaixo do formulario de produto:

<figure><img src="/files/DdSiYVYvPLzrk0pTfZ3Y" alt="" width="375"><figcaption></figcaption></figure>

Inclua informações adicionais ao bloco do produto para aumentar a confiança do seu usuário e transmitir mais segurança em relação à loja. Aproveite para falar sobre trocas, devoluções e garantia.

Você pode cadastrar um ícone, um título e uma descrição em cada um dos três blocos disponíveis.&#x20;

<figure><img src="/files/CxPie7IjxuDulO835NkX" alt="" width="375"><figcaption></figcaption></figure>

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;


# Campos personalizados

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página de produto > Campos personalizados".**

<figure><img src="/files/13sYSXzUDQLF03oJBKlJ" alt=""><figcaption></figcaption></figure>

&#x20;**- Exibir campos personalizados:** habilite o checkbox para ativar essa função em sua loja.

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

Você pode disponibilizar **até 2 campos de personalização** para o seu cliente. Lembrando que esses campos ficam na página de produto, como exemplificado na imagem abaixo na opção **"Digite seu nome"** e **"Digite seu tamanho"**.

<figure><img src="/files/vsyr5kjTsARSvslmghiX" alt=""><figcaption><p>Exemplo de campos personalizados aplicados ao tema Flex.</p></figcaption></figure>

**- Campos personalizáveis:**

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

**Nome para referência:** quando o campo for preenchido pelo seu cliente, você saberá qual é a informação preenchida observando o nome desse campo. Como no exemplo abaixo:

<figure><img src="/files/rPi5eYtfKXD42viae55H" alt=""><figcaption><p>nome-personalizado: Odo Digital</p></figcaption></figure>

**Texto da etiqueta do campo:** esse campo é disponibilizado na página do produto para personalização. Adicione o texto que ficara a mostra para o seu cliente saber qual informação ele deve adicionar nesse campo personalizável.&#x20;

<figure><img src="/files/NXsEiuhM448bchKnrAYE" alt=""><figcaption><p>Exemplo de como fica o campo personalizado. </p></figcaption></figure>

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

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

**- Tag de referência (para produtos específicos):**&#x20;

{% hint style="warning" %}
**Atenção:**\ <mark style="color:orange;">Por padrão os campos personalizados são exibidos em todos os produtos da loja</mark>. A tag de referência é necessária se desejar incluir o campo apenas em **produtos específicos**, necessitando adicionar a mesma tag no produto, **caso não queira deixe-o em branco.**
{% endhint %}

Nesse campo você deve adicionar a **tag** para identificar posteriormente, dentro dos produtos específicos, que terão os campos personalizáveis. Digamos que sua tag seja "**personalizado**", você deve ir dentro do produto que deseja habilitar esse campo de personalização e adicionar a tag "**personalizado**". O texto deve ser o mesmo, escrito da mesma forma para que o tema reconheça como a **tag de referência.**

**Pronto! 🙌**&#x20;


# Selos personalizados

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página de produto > Selos personalizados".**

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

Na personalização de **Selos personalizados,** é possível ativar as seguintes configurações:

**- Exibir selos na página do produto:** habilita a exibição dos selos na página.&#x20;

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

**- Exibir selos no item de produto:** habilita a exibição dos selos no card do produto.

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

**- Localização dos selos:** permite definir a localização dos selos no card do produto em **Acima à esquerda** ou **Abaixo da imagem.**

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

**- Imagem do selo:** clique em **"Selecionar imagem"** para realizar o upload do selo personalizado.&#x20;

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

Para cada imagem adicionada, você deve definir um título (que deverá ser adicionado nas tags do produto) e uma descrição, que será exibida junto à imagem.

<figure><img src="/files/wU0Eb6Z0JeBJ3IZzFYft" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
**Importante:** o texto utilizado no campo **Título** deverá ser cadastrado como uma tag dentro de cada produto no qual deseja-se exibir o selo.&#x20;
{% endhint %}

**- Exibir descrição abaixo do selo:** habilita a descrição abaixo do selo. Por padrão, a descrição é ao lado.

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

**- Títulos dos selos na página do produto:** permite adicionar um título a seção de selos personalizados.&#x20;

<figure><img src="/files/3Z7EzLUtTAMy87M8eTtR" alt=""><figcaption></figcaption></figure>

**- Altura do selo em pixels:** define a altura dos selos na página do produto.

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

**- Limite de selos no item:** define a quantidade de selos no item.&#x20;

<figure><img src="/files/908YS2A7ZTWIHlIKhb4E" alt=""><figcaption></figcaption></figure>

Abaixo você pode conferir o **módulo de selos personalizados** na página de produto:

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

E, na imagem abaixo você pode conferir a **exibição dos selos no card do produto** (conforme limite de selos definido no módulo).

<figure><img src="/files/7UXTUNUbsMxk6wgdf7gK" alt="" width="326"><figcaption></figcaption></figure>

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;


# Termos de aceitação

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página de produto > Termos de aceitação".**

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

Os **Termos de aceitação** é indicado para quem vende produtos com restrição e necessidade de documentação específica, ou para quem deseja notificar sobre o processo de produção para produtos personalizados.

**- Exibir termos para aprovação:** você habilita a funcionalidade de termo de aceitação nos produtos.&#x20;

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

**- Palavra chave:** sinaliza a tag a ser cadastrada na página do produto que deseja-se exibir o termo.

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

{% hint style="warning" %}
Importante!&#x20;

A tag cadastrada na seção de **"Termos de aceitação"** deve ser igualmente cadastrada no produto.&#x20;
{% endhint %}

**- Título:** habilita adicionar um título para o termo, especificando a necessidade a ser aprovada para a compra do produto.

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

**- Mensagem:** habilita adicionar uma descrição para o termo, detalhando o que está sendo aprovado ou exigido.

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

{% hint style="warning" %}
Importante! \
\
O termo de aceite é exibido na página do produto para o cliente concordar, para então autorizar adicionar o produto no carrinho.
{% endhint %}

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;


# Página Personalizada

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Página institucional".**

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

Habilite a opção **''Customizar página''** para que as personalizações sejam aplicadas ao layout.&#x20;

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

**- Link da página para customizar:** adicione o link da página que será personalizada, por exemplo: **[www.seudominio.com.br/quem-somos](http://www.seudominio.com.br/quem-somos)** (Isso fará com que a personalização realizada seja aplicada na página ''Quem Somos'').&#x20;

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

<details>

<summary>Seções</summary>

Dentro de cada seção, você pode:&#x20;

**- Usar estas cores:** habilite essa opção para utilizar as cores que deseja para a seção.&#x20;

![](/files/8mkUuqRoLtkrGjUgREVq)

Defina a **Cor de fundo** e a **Cor do texto.**&#x20;

![](/files/JO35rLddJobDXH1B6f9G)

Clique em ''**Selecionar imagem''** e faça o upload da imagem que deseja para a seção.&#x20;

![](/files/I0HmqqYL60LlHyZPYXem)

**- Título:** defina o título da seção.&#x20;

**- Texto:** defina o texto da seção.&#x20;

![](/files/UdXy8oA3JQGVe2uzDYwg)

</details>

{% hint style="info" %}
Você pode personalizar até 5 seções da mesma página.&#x20;
{% endhint %}

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Página em Construção


# Carrinho de compras

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

Confira os módulos de personalização do Carrinho de compras:

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Banner do carrinho de compras</td><td><a href="/pages/FPzX8tr7MtXVfnWVOEH9">/pages/FPzX8tr7MtXVfnWVOEH9</a></td></tr><tr><td>Valor mínimo de compra</td><td><a href="/pages/dEqiwMS8uzlZIoKW9Nzv">/pages/dEqiwMS8uzlZIoKW9Nzv</a></td></tr><tr><td>Carrinho de compra rápida</td><td><a href="/pages/JlyNV8AoSmdfVbHFwjqq">/pages/JlyNV8AoSmdfVbHFwjqq</a></td></tr><tr><td>Calculadora de frete </td><td><a href="/pages/oWcy9DGhvv3DIjNVgUXI">/pages/oWcy9DGhvv3DIjNVgUXI</a></td></tr><tr><td>Barra de progresso do frete grátis</td><td><a href="/pages/kfBkaSXlWtReGMvLQAkY">/pages/kfBkaSXlWtReGMvLQAkY</a></td></tr></tbody></table>


# Valor mínimo de compra

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Carrinho de compras > Valor mínimo de compra".**

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

Nesta seção, você pode **restringir o valor mínimo para compra** em sua loja. Para **definir** um valor mínimo para que uma compra **somente possa ser finalizada caso atinja o valor definido**, escreva o valor (em números) no campo abaixo.

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

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

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

**Pronto! 🙌**&#x20;


# Carrinho de compra rápida

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

<figure><img src="/files/1zimfHLHkJxehd5gRYNo" alt=""><figcaption></figcaption></figure>

O carrinho de compra rápida é uma **janela flutuante** do carrinho de compras. Ao ativar essa opção, é possível **acessar os produtos que estão dentro do carrinho sem sair da página atual**.

<figure><img src="https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1660769606202-ativar%20carrinho%20de%20compra%20r%C3%A1pida-shipping.jpg" alt="" width="375"><figcaption></figcaption></figure>

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

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

**Pronto! 🙌**&#x20;


# Formas de entrega

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

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

Na personalização de **Formas de entrega,** é possível ativar as seguintes configurações:

**- Exibir a calculadora de frete e as lojas físicas no carrinho:** habilita a calculadora de frete no carrinho de compra.&#x20;

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

**- Exibir a barra de progresso de frete:** habilita a barra de progresso para que seja possível visualizar o andamento do **status de valor mínimo para compra**.

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

**- Cor da barra:** é possível escolher a cor da barra de progresso entre **Vermelho para verde** ou **Cores da sua marca.**

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

{% hint style="warning" %}
Importante! \
\
A barra de progresso apenas será ativa se houver uma regra de frete grátis cadastrada no painel da Nuvemshop.
{% endhint %}

{% hint style="warning" %}
Importante! \
\
A regra de frete grátis cadastrada no painel **precisa ter um preço mínimo cadastrado** e **não pode ter restrições de categorias** **ou** **de zonas de entrega.**&#x20;
{% endhint %}

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

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

**Pronto! 🙌**&#x20;


# Rodapé da página

Personalize os elementos do rodapé da sua página, insira informações sobre sua loja, inclua meios de pagamento, formas de envio e selos de segurança.

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

Confira os módulos de personalização do Rodapé da página:

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Estilo</td><td><a href="/pages/AmEK5K6XkFB0DrBOJO0z">/pages/AmEK5K6XkFB0DrBOJO0z</a></td></tr><tr><td>Cores</td><td><a href="/pages/FSOsg58yrEKW837fY2Bm">/pages/FSOsg58yrEKW837fY2Bm</a></td></tr><tr><td>Logo</td><td><a href="/pages/lYFkAvoHQiLxzL3JM2P9">/pages/lYFkAvoHQiLxzL3JM2P9</a></td></tr><tr><td>Menus</td><td><a href="/pages/7PUwC5QPnVn04JCwTK2t">/pages/7PUwC5QPnVn04JCwTK2t</a></td></tr><tr><td>Sobre nós</td><td><a href="/pages/2CvEEOpAm9F9cfOdJKaW">/pages/2CvEEOpAm9F9cfOdJKaW</a></td></tr><tr><td>Atendimento</td><td><a href="/pages/6hG76aVzvFaxDtWgBmmN">/pages/6hG76aVzvFaxDtWgBmmN</a></td></tr><tr><td>Bandeiras de pagamento</td><td><a href="/pages/CSG8ysvJBtf4bdYeBlOT">/pages/CSG8ysvJBtf4bdYeBlOT</a></td></tr><tr><td>Meios de envio</td><td><a href="/pages/y2Gv4TzWbCPRDoDphWiv">/pages/y2Gv4TzWbCPRDoDphWiv</a></td></tr><tr><td>Selos de segurança</td><td><a href="/pages/cG8mDGSd59vV2vukKxAQ">/pages/cG8mDGSd59vV2vukKxAQ</a></td></tr><tr><td>Inscrição para newsletter </td><td><a href="/pages/CdCAtFJRR3wivl7epkMb">/pages/CdCAtFJRR3wivl7epkMb</a></td></tr><tr><td>Créditos da loja</td><td><a href="/pages/qA3I74ZT5TIC5BhzWngq">/pages/qA3I74ZT5TIC5BhzWngq</a></td></tr></tbody></table>


# Layout

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Rodapé da página > Layout".**

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

A seleção de **layout do rodapé** vai definir a organização dos elementos no topo da sua loja.&#x20;

Atualmente, o Flex disponibiliza **duas opções de estilos**, conforme abaixo:&#x20;

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

**- 3 blocos com 2 menus:**

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

**- 2 blocos com newsletter em linha:**

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

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Cores

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Rodapé da página > Cores".**

<figure><img src="/files/3uUmGAun5XLg9fQqx94d" alt=""><figcaption></figcaption></figure>

**- Usar estas cores:** para utilizar cores específicas neste módulo, 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.**

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

Na personalização de **Cores** do rodap&#xE9;**,** é possível configurar a **Cor de fundo, Cor dos textos, Cor dos títulos** e a **Cor dos ícones** das redes sociais.&#x20;

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

**- Newsletter:** para utilizar cores específicas neste módulo, 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.**

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

Na personalização de **Cores** da newslette&#x72;**,** é possível configurar a **Cor de fundo, Cor dos textos, Cor de fundo do campo , Cor do texto do campo, Cor de fundo do botão, Cor de texto do botão** e a **Cor dos ícones de redes sociais.**&#x20;

<figure><img src="/files/1GFfweJ9CAWBd29IsBbz" alt=""><figcaption></figcaption></figure>

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Logo

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.**.**
2. No menu lateral, clique em **"Rodapé da página > Logo".**

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

Nesta seção, você pode adicionar uma **nova logo** para o rodapé da sua loja. Clique em "**Selecionar imagem"** e faça o upload da logo que deseja.&#x20;

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

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Inscrição para newsletter

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Rodapé da página > Inscrição para newsletter".**

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

Na personalização de **Inscrição para newsletter,** é possível ativar as seguintes configurações:

**- Permitir que seus clientes se inscrevam para receber novidades.**

<figure><img src="/files/9RhD6MVyzVl0MgQTIPSv" alt=""><figcaption></figcaption></figure>

**- Exibir campo de telefone/Whatsapp:** habilita um campo para adicionar o telefone para contato.

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

**- Título:** permite definir um título para a seção.

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

**- Descrição:** permite adicionar uma descrição, abaixo do título.&#x20;

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

**- Texto do botão:** permite alterar o texto do botão.

<figure><img src="/files/7MjoH97bhXQyfRaedCLL" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/lntKNbSP3m9k0CniMNCZ" alt=""><figcaption><p>Exemplo da exibição de inscrição para newsletter com campo de a telefone/WhatsApp</p></figcaption></figure>

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Menus

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Rodapé da página > Menus".**

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

<details>

<summary>Menu principal</summary>

**- Exibir o menu:** ao habilitar essa opção, o menu será exibido no rodapé da página.

![](/files/AFEvd30HwryvwIuwQb5i)

**- Escolher o menu para exibir:** você deve selecionar um menu previamente cadastrado nas [Barras de navegação](/minha-nuvemshop/barras-de-navegacao).

![](/files/SZ8S6pWMu9ANHhj4AsTo)

\- **Título:** você pode adicionar um título acima do menu.&#x20;

![](/files/p5q4QZ2KX7XCNdtraJym)

</details>

<details>

<summary>Menu secundário</summary>

**- Exibir o menu:** ao habilitar essa opção, o segundo menu será exibido no rodapé da página.

![](/files/AFEvd30HwryvwIuwQb5i)

**- Escolher o menu para exibir:** você deve selecionar um menu previamente cadastrado nas [Barras de navegação](/minha-nuvemshop/barras-de-navegacao).

![](/files/Fdl9BkfoeY6AE69otwXe)

\- **Título:** você pode adicionar um título acima do menu.&#x20;

![](/files/86oXPd1zEiyuVO5kC3o3)

</details>

<figure><img src="/files/hi9QwKfUA2EX43SzivDu" alt=""><figcaption><p>Exemplo de rodapé da página utilizando dois menus (Menu principal e Ajuda e Suporte)</p></figcaption></figure>

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Redes Sociais

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.**.**
2. No menu lateral, clique em **"Rodapé da página > Redes Sociais".**

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

<details>

<summary>WhatsApp</summary>

Você pode configurar a mensagem que será enviada pelo cliente ao clicar no botão de WhatsApp flutuante no canto inferior direito da loja.&#x20;

![](/files/On3L65wx2RCUnJP2JDUt)

</details>

<details>

<summary>LinkedIn</summary>

Você pode adicionar o link do seu perfil do LinkedIn, que aparecerá como ícone no rodapé do layout.&#x20;

![](/files/ZzcSdHaMFkfsN2aceebM)

</details>

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Sobre nós

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Rodapé da página > Sobre nós".**

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

Ao selecionar a opção **"Exibir texto",** você pode incluir ao rodapé da página um texto personalizado sobre a sua marca.&#x20;

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

**- Título:** defina um título para essa seção.&#x20;

**- Descrição:** adicione informações sobre a sua marca ou loja.

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

<figure><img src="/files/NGnr6b5jXMz42Wxo2dbA" alt=""><figcaption><p>Exemplo de rodapé com texto Sobre nós</p></figcaption></figure>

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Atendimento

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.**.**
2. No menu lateral, clique em **"Rodapé da página > Atendimento".**

<figure><img src="/files/4HmqyWNN3Qk7KF7irg4T" alt=""><figcaption></figcaption></figure>

Ao selecionar a opção **"Exibir os dados de contato",** você disponibiliza os principais dados de contato no rodapé da página (WhatsApp, telefone, e-mail, endereço). Estes dados devem estar previamente cadastrados na seção de [Informações de contato](/minha-nuvemshop/informacao-de-contato) no painel Nuvemshop.&#x20;

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

**- Título:** você pode adicionar um título personalizado para a seção.&#x20;

**- Horário de apertura:** adicione o horário de atendimento e funcionamento da sua loja.

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

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Formas de pagamento

Ao habilitar o serviço de meios de pagamento em sua loja, é possível exibir as "bandeiras" correspondentes no rodapé da sua loja virtual, como uma informação adicional para seus clientes.

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Rodapé da página > Formas de pagamento".**

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

Habilite a opção ''**Exibir formas de pagamento na sua loja''** para exibir as bandeiras de pagamento correspondentes no rodapé da sua loja virtual.

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

\- **Imagens em escala de cinza:** habilita as bandeiras de pagamento em uma tonalidade acinzentada.&#x20;

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

<figure><img src="/files/JzUC0at2S1UibUuC8Fkq" alt="" width="328"><figcaption><p>Exemplo de rodapé com bandeiras em escala de cinza na versão mobile </p></figcaption></figure>

<details>

<summary>Exibir formas de pagamento</summary>

É possível habilitar as bandeiras **Padrão** ou optar por incluir as bandeiras **Personalizadas.**&#x20;

![](/files/EVaNgmOkEeCWvbVgm90D)

**- Padrão:** habilite as bandeiras dos [Meios de pagamento](/configuracoes-gerais/meios-de-pagamento) previamente cadastrados na plataforma Nuvemshop.

**- Personalizadas:** habilite formas de pagamento personalizadas.

![](/files/8KKOqMXUIxXQfdWiZhE2)

</details>

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Meios de envio

Ao habilitar o serviço de frete em sua loja, é possível exibir das "bandeiras" correspondentes no rodapé da sua loja virtual, como uma informação adicional para seus clientes.

1. Acesse o painel Nuvemshop e siga pelo caminho **""Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Rodapé da página > Meios de envio".**

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

Marque **"Exibir as opções de frete na sua loja"** para mostrar as [Formas de entrega (Frete)](/configuracoes-gerais/formas-de-entrega-frete) previamente cadastradas na plataforma Nuvemshop.&#x20;

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

**- Imagens em escala de cinza:** habilita as formas de envio em uma tonalidade acinzentada.&#x20;

<figure><img src="/files/4Ty5TKzURsEAUvuO4hOp" alt=""><figcaption></figcaption></figure>

**- Formas de envio adicionais:** habilita formas de envio personalizadas ao rodapé.&#x20;

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

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Segurança e certificações

Inserir algum selo de reconhecimento ou de segurança em sua loja ajudará a conquistar a confiança de seus clientes.

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Rodapé da página > Segurança e certificações".**

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

Marque a opção ''**Exibir selo do Google Safe Browsing''** para que o selo de segurança seja habilitado ao rodapé.&#x20;

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

**- Cores do selo:** defina qual cor o selo de segurança terá entre **Cinza**, **Preto** ou **Branco**.&#x20;

<figure><img src="/files/7Q8bP3vDTqxphTc3c1Mu" alt=""><figcaption></figcaption></figure>

Você visualizará duas formas de adicionar o selo no rodapé do layout: **Selecionar uma imagem** ou **Código HTML ou Javascript do selo.**

\- **Selecionar imagem:** clique para buscar a imagem salva em seu computador/notebook e carregá-la no layout de sua loja.&#x20;

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

Ao carregar a imagem, clicando no **ícone de lápis**, você verá um campo onde conseguirá **incluir um link** para redirecionar os clientes a uma página (caso queira):

<figure><img src="https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1665173126870-campo%20link-selo%20personalizado.png" alt="" width="375"><figcaption></figcaption></figure>

\- **Código HTML ou Javascript do selo:** permite vincular um selo via código HTML ou Javascript com uma validação através da certificadora. Caso tenha um código em HTML ou Javascript, basta colá-lo no campo.

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

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Créditos da loja

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Rodapé da página > Créditos da loja".**

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

Habilite a opção ''**Exibir título da página atual no rodapé''** para que o título seja exibido.&#x20;

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

**- Imagens para os créditos:** faça o upload de uma imagem personalizada.

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

**- Link:** adicione um link para a imagem.

<figure><img src="/files/06MQfl6XlyEPtmi9n68O" alt=""><figcaption></figcaption></figure>

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**


# Edição de CSS avançada

A edição do código CSS da loja virtual permite fazer pequenas alterações no layout. Para fazer esse tipo alteração, recomendamos que tenha conhecimentos avançados em linguagens de programação.

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.**"Personalizar layout".**
2. No menu lateral, clique em **"Edição de CSS avançada".**

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

Insira código que deseja usar no campo correspondente e clique em **"Testar CSS"**.&#x20;

{% hint style="warning" %}

#### Para fazer **mais de uma alteração por CSS**, recomendamos **colar os diferentes códigos um abaixo do outro**, separados por um espaço em branco (Enter do teclado).&#x20;

No entanto, não é indicado fazer muitas alterações por CSS, pois **se você alterar o layout da loja, elas serão perdidas**, já que cada layout possui suas próprias características.
{% endhint %}

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

![](https://static.helpjuice.com/helpjuice_production/uploads/upload/image/7634/direct/1643232327031-1643232327031.png)

**Pronto! 🙌**

Para saber mais de edições via CSS avançada consulte a base de conhecimento da própria Nuvemshop:&#x20;

* [O que dá para ser alterado por CSS nos layouts da Nuvemshop?](https://atendimento.nuvemshop.com.br/pt_BR/codigo-css/o-que-da-para-ser-alterado-por-css-nos-layouts-da-nuvemshop)
* [Como obter o código CSS para usar na minha Nuvemshop?](https://atendimento.nuvemshop.com.br/pt_BR/codigo-css/como-obter-o-codigo-css-para-usar-no-layout)&#x20;


# Layout




---

[Next Page](/llms-full.txt/1)