Elemento de emblema do produto

Sobre o elemento Product Badge

O elemento Product Badge do GemPages foi criado para enfatizar detalhes importantes sobre um produto, como rotular uma novidade ou exibir uma promoção diretamente na imagem em destaque. 

Com este elemento, você pode obter múltiplas vantagens para sua loja de comércio eletrônico: 

• Visibilidade aprimorada: Aumente a visibilidade do produto destacando itens específicos, garantindo que eles capturem a atenção dos clientes.
• Aumento da confiança na marca: Aumente a credibilidade com emblemas como "Mais votado" or “Favorito do cliente”, exibindo avaliações e recomendações positivas para construir confiança com os compradores.
• Ação incentivada: Crie urgência com emblemas como “Só restam 2!” or “Terminando em breve,” incentivando os clientes a agir rapidamente e concluir suas compras.
• Estratégia de preços testada: Experimente e determine a estratégia de preços mais eficaz para cada item, oferecendo descontos diferentes para cada produto.
• Gerenciamento de estoque aprimorado: Venda itens de giro lento ou excedentes mais rapidamente, reduzindo custos de armazenamento e abrindo espaço para novos estoques com emblemas como “Liquidação de estoque” or “Redução de estoque”.
• Promoção direcionada: Defina descontos diferentes para várias categorias de produtos, níveis de estoque ou metas de vendas. Emblemas como “Venda de categoria”, “Promoção Sazonal”, or “Oferta semanal” facilitar a criação de promoções que atendam às necessidades do seu negócio.

Como adicionar o elemento de emblema do produto

Passo 1: Abra o editor GemPages e localize o Elemento de emblema do produto na barra de pesquisa.

Passo 2: Arraste o elemento da barra lateral e solte-o na sua área de design. Você só pode adicionar o Selo do Produto a um Elemento de produto, Elemento da lista de produtos, ou diretamente em seu Imagens de produtos. As configurações do emblema podem variar dependendo do seu posicionamento.

Passo 3: Você pode adicionar vários emblemas ao mesmo produto. Por padrão, os emblemas aparecem no canto superior esquerdo. Se vários emblemas forem adicionados, eles serão empilhados verticalmente. Para ajustar sua ordem ou visibilidade, use o Árvore de Camadas recurso.

Passo 4: Depois de colocar seus crachás, clique em Publicar para vê-los ao vivo. No editor, os emblemas estão sempre visíveis para facilitar os ajustes, mas só aparecem na página ao vivo se atenderem às condições de exibição definidas.

Para acessar as configurações do emblema, clique no elemento. O barra lateral esquerda mostrará duas abas: Configurações e Avançado:

Configurar a guia Configurações

1. estilo

Escolha o estilo de emblema que combina com o seu design. As opções disponíveis incluem:

• Imagem
• Texto Horizontal
• Canto do texto 1
• Fita de texto 1
• Canto do texto 2
• Fita de texto 2
• Texto Vertical
• Texto Estrela
• Quadrado de texto

2. Fonte do produto

O processo de Origem do produto mostra de qual produto o selo está exibindo informações. Para alterar o produto, clique Selecionador de produtos no módulo de produto e selecione o item desejado.

3. Texto

As configurações de texto estão disponíveis para estilos que exibem conteúdo de texto.

• Estilo de texto padrão: parágrafo 1
• Cor padrão: FFFFFF (branco)

No GemPages, a edição de conteúdo textual requer a abertura de um popover. Você pode:

• Insira um texto longo com quebras de linha.
• Uso Trechos de Markdown para exibir informações dinâmicas de produtos do Shopify.

Para usar markdowns:

• Digite manualmente um markdown usando o formato correto. Somente formatos válidos renderizam dados ativos.
• Clique na Ícone “+” dentro do campo de entrada para abrir uma lista de markdowns suportados.

• Selecione um markdown da lista para inseri-lo ou insira o mesmo markdown várias vezes.

Padrões de Markdown suportados:

• {%_desconto} – Mostra o desconto percentual.
• {valor_desconto} – Exibe o valor do desconto na moeda da sua loja.
• {tipo_de_produto} – Mostra o tipo de produto.
• {preço_min} – Exibe o menor preço entre todas as variantes do produto.
• {quantidade_de_estoque} – Exibe o estoque restante. Isso só funciona se Quantidade de trilhas está habilitado para o produto.

4. Estilo do emblema

Esta configuração permite ajustar a forma e o estilo visual do texto. Você pode personalizar:

• Fronteira
• Corner
• Shadow

5. Tamanho

Colocou o Largura, Altura e Acolchoamento do seu crachá para combinar com seu layout.

6. Posição

As configurações de posicionamento global se aplicam a todos os estilos de selos. Ao alternar os estilos, suas configurações de posicionamento são preservadas.

Configurações de lacuna:

• Dependendo da posição do emblema, você pode ajustar o espaçamento usando um Controle deslizante de lacuna.
• Somente valores inteiros são permitidos; valores negativos ou decimais não são suportados.

7. Estilo de imagem

Se o seu emblema usar uma imagem em vez de texto, você pode personalizar:

• Fronteira
• Corner
• Shadow

8. Condições de exibição

As condições de exibição controlam quando um emblema aparece na página ativa. As alternâncias entre estilos mantêm todos os valores definidos anteriormente.
Tipos de gatilho:
Você pode aplicar vários gatilhos clicando no ➕ íconeOs gatilhos disponíveis incluem:

• Estoque de Produto: Obrigatório e não pode ser removido. Exibido quando o estoque corresponde a uma quantidade especificada.
• Preço com desconto: Mostra quando o desconto atinge uma porcentagem ou valor definido.
• Faixa de preço: Mostra se o preço do produto está dentro de uma faixa específica.
• Tags do produto: Mostra se o produto possui as tags selecionadas.
• data criada: Mostra se o produto foi criado dentro de X dias, em uma data específica ou entre duas datas.

Condição especial: O inventário é o único gatilho ativo se:

• O produto é selecionado manualmente.
• Somente um produto é atribuído no modo dinâmico.
• A Lista de Produtos contém um único produto.

Clique dentro do campo de entrada do gatilho para abrir o popover e configurar definições detalhadas para cada gatilho.

Como exibir a porcentagem de desconto com o selo do produto

Passo 1: Selecione os Emblema do produto elemento que você adicionou à sua página.

Passo 2: Na barra lateral esquerda, abra o Configurações aba.

Passo 3: Vou ao Texto seção.

Passo 4: Clique dentro do campo de entrada de texto para abrir a janela pop-up.

Passo 5: Insira o {%_discount} Markdown por:

• Digitando manualmente, ou
• Clicando no "+" ícone e selecionando Desconto (%) da lista em Markdown.

Passo 6: Personalize o estilo, a cor e a tipografia do texto conforme necessário.

Passo 7: (Opcional) Ajuste o Estilo de emblema, Dimensões: e Posição para combinar com o seu design.

Passo 8: Clique Publicar para aplicar as mudanças.

Configurar a guia Avançado

Para uma personalização mais avançada, navegue até a guia Avançado e siga as instruções em Este artigo.