Elemento de contador de estoque

Sobre o elemento Contador de Estoque no GemPages

O processo de Elemento Contador de Estoque foi projetado para exibir o estoque restante do seu produto com uma barra de progresso, ícone ou texto. Funciona com o Shopify sistema de gerenciamento de inventário e pode ser personalizado para se adequar à marca da sua loja.

Por que usar o Stock Counter?

• Crie urgência mostrando estoque limitado.
• Crie confiança com transparência status do inventário.
• Dê suporte a campanhas de vendas editando mensagens de estoque (por exemplo, “Restam apenas 5 em estoque!”).

Como adicionar um elemento de contador de estoque à sua página?

Para que funcione corretamente, certifique-se de colocar o Contador de Estoque dentro do Módulo de Produto na sua página. Siga estes passos para adicionar um à sua página.

Passo 1: Acesso a Painel GemPages > PÁGINASe localize a página de destino para abrir o editor.

Passo 2: Na barra lateral esquerda, procure por Balcão de estoque elemento e arraste e solte um dentro do Módulo de produto.

As configurações do elemento estarão disponíveis na barra lateral esquerda, o que abordaremos nas próximas seções.

Configurar a guia Configurações

traçado

Selecione o layout do elemento Contador de estoque entre estas opções:

• Completo: O elemento conterá um ícone, texto e uma barra de progresso.
• Texto e barra de progresso
• Ícone e texto
• Somente texto
• Somente barra de progresso

Fonte do produto

Clique no produto para gerenciá-lo no elemento Produto.

Barra de progresso

Como o layout está completo, o Barra de progresso será ativado automaticamente. Ajuste a barra de progresso como preferir:

• Porcentagem restante: Ajuste a porcentagem de estoque restante. Por exemplo, definir 20% significa que a barra será exibida como quase vazia, sinalizando escassez.
• Cor: Altere a cor da barra de progresso para combinar com a identidade visual da sua loja. Use o seletor de cores ou insira um código HEX.
• Efeito: Habilitar ou desabilitar animação para a barra de progresso.
  • Sim: A barra é preenchida com uma animação suave.
  • Não: A barra parece estática.
• Altura: Defina a espessura da barra de progresso (em pixels). Um número maior cria uma barra mais espessa.
• Posição: Escolha onde a barra de progresso será exibida em relação ao texto:
  • Cima: A barra aparece acima do texto do estoque.
  • Baixo: A barra aparece abaixo do texto do estoque.
• Canto: Ajuste o raio do canto para dar estilo à barra de progresso, como nítida, redonda ou em formato de pílula.

ícone

Personalize o ícone exibido no elemento Contador de estoque.

• Ícone: Escolha entre os ícones disponíveis no GemPages ou carregue os seus próprios (somente arquivos SVG são aceitos).
• Tamanho Ajuste o tamanho do ícone (em pixels). Ícones maiores chamam mais atenção, enquanto os menores mantêm o design discreto. 
• Cor: Defina a cor do ícone para alinhá-la à identidade visual da sua loja. Insira um código HEX ou use o seletor de cores.
• Posição: Decida onde o ícone deve ser exibido:
  • Esquerda: O ícone aparece antes do texto.
  • Direita: O ícone aparece depois do texto.

Dimensões:

A configuração Tamanho permite que você defina a largura do componente Contador de estoque na sua página.

Largura: Defina quanto espaço horizontal o Contador de Estoque ocupará:

• Digite um percentagem valor (por exemplo, 50%) para fazer o contador se ajustar à largura do contêiner.
• Digite um pixels valor (por exemplo, 300px) para definir uma largura fixa.

Valores menores mantêm o contador compacto, útil para barras laterais ou layouts mais compactos.

Texto

Sob o Texto seção, modifique o texto do botão como preferir:

• Conteúdo: Por padrão, é definido como “Restam apenas %número%”. Mude-o como sua maneira de incentivar os clientes a agirem.
• Estilos: Escolha o estilo de texto de Título 1-6 or Parágrafo 1-3 como o estilo global. 
• fonte: Selecione um estilo de fonte que corresponda à identidade da sua marca.
• Dimensões:: Ajuste o tamanho da fonte para deixar o texto em destaque.
• Cor: Escolha uma cor que complemente seu design.
• Peso da fonte: Controle a espessura do texto.
• Altura da linha: Ajuste o espaço entre as linhas para melhor legibilidade.
• Espaçamento entre Letras: Crie uma aparência mais moderna ou compacta alterando o espaço entre as letras.
• Transformam: Converta o texto para maiúsculas, minúsculas ou coloque a primeira letra de cada palavra em maiúscula.
• Sombra: Aplique efeitos de sombra projetada para aumentar a profundidade visual. 

Estado fora de estoque

Essas configurações controlam o que acontece quando o produto fica sem estoque.

• Ação: Escolha o que o contador deve fazer:
  • Mostrar mensagem: Exibir uma mensagem personalizada de falta de estoque.
  • Ocultar elemento: O contador de estoque ficará oculto na página.
• Ícone: Selecione um ícone para exibir com a mensagem de fora de estoque (por exemplo, pacote, aviso, cruz).
• Conteúdo: Edite o texto da mensagem (padrão: “FORA DE ESTOQUE”).
• Cor do ícone: Ajuste a cor do ícone de fora de estoque.
• Cor do texto: Ajuste a cor do texto "fora de estoque".

Mensagem

Personalize mensagens com base nas condições do estoque:

• Vender quando OOS (Fora de estoque): Adicione uma mensagem incentivando os clientes a esperar ou fazer a pré-encomenda (por exemplo, “Reabastecimento em breve! Fique ligado.”).
• Estoque ilimitado: Defina uma mensagem quando o estoque não estiver limitado (por exemplo, “Corra! DEIXE OS COMPRADORES ENTRAREM CORRENDO”).

Opção de exibição

Controle quando o Contador de Estoque deve aparecer:

• Mostrar sempre: Exibir o contador o tempo todo.
• Mostrar se estiver abaixo: Exibir o contador somente se o estoque restante estiver abaixo de um limite especificado.

Alinhar

Defina o alinhamento do Contador de Estoque dentro de seu contêiner para esquerda, centro, ou certo.

Configurar a guia Avançado

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

Perguntas Frequentes

1. Posso usar o Contador de Estoque fora do Módulo de Produto?

Não, o elemento deve ser colocado dentro do Módulo de Produto para extrair dados de inventário corretamente.

2. O Stock Counter sincroniza com o inventário do Shopify?

Sim. Ele reflete o estoque gerenciado no sistema de gerenciamento de estoque da Shopify.