Sobre o recurso “Exibir imagem do produto pela variante selecionada”
Essa funcionalidade permite controlar quais imagens do produto aparecem quando um cliente seleciona uma variante específica.
Quando ativada, a GemPages exibe automaticamente apenas as imagens relevantes para a variante escolhida, combinando o nome da variante com o texto alternativo da imagem.
Você pode aplicar essa configuração a ambos. Elementos do produto e Elementos da lista de produtos.
Como o recurso funciona
Quando um visitante seleciona uma variante de produto, o GemPages fará o seguinte:
- Compare o nome da variante com o texto alternativo de cada imagem no seu produto Shopify.
- Exibir somente as imagens que incluem o nome da variante em seu texto alternativo.
- Ocultar automaticamente imagens irrelevantes.
Você também pode marcar determinadas imagens para que apareçam em todas as variantes adicionando a palavra-chave “todas-as-variantes” no texto alternativo delas (por exemplo, instruções de cuidado, tabela de tamanhos).
Por padrão, todas as imagens dos produtos são exibidas. Você precisará ativar essa opção manualmente, conforme as instruções abaixo.
Como ativar a opção “Exibir imagens do produto por variante selecionada” no GemPages
Siga os passos abaixo para ativar este recurso no Editor GemPages:
Passo 1: De você Administrador do Shopify, Vá para o Apps > GemPagesEm seguida, abra a página que contém o seu Elemento de produto.
Passo 2: Clique no seu Elemento de produto Para selecioná-lo. No painel Camadas, encontre e clique em Elemento de imagem do produto dentro dele.
Passo 3: Na barra lateral esquerda, abaixo de Configurações guia, role para baixo para encontrar Condição de exibição.
Passo 4: Escolha a opção de exibição
Você verá duas opções:
- Todas as imagens (padrão)Exibe todas as imagens do produto, independentemente da variante.
- Variante selecionada: Exibe apenas as imagens que correspondem à variante selecionada com base em seu texto alternativo.
Selecionar da Variante selecionada para habilitar o recurso.
Passo 5: Após ativar, clique em Economize e Publicar sua página.
As imagens dos seus produtos agora serão atualizadas dinamicamente sempre que um visitante selecionar uma variante diferente.
Como configurar o texto alternativo para imagens com variantes no Shopify
Para que essa funcionalidade funcione corretamente, você precisará atribuir os valores apropriados. texto alternativo Para cada imagem de produto no Shopify. O GemPages usa esse texto alternativo para determinar a qual variante cada imagem pertence.
Passo 1: No seu administrador do Shopify, vá para Produtos > [Seu produto].
Passo 2: Encontre as imagens que deseja atribuir a uma variante.
Passo 3: Clique em uma imagem → clique Adicionar texto alternativo → Insira o nome da variante.
Para garantir que o sistema identifique corretamente as imagens baseadas em variantes, siga estas instruções. regras de nomenclatura para texto alternativo:
- Todo o texto é convertido para minúsculas.
- Espaços, hífens (-) e sublinhados (_) são ignorados.
- O texto alternativo deve Incluir todos os valores de variantes selecionados (ex.: cor e tamanho).
- O processo de O nome da variante deve aparecer. no texto alternativo.
- Para exibir uma imagem para todas as variantes, incluir “todas as variantes” no texto alternativo.
- Utilize texto descritivo para fins de acessibilidade e SEO.
- Mantenha convenções de nomenclatura consistentes em toda a sua loja. Clique. Economize Quando terminar, repita o processo para todas as imagens do produto.
Por exemplo, digamos que você esteja vendendo um T-shirt com as seguintes opções de variantes:
- Cor Vermelho azul
- Tamanhos: S, M, L
Cada imagem do produto deve incluir tanto a cor quanto o tamanho. texto alternativoAssim, o GemPages pode identificar a qual variante pertence cada imagem.
Exemplos corretos:
| Variante | Exemplo de texto alternativo |
| Vermelho – S | Camiseta vermelha tamanho P |
| Vermelho – M | Camiseta vermelha tamanho M |
| Azul – G | Camiseta Azul Tamanho G |
| Todas as variantes (ex: tabela de tamanhos) | Tabela de tamanhos para todas as variantes |
Exemplos incorretos:
| Alt Texto | Por que está errado |
| Camiseta vermelha | Informações de tamanho ausentes |
| Camiseta tamanho M | Informações de cor ausentes |
| IMG_0001 | Nenhuma informação sobre variantes |
Para obter informações mais detalhadas sobre como gerenciar imagens de produtos e textos alternativos no Shopify, visite:
Central de Ajuda do Shopify – Mídia do Produto
Central de Ajuda do Shopify – Adicionar texto alternativo
Observações:
- Comportamento da imagem em destaque: Quando o "Variante selecionadaQuando a opção “Imagem em destaque” está ativada, o GemPages determina a imagem em destaque com base em primeira imagem cujo texto alternativo corresponde ao nome da variante selecionadaIsso significa a imagem em destaque exibida no GemPages. pode não ser o mesmo que A “imagem em destaque” que você atribuiu manualmente a essa variante dentro do Shopify.
- Desativado por padrão: O "Variante selecionada” opção é desligado por padrãoTodas as imagens serão exibidas normalmente até que você habilite o recurso manualmente.
Perguntas frequentes
1. Por que as imagens dos meus produtos não estão sendo exibidas corretamente ao selecionar uma variante?
Se as suas imagens não estiverem sendo atualizadas de acordo com a variante selecionada, tente os seguintes passos:
- Certifique-se de que cada imagem do produto inclua o nome da variante correta. texto alternativo.
- Verifique se o "Variantes selecionadas" A opção está ativada. nas configurações de Imagem do Produto.
- Lembre-se que Espaços, hífens (-) e sublinhados (_) são ignorados. durante o emparelhamento.
- Caso nenhuma imagem corresponda ao nome da variante, o GemPages exibirá automaticamente todas as imagens do produto.
2. Como posso exibir determinadas imagens para todas as variantes do produto?
Se você quiser que uma imagem (como uma tabela de tamanhos, guia de cuidados ou foto geral do produto) apareça para cada variante, basta adicionar “todas as variantes” para seu texto alternativo no Shopify.
Dessa forma, o GemPages sempre exibirá essa imagem, independentemente da variante selecionada pelo cliente.
3. Posso desativar o recurso “Exibir imagens do produto por variante selecionada”?
Sim. Para desligá-lo, abra o Imagem do produto Nas configurações de elementos do GemPages Editor, desmarque a opção. “Todas as imagens” opção.
Uma vez desativada, todas as imagens dos produtos serão exibidas novamente por padrão, independentemente da variante selecionada.
4. O que acontece se não houver imagens correspondentes para uma variante?
Se nenhum texto alternativo da imagem corresponder à variante selecionada, o GemPages exibirá automaticamente a imagem. todas as imagens de produtos disponíveis.
Obrigado por seus comentários