Como exibir o preço do produto e comparar o preço na mesma linha

Compreendendo o preço e a comparação de preços

No GemPages, o Preço do produto elemento mostra o preço de venda atual, enquanto o Comparar preço O elemento exibe o preço original ou superior antes do desconto. Quando usados ​​em conjunto, eles enfatizam a economia e incentivam as conversões.

Antes de configurá-los no GemPages, certifique-se de que seu produto tenha um preço e um preço de comparação no Shopify:

Passo 1: Entre no seu painel de administração do Shopify. Escolha o produto que deseja editar na lista ou adicione um novo produto.

Passo 2: Na seção Preço, insira o preço original no campo Comparar preço.

Insira o preço com desconto no campo Preço.

Passo 3: Clique em “Salvar” para aplicar suas atualizações.

Como exibir e comparar preços na mesma linha

Siga estas etapas para alinhar o Preço do produto e Comparar preço ordenadamente em uma única linha:

Passo 1: Abra a página do produto onde você deseja exibir os dois preços.

Passo 2: Arraste e solte uma linha de 2 colunas no módulo de produto.

Passo 3: Adicione o elemento Preço do Produto em uma coluna e o elemento Preço de Comparação na outra. Esses elementos serão sincronizados automaticamente com os dados de preço do seu produto.

Passo 4: Selecione a linha que contém ambos os elementos e defina-a como Ajustar ao conteúdo para alinhá-los corretamente.

Opções Adicionais de Personalização

Você pode personalizar ainda mais a forma como você exibir preço e comparar preço ajustando estilos como:

• Tipo e tamanho da fonte
• Peso e cor da fonte
• Alinhamento dentro da linha
• Espaçamento e altura da linha

Para obter mais detalhes, consulte o Guia de elementos de preço do produto.