Elemento de preço do produto

Sobre o elemento Preço do produto

In Editor GemPages 7.0, o elemento Preço do Produto combina dois elementos separados: Preço e Comparar preço. O Elemento de preço mostra o preço normal de um produto, enquanto o Elemento Comparar Preço Exibe o preço original ou com desconto, caso haja uma promoção. Exibir os dois preços simultaneamente torna sua oferta mais atraente e é um método comprovado para aumentar as conversões.

Como adicionar o elemento Preço do produto?

De Painel do GemPages, abra seu modelo preferido para acessar o Editor. Você pode encontrar rapidamente esses dois elementos na barra lateral esquerda, sob a política Produto seção.

Como um elemento filho, o elemento Preço e Comparar Preço deve estar localizado em um Módulo de Produto para funcionar corretamente. 

O GemPages permite que você altere o formato de preço para exibir o sufixo da moeda. Para usar esse formato, acesse Painel de controle do GemPages → Preferências e habilitar Mostrar preço com a moeda.

Após habilitá-lo, você precisa forçar publicação As páginas que contêm o elemento Preço ou Comparar Preços devem ter o formato atualizado aplicado às páginas publicadas.

Como exibir o preço de comparação próximo ao preço normal

Normalmente, o Preço Comparado é colocado ao lado do Preço Normal para destacar descontos e incentivar compras. Siga estes passos para configurá-lo:

Etapa 1: definir preço de venda e comparar preço no Shopify

Antes de exibir o Preço Comparativo no GemPages, certifique-se de ter configurado o preço normal e o preço de venda do seu produto no Shopify. Você pode seguir Diretrizes da Shopify para configurá-los corretamente.

Etapa 2: adicionar um elemento de linha

No Editor GemPages, arraste e solte o Elemento de linha no local da sua página onde você deseja que os preços apareçam. Selecione um Layout de 2 colunas E definir Largura da coluna para Ajustar ao conteúdo. Isso permite que as colunas se ajustem automaticamente ao conteúdo interno.

Etapa 3: inserir elementos de preço nas colunas

Coloque a Elemento de preço em uma coluna e a Elemento Comparar Preço na outra coluna. Ajuste o alinhamento, o espaçamento ou o estilo conforme necessário para se adequar ao seu design preferido.

Configurar a guia Configurações

Os elementos Preço e Comparar Preço compartilham opções de configuração quase idênticas, exceto pela configuração de linha direta que se aplica ao Comparar Preço.

Fonte do produto

Esta configuração determina de qual produto o elemento exibe informações de preço. Por padrão, ele usa o produto atribuído no Módulo de Produto. Você pode alterar o produto abrindo o Selecionador de produtos nas configurações do Módulo de Produto.

Estilos de texto

Neste ponto, você tem a capacidade de ajustar a tipografia do texto. Aqui estão as opções disponíveis:

1. Estilos: Selecione o estilo desejado entre as opções predefinidas, que incluem 6 estilos de título e 3 estilos de parágrafo.

2. Fonte: Escolha a fonte que você deseja usar para o texto dentro deste bloco de texto. Se você quiser usar uma fonte que não esteja listada, você pode consultar a orientação fornecida em como adicionar uma fonte personalizada no Editor v7.

3. Tamanho: Ajuste o tamanho da fonte especificando um valor em pixels.

4. Cor: Escolha uma cor para o texto.

5. Alinhar: Determine como o texto será posicionado na sua página. Há quatro opções para escolher: alinhado à esquerda, centralizado, alinhado à direita e justificado.

Clique no Mostre mais botão para revelar mais opções de personalização. 

6. Espessura da fonte: Escolha a espessura de fonte desejada no menu suspenso fornecido.

7. Altura da linha: Ajuste a altura do texto especificando um valor percentual.

8. Espaçamento entre letras: Modifique o espaçamento entre as letras inserindo um valor em pixels.

9. Transformar: Transforme o texto de uma das seguintes maneiras: 

• Nenhuma transformação aplicada.
• Maiúsculas: Converte todo o texto para letras maiúsculas.
• Minúsculas: Converta todo o texto para letras minúsculas.
• Capitalizar: Coloque a primeira letra de cada palavra em maiúscula.

10. Sombra:

Você pode adicionar sombras de texto para mais profundidade visual:

• direção: Especifique o ângulo da sombra.
• Cor: Escolha a cor da sombra.
• Distância: Defina a distância em que a sombra aparecerá do texto.
• Borrão: Ajuste a suavidade das bordas da sombra.

Linha através

Esta configuração é exclusiva para comparar preços. Basta ativá-la para habilitar a linha de preço. 

• Cor: Escolha sua cor de linha preferida na paleta ou insira o código de cor hexadecimal.
• Espessura: Ajuste a espessura usando o controle deslizante ou inserindo um número específico na caixa. 

Configurar a guia Avançado

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

Como tornar o elemento de preço do produto fixo

Você pode tornar o elemento Preço do Produto fixo para que permaneça visível enquanto os clientes rolam a página. Isso é útil para manter as informações de preço sempre acessíveis, especialmente em páginas de produtos longas.

Siga estes passos para definir o elemento Preço do Produto como fixo:

Passo 1: Selecione o elemento Preço do Produto

No Editor GemPages, clique em Elemento Preço do Produto que você quer tornar pegajoso.

Passo 2: Abra as Configurações Avançadas

Uma vez selecionado, vá para o Avançado aba no painel de configurações à esquerda.

Etapa 3: defina a posição como fixa

Desloque-se para o Posição seção. Alterar o Posição configuração para Pegajoso.

Solução de problemas: preços exibidos incorretamente

1. Garanta o posicionamento correto do elemento de preço

• Abra sua página no Editor GemPages.
• Certifique-se de que o Elemento Preço esteja colocado dentro de um Módulo Produto.
• Caso contrário, arraste um Módulo de Produto para a página e aninhe o Elemento de Preço dentro dele.

2. Verifique a atribuição do produto no módulo de produto

• Selecione o Módulo de Produto no Editor GemPages.
• No painel de configurações, certifique-se de que o produto correto esteja atribuído.
• Você pode escolher exibir pelo produto atribuído ou selecionar um produto específico manualmente.

3. Confirme o status e a disponibilidade do produto no Shopify

• Acesse o Admin do Shopify > Produtos.
• Selecione o produto em questão.
• Certifique-se de que o status do produto esteja definido como “Ativo”.
• Em “Canais de vendas e aplicativos”, confirme se “Loja online” está selecionado.

4. Atualize o preço do produto e o formato da moeda no Shopify