Elemento de Variantes e Amostras de Produtos

Sobre o elemento de variantes e amostras de produtos

Ao contrário da versão anterior do Editor, Editor v7 apresenta um único elemento chamado (P) Variantes e Amostras para exibir várias opções de um produto, como tamanho, cor, materiais, etc., para aumentar sua taxa de conversão.

No GemPages V7, o Variantes e amostras de produtos O elemento permite que você exiba todas as opções de variantes do produto em uma interface única e personalizável, desde menus suspensos até amostras de cores e miniaturas de imagens.

Casos de uso comuns:

• Deixe os clientes escolherem tamanho, cor ou material
• Mostrar status esgotado visualmente
• Use imagens variantes ou carregue visuais de amostra personalizados

Como adicionar variantes de produtos no Shopify

Antes de exibir as variantes no Elemento de variantes e amostras de produtosPrimeiro, você precisa criar essas variantes nas configurações do seu produto no Shopify.

Siga estes passos para adicionar variantes de produtos no Shopify:

Passo 1: No seu administrador do Shopify, vá para Produtos.

Passo 2: Clique no produto onde deseja adicionar variantes.

Passo 3: Desloque-se para o Variantes seção e clique + Adicione opções como tamanho ou cor.

Passo 4: Introduzir o nome da opção (por exemplo: Tamanho, Cor, Material).

Passo 5: Adicionar o valores de opção.

Exemplo:

• Tamanho: S, M, L, XL
• Cores: Vermelho, Preto, Verde

Passo 6: Clique Pronto Então, o Shopify irá gerar automaticamente todas as combinações de variantes.

Passo 7: Configure detalhes adicionais da variante, tais como:

• Preço
• SKU
• Estoque
• Imagem variante
• Disponibilidade

Passo 8: Clique Economize.

Assim que as variantes forem criadas, elas aparecerão automaticamente dentro do Elemento "Variantes e Amostras de Produtos" no GemPages, permitindo que os clientes selecionem diferentes opções de produto na sua página de produto.

Como adicionar um elemento de variantes e amostras de produtos à sua página?

Siga estas etapas para adicionar uma variante de produto e amostras à sua página criada com o GemPages.

Passo 1: No seu administrador do Shopify, vá para Construtor GemPages app> PÁGINAS. Clique na página de destino para localizar o editor.

Passo 2: Na barra lateral esquerda, use a barra de pesquisa para localizar as variantes do produto e Elementos de amostrasEm seguida, arraste e solte o elemento dentro de um Elemento de Produto.

Passo 3: Clique no elemento para abrir sua configuração.

Configurar a guia Configurações

A partir daqui, você pode configurar as configurações do elemento, incluindo:

Fonte do produto

Se você atribuiu um produto a este modelo, este produto será sincronizado automaticamente como o Fonte do produto.

Caso queira selecionar outro produto, passe o cursor sobre o produto atual e clique em seta direita Para localizar as configurações do Elemento do Produto, onde você pode escolher a sua preferida.

Clique na caneta Ícone para editar a origem do produto. A partir daqui, você pode selecionar manualmente o produto desejado.

Formato

Você pode selecionar entre duas opções neste momento:

• Combinado: Todas as variantes serão consolidadas em um único menu suspenso.

• Separado: As variantes serão organizadas em categorias distintas.

Várias configurações a seguir serão ajustadas de acordo com o tipo que você selecionar aqui.

• Se você definir o Formato para Combinado, clique em aqui. para mais orientações.
• Se você definir o Formato para Separado, clique em aqui. para instruções detalhadas.

#1. Tipo: Combinado

Se você definir o Formato para CombinadoContinue configurando como as opções de variantes serão exibidas para o seu produto.

Estilo de texto

O processo de Estilo de Texto Esta seção permite controlar a aparência do texto das variantes do produto, ajudando a manter tudo consistente com o design da sua marca.

• Estilos: Escolha um estilo de texto predefinido, como Título ou Parágrafo, para manter a tipografia consistente com o restante da sua loja.
• Fonte: Selecione uma fonte no menu suspenso ou use uma personalizada em Estilos Globais. Mantenha a mesma família de fontes usada nas páginas de seus produtos para uma aparência uniforme.
• Tamanho Ajuste o tamanho da fonte para que os nomes das variantes e os preços se destaquem claramente no layout.
• Cor: Selecione uma cor de texto no seletor de cores ou insira um código HEX (por exemplo, #3B3B3BUse um tom escuro para melhor legibilidade.
• Alinhar: Alinhe o texto à esquerda, ao centro ou à direita, dependendo da sua preferência de layout. O alinhamento à esquerda funciona melhor para listas de variantes.
• Espessura da fonte: Controle a intensidade da fonte do texto — de Leve a Extra Negrito. Para variantes de produtos, Médio ou Negrito costumam ser as opções ideais.
• Altura da linha: Ajuste o espaçamento vertical entre as linhas de texto (por exemplo, 150%) para tornar o texto com várias linhas mais legível.
• Espaçamento entre letras: Ajuste o espaço entre as letras para um visual mais compacto ou mais aberto.
• Transformar: Altere o formato do texto para maiúsculas, minúsculas ou capitalize cada palavra. Ideal para nomes de variantes de SKU ou etiquetas.
• Sombra: Adicione uma sombra sutil ao texto para aumentar o contraste ou dar profundidade quando ele estiver sobreposto a fundos claros.

Estilo de opção

O processo de Estilo de opção Esta seção permite personalizar a aparência do seletor de variantes do produto, incluindo tamanho, plano de fundo e visual geral.

• Largura: Ajuste a largura da caixa de opções. Você pode definir um valor fixo em pixels ou usar uma porcentagem (por exemplo, 100%) para que se estenda por todo o recipiente.
• Altura: Defina o tamanho vertical do seletor de variantes (por exemplo, 45px) para um melhor equilíbrio visual com outros elementos na página do produto.
• Fundo: Escolha uma cor de fundo para a caixa de opções. Use tons sólidos (como preto ou branco) ou a cor de destaque da sua marca para um contraste mais forte.
• Fronteira: Adicione ou remova uma borda ao redor do seletor. Você pode escolher entre os estilos linha, tracejado ou pontilhado e ajustar a cor para combinar com seu layout.
• Canto: Arredonde as bordas da sua caixa de opções definindo valores de raio de canto (por exemplo, 18pxIsso cria uma aparência mais suave e moderna.
• Sombra: Adicione profundidade sutil aplicando efeitos de sombra atrás da caixa. Ideal para destacar o estado ativo ou quando o cursor está sobre o elemento.

Efeito pairar

O processo de pairar Efeito Esta seção permite definir como a opção de variante reage quando os compradores passam o cursor do mouse sobre ela.

• Fundo: Altere a cor de fundo que aparece quando o usuário passa o cursor sobre a variante. Use a cor de destaque da sua marca (por exemplo, #EC6448) para dar destaque.
• Cor do texto: Defina a cor do texto ao passar o cursor. Uma cor clara como branco (#FFFFFF) funciona melhor em fundos escuros ou fortes.
• Fronteira: Personalize o estilo da borda (linha, tracejada, pontilhada) para tornar o efeito de foco mais visível. Você também pode ajustar a cor da borda para combinar com o fundo.
• Canto: Mantenha ou aumente o arredondamento dos cantos para uma transição visual mais suave ao posicionar o cursor sobre eles.
• Sombra: Adicione um efeito de sombra sutil para dar a impressão de que a opção ao passar o cursor está em relevo ou interativa. Ideal para aprimorar a resposta tátil ao clique.

#2. Tipo: Separado

Se você definir o Formato para SeparadoContinue configurando como as opções de variantes serão exibidas para o seu produto.

Lacuna de opções

Ajuste o espaçamento entre as variantes inserindo um número exato na caixa ou arrastando o controle deslizante.

Título da opção

Sob o Título da opção Na seção, selecione a posição do título. Você pode escolher entre duas opções: vertical e horizontal.

• Posição vertical:

• Posição horizontal:

Em seguida, ajuste o espaço entre o título da variante e a opção de texto para melhor legibilidade. Por exemplo, definimos o Espaço de 40 px.

Em seguida, clique na caixa ao lado de Estilo de texto Para abrir o painel de configuração de estilo de texto, você pode modificar os estilos, a fonte, o tamanho do texto, a cor do texto e o espaçamento entre letras, ou adicionar um efeito de sombra ao título da variante.

Uma vez feito com o Título da opção (Título da variante), você pode configurar cada opção de variante nas seções a seguir.

Por exemplo, como temos três variantes para esta Paleta de Gemas, podemos modificar a visibilidade de cada uma na seguinte ordem: Cor, Acabamento/Textura e Dimensões:.

Opção: Cor

Nesta seção, você pode configurar todas as opções de cores deste elemento.

Vamos analisar cada opção de configuração:

• Estilo: Escolha entre estas opções disponíveis, incluindo Suspenso, Seleção de botões, Imagem do Shopify, Amostra de cor, ou Carregar imagem.

Por exemplo, se você selecionar Estilo = Amostra de cor, clique em Editar cor para abrir o Configurar estilo de variantes painel para mais configurações.

Se você quiser fazer upload de novas imagens para cada opção de cor, selecione Estilo = Carregar imagem.

Observe que apenas uma imagem é exibida para cada opção. Caso prefira adicionar mais imagens, você precisará adicionar o mesmo número de opções de variantes no Shopify.

• Largura e altura: Ajuste a largura e a altura da opção de cor.
• Lacuna de valor: Altere o espaçamento entre cada opção.

• Fronteira: Adicione a borda para opções de cor e altere a cor, a espessura e o traço da borda como preferir.

• Canto: Ajuste o raio do canto. Por exemplo, se quiser exibir opções de cores arredondadas, defina o raio como 999999.
• Sombra: Para melhorar a interface do usuário, você pode adicionar um efeito de sombra para as opções de cor.

• Flutuar: Clique na Sessão de Fotos caixa ao lado do Pairar para abrir suas configurações, onde você pode modificar o efeito de foco.
• Ativo: Personalize a opção de cor ativa para torná-la diferente das outras.

Texto do valor da opção

Nesta seção, você pode editar o valor do texto para opções de cores de estilos, fonte, tamanho, espessura da fonte, altura da linha, espaçamento entre letras e transformação.

Estilo esgotado

Escolha o estilo visual quando uma opção de cor estiver esgotada:

• Nenhum: Nenhum sinal para opção de cor esgotada.
• Não clicável: Os visitantes não podem clicar na opção de cor esgotada.
• Risque: A opção de cor esgotada será riscada.

Por exemplo, definimos o Formato para Não clicável:

Dimensões:

Use o Dimensões: seção para controlar a largura do seletor de variantes ou da área de amostras.

Largura: Ajuste a largura do elemento usando um valor de pixel fixo (por exemplo, 500px) ou uma porcentagem (100%) dependendo do seu layout.

• Larguras maiores criam um menu suspenso de linha inteira.
• Larguras menores são ideais para listas de variantes compactas.

Shape

O processo de Shape A seção permite estilizar a aparência do seu contêiner de variantes, incluindo bordas e cantos.

• Fronteira: Adicione ou ajuste o estilo da borda (Linha, Tracejada, Pontilhada) para contornar o seletor de variantes.
• Canto: Arredonde as bordas da caixa (por exemplo, 18px) para um visual moderno e elegante.
• Sombra: Adicione profundidade com sombras sutis para separar as caixas variantes do fundo. Escolha entre Claro, Médio, or Forte dependendo do contraste desejado.

Opção de exibição

O processo de Opção de exibição Controla como as variantes do seu produto aparecem quando a página carrega ou como as variantes padrão são selecionadas.

Variante padrão: Alterne Sim Exibir uma opção pré-selecionada (por exemplo, “Verde / Adulto”) quando a página do produto for carregada pela primeira vez.

Para personalizar a opção padrão, você precisa alterar a Origem do Produto no Elemento do Produto para “Escolha Manualmente"Em vez de"Atribuído". Saiba Mais.

Alinhar

O processo de Alinhar Esta seção permite controlar o posicionamento das opções de variantes dentro do contêiner, ajudando a ajustar o layout geral da página. Você pode selecionar entre três opções: Alinhado à esquerda, ao centro ou à direita, conforme preferir.

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.

Solução de problemas de variantes de cores

Se uma das suas amostras de cores não estiver funcionando corretamente no GemPages, aqui estão algumas etapas para solucionar o problema:

Configuração de variantes no Shopify

Certifique-se de que suas variantes de produto estejam configuradas corretamente no Shopify:

• Status ativo: Verifique se o produto e suas variantes estão ativos e disponíveis na sua loja online.
• Canal de Vendas: Confirme se o canal de vendas “Loja Online” está selecionado para o produto.
• Configuração de variantes: Verifique se cada variante tem uma combinação única de opções, como cor e tamanho.

Examinar as configurações do módulo de produto

• No Editor GemPages, clique em Módulo de Produto.
• Sob o Selecione o Produto seção, certifique-se de que o produto correto seja atribuído.

Perguntas frequentes

1. Posso exibir cada variante de produto como uma página de produto separada?

Por padrão, o Shopify não oferece suporte à exibição de variantes como páginas de produtos separadas.

No entanto, uma solução alternativa comum é criar produtos separados para cada variante, e então vincule-os manualmente como um “grupo de variantes” usando metacampos ou uma seção personalizada.

2. Qual é a diferença entre variantes e produtos separados?

As variantes compartilham a mesma página de produto e usam amostras/menus suspensos para alternar entre opções (por exemplo, tamanhos, cores).

Produtos individuais têm páginas e URLs exclusivas. Isso costuma ser usado quando cada variação tem fotos, preços ou descrições muito diferentes.

3. Como posso vincular páginas de produtos separadas como variantes?

Você pode usar:

• Link manual em descrições de produtos ou blocos personalizados (por exemplo, “Também disponível em…”)
• Aplicativos de recomendação de produtos
• Seções de líquido personalizadas ou metacampos (requer algum conhecimento do Shopify)

4. Como faço para ativar o zoom ao passar o cursor sobre a imagem de uma variante?

O zoom é controlado no Elemento de imagens do produto, não nas amostras de variantes.
Para habilitá-lo:

• Clique na Imagens de produtos elemento no editor.
• Debaixo Imagem em destaque > Ação ao passar o cursor, escolha Zoom.
• Ajuste o tipo e o valor do zoom conforme necessário.

5. Por que o zoom não é acionado quando passo o cursor sobre uma amostra de cor?

Apenas amostras variantes Alterar a imagem do produto selecionadoEles não controlam o comportamento do zoom.
Para ativar o efeito de zoom, configure-o em Imagens de produtos > Ação de pairar, não dentro das configurações do elemento de amostra.

6. Como faço para editar o preço das variantes de um produto no Shopify?

Você pode atualizar os preços das variantes diretamente no seu painel de administração do Shopify. Acesse Produtos, selecione o produto com variantes e, em seguida, no Variantes atualização da seção Preços campo para a variante e clique EconomizeO novo preço aparecerá automaticamente na página do seu produto, incluindo páginas criadas com o GemPages.