Elemento de campo personalizado do produto

O que é o elemento de campo personalizado do produto?

O processo de Elemento de campo personalizado do produto é uma ferramenta flexível que permite capturar detalhes adicionais dos clientes quando eles compram um produto. Dependendo das suas necessidades, você pode exibir diferentes tipos de campos, como caixas de texto, caixas de seleção, menus suspensos ou botões de opção, para coletar informações específicas.

Os exemplos incluem:

• Colecionando notas personalizadas ou gravando texto.
• Pedir instruções de entrega aos clientes.
• Oferecendo opções de personalização (cor, tamanho, embalagem).
• Captura de informações que não são cobertas pelas opções de produtos padrão da Shopify.

Todos os dados coletados por meio dos Campos Personalizados do Produto serão anexados ao pedido e exibidos em seu Administração do Shopify > Pedidos assim que o pedido for confirmado.

Como adicionar um campo personalizado de produto

Observação: Uma vez que o Campo personalizado do produto é um elemento filho do Módulo de produto, ele deve sempre ser colocado dentro de um módulo Produto para funcionar corretamente.

Siga esses passos:

Etapa 1: No Painel GemPages, selecione sua página para trabalhar e entre no Editor.

Etapa 2: Se você não tiver um Módulo de Produto, arraste e solte um na sua página.

Etapa 3: Arraste e solte o elemento do campo personalizado dentro do módulo Produto, no local de sua preferência.

Uma vez adicionado, clique no elemento para abri-lo Painel de configurações na barra lateral esquerda. Este painel contém duas abas: Configurações e Avançado:

Configurar a guia Configurações

1. Tipo

Escolha o estilo de entrada. Você pode escolher entre:

• Texto: Entrada de linha única para notas curtas.
• Área de texto: Caixa de várias linhas para comentários mais longos.
• E-mail: Campo de entrada formatado para endereços de e-mail.
• Caixa de seleção: Permite que os clientes selecionem várias opções.
• Botao de radio: Os clientes podem selecionar apenas uma opção de um grupo.
• Suspenso: Uma caixa de seleção compacta para opções de escolha única.
• oculto: Invisível para os clientes, mas ainda envia um valor predefinido com o pedido.

2. Fonte do produto

Exibe a qual produto o campo personalizado pertence. Para alterá-lo, abra o Selecionador de produtos no módulo Produto.

3. Gerenciamento de opções

Disponível em Caixa de seleção, rádio e menu suspenso tipos. Aqui, você pode:

• Adicione ou remova opções.
• Editar rótulos de opções.
• Reordene as opções para controlar a sequência de exibição.

4. Tamanho

(Não disponível para o tipo Oculto)

• Largura: Por padrão, os campos abrangem 100% do contêiner. Você pode alternar para Ajustar conteúdo (automático) se preferir.
• Altura: O padrão é automático. Ajuste se desejar um campo de entrada mais alto.
• Lacuna entre ícones e textos: Controla o espaçamento entre o ícone e o texto em layouts de caixa de seleção ou rádio.

5. Fundo

(Não disponível para o tipo Oculto)
Defina uma cor de fundo ou padrão para seu campo de entrada.

6. Forma

(Não disponível para o tipo Oculto)
Essas configurações controlam a forma geral e o estilo do campo de entrada:

• Fronteira: Ajuste a espessura da borda, o estilo (sólido, tracejado, pontilhado) e a cor.
• Canto: Defina o raio da borda.
• Sombra: Aplique sombras projetadas para adicionar profundidade e destacar o campo.

7. Estilo de texto de entrada

Disponível em Texto, Área de Texto e E-mail tipos. As opções incluem:

• Marcador de posição: Texto padrão exibido antes da entrada.
• Fonte: Escolha entre as fontes disponíveis ou aplique uma fonte personalizada.
• Tamanho, cor e peso: Ajuste a tipografia para facilitar a leitura e a identidade visual da marca.
• Altura da linha e espaçamento entre letras: Ajuste o espaçamento do texto.
• Transformação de texto: Converta texto em letras maiúsculas, minúsculas ou em caixa alta.

Para campos Caixa de seleção, Rádio e Lista suspensa, esta seção personaliza os rótulos das opções.

8. Rótulo

(Não disponível para o tipo Oculto)
Exiba ou oculte o rótulo do campo. Você pode personalizar:

• Texto de conteúdo.
• Fonte, tamanho, cor, peso.
• Espaçamento e transformação de texto.

9. Efeito Hover

Controle a aparência do campo quando o mouse estiver sobre ele:

• Cor de fundo.
• Cor do texto.
• Estilo de borda.
• Raio de canto.
• Sombras.

10. Efeito de foco

Personalize o estilo quando um campo estiver ativo ou selecionado:

• Fundo.
• Cor do texto.
• Fronteira.
• Raio de canto.
• Sombra

11. Configuração

• Nome do campo: Atribua um identificador para referência de backend.
• Exigido: Ative esta opção para impedir que os usuários ignorem essas informações.
• Apenas numero: Habilite esta opção para permitir exclusivamente entradas numéricas.
• Caracteres mínimos/máximos: Use o controle deslizante para ajustar os caracteres mínimos e máximos permitidos conforme desejado.

12. Mensagem de erro

Insira uma mensagem de erro personalizada para entradas inválidas ou campos obrigatórios ausentes.

13. Alinhar

Alinhe o campo à esquerda, ao centro ou à direita dentro do contêiner.

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.