1 of 100

Flex Nuvemshop

Base de conhecimento TemaFlex

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

Ainda não contratou o Tema Flex para sua loja virtual? .

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:

Sobre o Flex

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.

Se você precisar de suporte após a leitura do manual, entre em contato através do [email protected], em horário comercial, ou diretamente com a agência que desenvolveu sua loja.

Contratação e recomendações

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

A contratação do tema Flex para Nuvemshop é feito exclusivamente pelo site da Nuvemshop, através do link , 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.

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.

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 através de um rascunho. Para isso, acesse Loja Online > Layout, e na área de Teste em rascunho, clique em Criar rascunho

Lista de Funcionalidades

O que você já encontra no Tema Flex?

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 parceiros, desenvolvedores e clientes com conhecimento técnico em programação realizem personalizações profundas e construam uma identidade visual única para a loja.

LOJA COM FTP ABERTO

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.

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.

Para saber mais sobre edições via código consulte a própria base de conhecimento da plataforma- Nuvemshop nesse link:

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.

Dúvidas Frequentes

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

O Flex contempla todas as funcionalidades de um tema padrão da Nuvemshop?

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.

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

Personalizar Layout

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.

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

Estilos de layout

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

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

Espaçamento

Cores

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

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.

Barra de anúncio

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

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

Logo

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

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

Barra de busca

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

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

- Cores: para utilizar cores específicas na barra de busca, marque a opção

Conta de Usuário

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

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

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

Menu de departamentos

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

- 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.

Banner em destaque

Destaque seus produtos, novidades e até mesmo ofertas com o Banner destaque.

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Página Inicial > Banner em destaque".

Habilite a opção ''Usar esta cor'', para utilizar cores específicas.

Configure a Cor de fundo da seção.

- Link: adicione um link para os banners.

Clique em ''Selecionar imagem'' e faça o upload de um banner em computadores e de um banner em celulares.

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:

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

Pronto! 🙌

Banners em grade

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Página Inicial > Banners em grade".

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

Você pode configurar a Cor de fundo e a Cor do texto da seção.

Para configurar os Banners em grade, você deve se atentar aos tamanhos, pois os mesmos dependem da quantidade que deseja exibir.

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.

Clique em ''Selecionar imagem'' e faça o upload do banner que desejar.

- Título: configure o título do banner.

- Texto do botão: configure o texto do botão.

- Link: adicione um link para a seção.

É possível configurar até 4 banners diferentes.

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:

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

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.

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Página Inicial > Mensagem de boas vindas".

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

Você pode configurar a Cor do fundo e a Cor do texto.

- Título: defina o título da mensagem.

- Mensagem: defina a mensagem que será exibida.

- Link: adicione um link para a seção.

Clique em ''Selecionar imagem'' e faça o upload da imagem que deseja para a seção.

Defina a posição da imagem entre Esquerda, Direita ou Centralizado.

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.

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

Pronto! 🙌

Mensagem institucional

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Página Inicial > Imagem e texto".

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

Você pode configurar a Cor do fundo e a

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.

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Página Inicial > Vídeo".

Configure para que um vídeo seja exibido na página inicial do seu layout.

Habilite a opção ''Aumentar à largura da tela'' para que o tamanho do vídeo para se estenda até as bordas da tela.

Menu adicional

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Página Inicial > Menu adicional".

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''.

- Cores: para utilizar cores específicas, marque a opção ''

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Página inicial > Newsletter".

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é.

Clique em ''Usar estas cores para a seção'' para utilizar cores específicas na Newsletter.

Configure a Cor de fundo, Cor do texto, Cor do botão e Texto do botão.

As cores escolhidas para a seção não interferem na Newsletter presente no rodapé

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.

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

Pronto! 🙌

FAQ

Conteúdo em desenvolvimento

Módulos de Imagem e Texto

Conteúdo em desenvolvimento

Popup promocional

O Banner popup pode ser usado para captação de leads, informações promocionais ou para algum aviso importante.

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Página inicial > Popup promocional".

Habilite a opção ''Exibir popup'' para que a funcionalidade seja ativa.

Habilite a opção ''Exibir formulário'' para que o formulário de cadastro seja ativo.

Clique em ''Selecionar imagem'' para fazer o upload tanto da imagem para o popup, quanto da logo para o popup.

- Frase: adicione uma frase para a Newsletter do popup.

- Link: adicione um link para a imagem do popup.

O link so será ativo caso a opção de formulário não esteja ativa.

Habilite para que o link seja aberto em uma nova janela ao clicar em ''Abrir link em uma nova janela''.

- Cookie: adicione um tempo de armazenamento até o popup aparecer novamente ao acessar o site.

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.

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

Pronto! 🙌

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.

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

Banner de topo

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Página de categoria > Banner de topo".

Você poderá definir: Banner em computadores e Banner em celulares.

Para carregar a imagem do banner, clique em "Selecionar imagem" e adicione o banner desejado.

Importante!

Fique atento para as dimensões sugeridas para o banner desktop e mobile.

Para incluir link no banner clique no ícone editar (lápis), no topo do banner.

- Abrir link em nova janela: caso o link do banner seja para um site ou ferramenta externa (outro site) habilite a opção.

Ao finalizar, clique em "Publicar Alterações".

Pronto! 🙌

Filtros e paginação

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Página de categoria > Filtros e paginação".

Produtos na lista

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Página de categoria > Produtos na lista".

- Quantidade de produtos por linha em celulares: você pode definir a quantidade de produtos por linha no mobile.

- Quantidade de produtos por linha em computadores: você pode definir a quantidade de produtos por linha no desktop.

Ao finalizar, clique em "Publicar Alterações".

Pronto! 🙌

Foto do produto

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Item de produto > Foto do produto".

Na edição de Foto do produto, é possível "Mostrar a segunda foto ao colocar o mouse".

- Formato da imagem: é possível definir as dimensões da imagem no card do produto, entre: Original, Quadrada, Horizontal e Vertical.

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

Pronto! 🙌

Nome do produto

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
No menu lateral, clique em "Item de produto > Nome do produto".

Na edição de Nome do produto, você pode definir:

- Tamanho: o tamanho do texto, entre: Pequeno, Médio e Grande.

- Limite de linhas: define a quantidade de linhas que será permitida para o nome do produto.

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

Pronto! 🙌

Preço do produto

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout"..
No menu lateral, clique em "Item de produto > Preço do produto".

Na edição de Preço do produto, você pode definir:

- Tamanho: define o tamanho do preço do produto entre Pequeno, Médio ou Grande.

Minha Nuvemshop

Produtos em promoção

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

Nessa seção, você pode configurar:

- Título: define o título do carrossel de produtos.

- Subtítulo: define o subtítulo do carrossel de produtos.

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

Exibição em celulares

- Mostrar produtos como: você definir a exibição entre Carrossel ou Grade.

- Quantidade de produtos por linha: defina quantos produtos serão exibidos por linha no mobile.

Exibição em computadores

- Mostrar produtos como: você definir a exibição entre Carrossel ou Grade.

- Quantidade de produtos por linha: defina quantos produtos serão exibidos por linha no desktop.

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

- Exibir paginação: habilita a paginação abaixo do carrossel.

- 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.

Escolhendo os produtos das vitrines:

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

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.

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:

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

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.

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

Para habilitar essa funcionalidade, marque a opção ''Exibir os banners na home''.

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

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

- Tamanho do ícone em computadores: defina o tamanho do ícone entre Pequeno, Médio, Grande ou Muito grande.

- Tamanho do ícone em celulares: defina o tamanho do ícone entre Pequeno, Médio, Grande ou Muito grande.

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

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

- Mostrar os banners como: formato 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.

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

Você pode cadastrar até 4 informações, configurando entre:

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

- Título: defina o título que desejar.

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

- Link: adicione um link na informação cadastrada.

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

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

Importante

O Flex permite cadastrar até 4 informações personalizadas.

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:

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

Pronto! 🙌

Produtos novos

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

Nessa seção, você pode configurar:

- Título: define o título do carrossel de produtos.

- Subtítulo: define o subtítulo do carrossel de produtos.

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

Exibição em celulares

- Mostrar produtos como: você definir a exibição entre Carrossel ou Grade.

- Quantidade de produtos por linha: defina quantos produtos serão exibidos por linha no mobile.

Exibição em computadores

- Mostrar produtos como: você definir a exibição entre Carrossel ou Grade.

- Quantidade de produtos por linha: defina quantos produtos serão exibidos por linha no desktop.

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

- Exibir paginação: habilita a paginação abaixo do carrossel.

Escolhendo os produtos das vitrines:

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

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.

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:

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

Pronto! 🙌

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.

Acesse o painel Nuvemshop e siga pelo caminho "Loja Online > Layout > Editar layout".
Clique na opção Cores da sua marca no menu lateral para acessar as configurações das cores da sua loja virtual.

Selecionando suas cores

1 - Cores da sua marca: você verá os elementos que pode personalizar, como: Cor principal, Cor secundária e Cor de destaque. 2 - Botão de compra: você poderá personalizar tanto a cor de fundo, quanto a cor do texto do botão. 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; - Cores invertidas no botão de compra. 3 - Cores de contraste: você poderá personalizar tanto a cor de fundo, quanto a cor do texto. 4 - Etiquetas de frete grátis e desconto: você poderá personalizar tanto a cor de fundo, quanto a cor do texto da etiqueta.

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".

Importante!

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.

Cores pré-determinadas

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.

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.

Após escolher as cores para os elementos, clique "Publicar alterações" para finalizar.

Pronto! 🙌

As novas cores já estão aplicadas em sua loja.

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.

Banners rotativos

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

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

Nesta seção, você pode configurar:

- Usar estas cores: para utilizar cores específicas, marque a opção usar estas cores.

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

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

- Adicionar efeito de movimento às imagens: habilita um efeito de zoom automático ao banner.

- Adicionar espaçamento em computadores: habilita um espaçamento entre o menu de categorias e o banner rotativo.

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

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

- 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.

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

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

Habilite a opção ''Carregar outras imagens para celulares'' para fazer o upload dos banners mobile.

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

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.

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.

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

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

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".

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.

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

Pronto! 🙌

Produtos em oferta

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

Nessa seção, você pode configurar:

- Título: define o título do carrossel de produtos.

- Subtítulo: define o subtítulo do carrossel de produtos.

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

Exibição em celulares

- Mostrar produtos como: você definir a exibição entre Carrossel ou Grade.

- Quantidade de produtos por linha: defina quantos produtos serão exibidos por linha no mobile.

Exibição em computadores

- Mostrar produtos como: você definir a exibição entre Carrossel ou Grade.

- Quantidade de produtos por linha: defina quantos produtos serão exibidos por linha no desktop.

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

- Exibir paginação: habilita a paginação abaixo do carrossel.

-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.

Escolhendo os produtos das vitrines:

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

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.

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:

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

Pronto! 🙌

Log de mudanças e versões

Acompanhe as atualizações do Tema

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

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

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)

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

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

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

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

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

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

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

Liberação da versão nativa do tema Flex, para contratação direta pelo site, sem a necessidade de instalação via FTP.

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

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

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

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"

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

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

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

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

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

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

Correções gerais

Modal
Menu
Módulo de idiomas
Banners de serviços

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)

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

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

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

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)

Flex Nuvemshop

Base de conhecimento TemaFlex

Por onde começar? 🤔 ​​ ​

Sobre o Flex

Manual e suporte

Contratação e recomendações

Lista de Funcionalidades

Calculadora de frete grátis (quanto falta?)

FTP - Edição via código

LOJA COM FTP ABERTO

Template Guide - Figma

Dúvidas Frequentes

Personalizar Layout

Tipo de Letra

Estilos de layout

Cores

Barra de anúncio

Logo

Barra de busca

Conta de Usuário

Menu de departamentos

Banner em destaque

Banners em grade

Mensagem de boas vindas

Mensagem institucional

Vídeo

Menu adicional

Newsletter

FAQ

Módulos de Imagem e Texto

Popup promocional

Página de categoria

Banner de topo

Filtros e paginação

Produtos na lista

Foto do produto

Nome do produto

Preço do produto

Minha Nuvemshop

FAQ

Módulos de Imagem e Texto

FTP - Edição via código

LOJA COM FTP ABERTO

Barra de busca

Conta de Usuário

Menu de departamentos

Logo

Cores

Contratação e recomendações

Manual e suporte

Template Guide - Figma

Lista de Funcionalidades

Calculadora de frete grátis (quanto falta?)

Banner em destaque

Banners em grade

Nome do produto

Mensagem de boas vindas

Foto do produto

Newsletter

Banner de topo

Popup promocional

Página de categoria

Produtos na lista

Base de conhecimento TemaFlex

Por onde começar? 🤔 ​​ ​

Tipo de Letra

Menu adicional

Barra de anúncio

Vídeo

Estilos de layout

Filtros e paginação

Dúvidas Frequentes

Mensagem institucional

Preço do produto

Conteúdos mais buscados

Ainda não encontrou o que procurava?

Cabeçalho

Produtos em promoção

Informações de frete, pagamento e compra

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

Por onde começar? 🤔

Por onde começar? 🤔