Como adicionar uma descrição personalizada no topo de um departamento ou coleção?

Como adicionar uma descrição personalizada no topo de um departamento ou coleção
​

O que é

Essa funcionalidade permite exibir uma mensagem, descrição ou até mesmo um conteúdo em HTML no topo da página de um departamento ou coleção. É útil para destacar informações importantes, descritivas ou promocionais para os clientes.

Passo a passo

​Acesse o Admin > Navegue até Catálogo > Selecione o departamento ou coleção desejada

Clique em Alterar / Editar no item em que deseja adicionar a descrição.

Adicionar um banner em branco para ativar

Baixar banner em Branco

Localize o campo “Descrição”

Na tela de edição, procure pelo campo Descrição.

Esse campo aceita tanto texto como também HTML, então você pode personalizar a exibição do conteúdo (textos formatados, listas, títulos, botões, etc.).

Adicionar o código HTML desejado

Insira seu conteúdo ou código personalizado no campo.

Você pode usar desde uma simples frase até blocos mais elaborados com CSS e JavaScript.

Exemplo prático

Um exemplo simples:
​

<div style="padding: 10px; background: #f5f5f5; border-radius: 5px;">

<h3>Bem-vindo ao nosso departamento!</h3>

<p>Aqui você encontra os melhores produtos com qualidade e preço justo.</p>

</div>

Um exemplo mais avançado (com botão de ver mais/menos):

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

<style>

.custom-box { font-family: 'Roboto', sans-serif; padding: 1rem; background: #f9f9f9; border-radius: 5px; color: #333; }

.custom-box h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }

.custom-box .more { display: none; margin-top: .5rem; }

.custom-box.open .more { display: block; }

.toggle-btn { margin-top: 1rem; padding: .5rem 1rem; background: #006CB5; color: #fff; border: none; border-radius: 5px; cursor: pointer; }

</style>

<div class="custom-box" id="descBox">

<h4>Descubra nossa linha de produtos</h4>

<p>Aqui você encontra variedade e qualidade para todos os ambientes.</p>

<div class="more">

<p>Trabalhamos com as melhores marcas do mercado e oferecemos soluções que unem durabilidade e design.</p>

</div>

<button class="toggle-btn" onclick="document.getElementById('descBox').classList.toggle('open')">Ver mais</button>

</div>

Como validar

Observações