Criar um destaque

Um bloco de destaques é uma grade de itens de recursos — cada um com imagem, título e descrição — que você coloca nas páginas de produto para mostrar benefícios e pontos fortes. O editor tem duas abas: Design (conteúdo e estilo) e Placement (onde e para quem ele aparece).

1. Abra a aba Highlights

   No admin da Shopify, abra o app Sami Product Labels, clique em Extra Features na barra lateral do app e depois mude para a aba Highlights.

   

   A aba Highlights lista todos os blocos de destaques que você criou.

2. Clique em Create highlights

   Clique em Create highlights. O editor em tela cheia abre na aba Design.

   Nota

   Role até Featured templates e clique em View all templates para começar com um bloco pronto, como Free Delivery, em vez de criar um do zero.

   

   Crie um destaque do zero ou comece com um modelo em destaque.

3. Dê um nome ao destaque

   O campo de nome fica acima da prévia. Substitua New Highlight por um nome de até 50 caracteres. Esse nome é interno — ele identifica o bloco na sua lista e não é exibido para quem compra.

4. Adicione um título e uma descrição

   Em Content & Badges, preencha Title e Description — o título e o texto de introdução de todo o bloco, por exemplo “Why Choose Us”. Os dois são editores de texto formatado com negrito, itálico, sublinhado, emoji, alinhamento e uma visualização em HTML (</>), e ambos são por idioma, então o rótulo mostra o idioma ativo, por exemplo Title (en).

   Os dois são opcionais; deixe-os vazios para exibir somente os itens.

   

   O título e a descrição do bloco são campos de texto formatado, editados por idioma.

5. Adicione itens de destaque

   Em Badges, clique em Add highlight e escolha:

   Opção	O que ela faz
   Select badge image	Abre o seletor de imagens para adicionar um ou mais itens.
   Line break	Insere uma quebra para que os itens seguintes comecem em uma nova linha.

   No seletor, a Library reúne mais de 1.800 imagens. Pesquise pelo nome ou restrinja a lista com os filtros Images, Free Labels, All colors e Latest (Clear os redefine). Clique nas imagens que quiser e depois em Select Image. Você também pode mudar a origem para Design your Images para usar as suas próprias ou clicar em Edit with AI para modificar a imagem selecionada.

   

   Filtre ou pesquise na biblioteca e escolha as imagens dos itens de destaque.

6. Escreva o título e a descrição de cada item

   Cada item aparece como uma linha na lista Badges. Clique no ícone de engrenagem da linha para abrir o painel dela, onde você pode definir:

   • Image — clique em Change para trocar por outra.
   • Title — o título curto desse recurso, por idioma.
   • Description — até 250 caracteres, por idioma.

   Use Delete no painel para remover o item e arraste a linha pela alça para reordenar a grade.

   

   Cada item tem sua própria imagem, título e descrição.

7. Defina a grade e o estilo do bloco

   Abra Design Main Section para controlar o bloco como um todo:

   Configuração	O que ela faz
   Alignment	Esquerda, centro ou direita.
   Column	Quantos itens aparecem por linha.
   Width	A largura do bloco, em % ou px.
   Background Heading Color	Fundo atrás do título e da descrição.
   Background Color	Fundo da área dos itens.
   Margin / Padding	Espaçamento externo e interno do bloco.
   Border & corners	Estilo e cor da borda e raio dos cantos.

   

   Design Main Section controla a grade e o contêiner do bloco.

8. Estilize os itens de destaque

   Abra Design Badge para estilizar os próprios itens:

   Configuração	O que ela faz
   Alignment	Como o conteúdo de cada item é alinhado.
   Style	Quatro estilos de imagem: monocromático, monocromático em cartão, cor original e cor original em cartão.
   Background Color	Fundo de cada item.
   Size	Width e Height da imagem, em px ou % (50 px por padrão).
   Positions	Onde a imagem fica em relação ao texto, por exemplo Image Position Top.
   Margin / Padding / Border & corners	Espaçamento e borda de cada item.
   Title / Description	Fonte, cor, tamanho e altura da linha do texto do item.

   

   Design Badge estiliza cada item de destaque.

9. Estilize o título do bloco (opcional)

   Abra Design title & description. Design Title e Design Description têm, cada um, fonte, cor, tamanho e altura de linha próprios para o título e o texto de introdução do bloco.

10. Defina tamanhos responsivos e CSS personalizado (opcional)

    • Responsive size — substitua o dimensionamento para tablet e celular.
    • Advance Section — adicione Custom CSS (Developer Zone). A CSS reference abaixo do editor lista os seletores que você pode usar, como .samita_highlight_container; clique em um para inseri-lo.

    

    A CSS reference lista os seletores disponíveis para estilização personalizada.

11. Escolha onde o destaque aparece

    Mude para a aba Placement:

    • Product page — ative para exibir o bloco na posição integrada do app em todas as páginas de produto.
    • Shortcode — copie o trecho e cole no tema para posicionar o bloco em um lugar exato.
    • Conditions — as condições Product, Customer, Page, Language e Country restringem quem vê o bloco e onde.

    Nota

    Veja Segmentar a exibição de destaques para entender como funcionam os conjuntos de condições.

    

    A aba Placement reúne as condições de exibição, a chave Product page e o shortcode.

12. Veja a prévia e salve

    Acima da prévia, você pode trocar o idioma, escolher qual página visualizar, alternar entre computador / celular e ocultar o produto de exemplo com o ícone de olho. Defina o bloco como Active ou Draft e clique em Save no canto superior direito. Use Discard para descartar as alterações não salvas.

Nota

O plano FREE inclui 2 destaques, e os excluídos continuam contando para esse limite. Faça upgrade para GOLD ou DIAMOND para ter destaques ilimitados.

Próximos passos

• Posicionar um destaque com shortcode — posicione o bloco em um local personalizado do tema.
• Segmentar a exibição de destaques — controle quais páginas e quem compra veem seus destaques.
• Visão geral dos destaques — o que são destaques e quando usá-los.
• Criar um selo de confiança — adicione ícones de pagamento e segurança às suas páginas de produto.

Dica

Precisa de ajuda?

Se tiver qualquer dificuldade ao seguir estas etapas, entre em contato pelo e-mail [email protected].