Carrossel e Grid Dinâmico (Feature Card)

Maior flexibilidade para criar destaques de marcas, coleções ou categorias.

Opção unificada e dinâmica para destacar marcas, categorias ou campanhas com imagem de fundo, ícone e texto rico, sem depender de desenvolvimento nativo a cada nova necessidade editorial. O objetivo é atender a diferentes necessidades de negócio, como exibir curadorias inspiradoras ("Momentos do seu dia") ou atalhos de parceiros ("Marcas em Destaque") utilizando apenas o CMS de forma independente.

Modos de Exibição

Essa funcionalidade possui dois modos de exibição:

Modo	Descrição
Grid Estático	Ajusta a proporção e o tamanho dos cards para preencher o espaço, suportando reorganização automática baseada na quantidade de itens desejados.
Carrossel	Quando os itens excedem o limite da tela em uma única linha, ele se transforma em um carrossel. O tamanho do card é calculado de forma dinâmica, mas também é possível definir a altura dos componentes.

Os modos são alternados de forma automática conforme a quantidade de itens cadastrados.

Disponível a partir da versão 13.199.0 de todos os aplicativos.

Caso o seu esteja em uma versão inferior, solicite atualização ao nosso time de suporte a partir do nosso portal.

Como Configurar

O Carrossel e Grid Dinâmico pode ser ativado para as seguintes telas:

Home
Landing Page
Todas as telas que o Content Container pode ser usado (ex: PDP, Carrinho, Menu de Categorias, etc).

As configurações específicas do componente são as mesmas em todas as telas:

Acesse o painel administrativo da VTEX e entre no espaço do aplicativo.
Na aba "Headless CMS", pesquise pelo componente "Content Container" (ou "Home", ou "Landing Page").
Abra o componente e adicione uma seção "Coleção | Feature Card".
Preencha os campos conforme as instruções abaixo:

Campo	Descrição
Ativo	Define se o card está ativo.
Margem Horizontal/Vertical	Define a distância horizontal/vertical entre os itens cadastrados e a borda da tela em pixels.
Espaçamento entre os itens	Define a distância entre um item e outro em pixels.
Direção	Se "vertical", exibe grid estático com colunas. Se "horizontal", exibe grid estático em linhas ou carrossel.
Quantidade de coluna ou linha	Define em quantas colunas (se direção = vertical) ou linhas (se direção = horizontal) o app deve dividir os itens cadastrados.
Altura dos itens	Define a altura dos itens exibidos em pixels.

Adicione um novo "Item" (Feature Card) e preencha os campos conforme as instruções abaixo:

Campo	Descrição
Título	Identificação interna do card (não exibido na tela).
Ativo	Define se o card está ativo.
Conteúdo	Texto exibido no card com formatação livre (título, subtítulo, quebras).
Ícone	Ícone de suporte apresentado no card.
Imagem de fundo	Imagem principal de fundo do card.
Cor do texto	Define a cor do texto sobre a imagem (usar código hexadecimal).
Destino	Preencher conforme costume, mantém-se os mesmos direcionamentos já conhecidos (Categoria, Coleção, Landing Page, Link, etc).

Exemplo de configuração:

Lembre-se de salvar e publicar todas as alterações feitas no CMS.

Preencha o código hexadecimal do campo Cor do texto sempre com exatos 7 caracteres, começando por "#".

Exemplos Visuais

Lista (2 itens)	Grid (2 itens)	Grid (4 itens)	Carrossel

Precisa de Ajuda?

Se a funcionalidade não está refletindo corretamente, verifique, antes de abrir um chamado, se preencheu as configurações de acordo com o exemplo. O preenchimento de campos amais ou amenos pode resultar em erros.

Se o seu CMS não possuir o componente "Coleção | Feature Card" dentro da Home, Landing Page e Content Container, solicite ao nosso time essa atualização.