Sobre o elemento de imagem do produto
O elemento Imagens do Produto, parte do Módulo de Produto, permite que você exiba imagens de um produto específico diretamente do seu Admin do Shopify.
Este elemento apresenta:
- Imagem em destaque: A imagem principal, obtida da primeira imagem na seção Mídia do seu Administrador do Shopify > Produto.
- Lista de imagens: Uma coleção de imagens da mesma seção Mídia, exibidas como uma galeria visual.
Para usar o elemento Imagens do produto, certifique-se de ter um produto com imagens na seção de mídia no seu Admin do Shopify.
Como adicionar um elemento de imagem de produto à sua página
Observação: Para uma funcionalidade adequada, o Elemento de imagens do produto deve ser posicionado dentro de um módulo de produto.
Passo 1: Acessar o Painel GemPages > PÁGINASe clique na página de destino para abrir o editor.
Passo 2: Se você não tiver nenhum módulo de produto em sua página, arraste e solte a Elemento do produto para a posição desejada.
O Elemento Produto contém vários elementos filhos, incluindo o Elemento de imagem do produto.
Passo 3: Aassinar um produto para o elemento no Fonte do produto seção.
Consulte Este artigo para mais detalhes sobre atribuindo produtos em GemPages.
Passo 4: Clique na imagem principal para acessar o Elemento de Imagem do Produto
Configurar a guia Configurações
traçado
Atualmente, o GemPages oferece 9 layouts pré-projetados para ajudar você a exibir a Imagem em Destaque e a Lista de Imagens de forma eficaz.
Observação:
- Você pode ajustar o espaçamento entre as imagens na Lista de Imagens.
- Certifique-se de verificar como o layout aparece em diferentes dispositivos.
Fonte do produto
Há duas maneiras de selecionar um produto para o módulo de produtos: Exibir por produto atribuído or Escolha Manualmente.
- Exibir por produto atribuído
Ao selecionar a opção de exibição por produto atribuído, o modelo atual será aplicado a todos os produtos atribuídos dinamicamente. O produto será selecionado aleatoriamente para ser exibido na página do editor atual.
Passe o mouse sobre a fonte do produto atual e clique em editar ícone para abrir o Selecione o produto diálogo. A partir daí, você pode selecionar outros produtos atribuídos disponíveis.
- Escolha Manualmente
Esta opção permite que você exiba vários módulos de produtos no mesmo modelo e opções de variantes específicas.
Para fazer uma seleção, clique em Escolha Manualmente, e uma janela será aberta exibindo uma lista de produtos para você escolher.
Imagem em destaque
A imagem em destaque serve como a principal representação visual do seu produto.
Esta seção inclui:
| Configuração | Descrição |
| quadro | Escolha entre: Quadrado, Vertical, Horizontal, Original e Personalizado. |
| Largura altura | Disponível ao selecionar Molduras por Medida quadro, Armação. |
| Navegação | Selecione o layout: Interno ou Externo. Escolha o ícone de navegação e ajuste o tamanho, a cor, a largura, a altura, o preenchimento, o plano de fundo do botão e as opções de formato, incluindo borda, canto e sombra.
|
| Corner | Ajuste o raio do canto (por exemplo, 10px, 30px). |
| Ação de pairar | Adicione efeitos de foco, como Zoom. Você também pode personalizar: → Tipo de Zoom: Padrão / Óculos → Valor do Zoom: Definir porcentagem de zoom
|
| Clique em Ação | Escolha o que acontece quando os clientes clicam na imagem: → Abrir produto → Zoom → Abrir em nova aba: Sim/Não |
| Velocidade de deslizamento | Ajuste a velocidade de transição entre as imagens (por exemplo, 500 ms). |
| Animação | Escolha o efeito de transição: Entrada suave, Saída suave, Entrada e saída suaves.
|
| Arrastar/Deslizar | Habilite o deslizar para celular ou desktop. |
| Loop Infinito | Ativar loop contínuo de volta para a primeira imagem ao deslizar. |
Lista de imagens
Esta seção permite que você controle como suas imagens adicionais de produtos (miniaturas) são exibidas abaixo ou ao lado da imagem em destaque.
Configurar:
| Configuração | Descrição |
| Ecrã | Escolher entre:
– Slide: Exibe imagens em um carrossel deslizante – Tudo: Mostrar todas as imagens de uma vez |
| quadro | Selecione o formato da miniatura: Quadrado, Vertical, Horizontal, Original ou Personalizado |
| Largura altura | Disponível somente se a opção Personalizado estiver selecionada. Defina as dimensões exatas para as miniaturas. |
| Lacuna de imagem | Defina o espaçamento entre as miniaturas (em px). |
| Escala de Imagem | Ajuste o quanto a imagem aumenta ao passar o mouse. Ótimo para clareza visual. |
| Navegação | Habilitar setas para navegação do controle deslizante (se Slide estiver selecionado).
Escolha o layout (interno/externo), selecione o ícone, ajuste o tamanho, a cor, a largura, a altura, o preenchimento, o plano de fundo do botão e as opções de forma, incluindo borda, canto e sombra. |
| Corner | Defina o raio do canto para criar miniaturas de imagens arredondadas. |
| Fronteira Ativa | Destaque a imagem selecionada com uma borda visível. |
| Clique em Ação | Defina o que acontece quando um usuário clica em uma miniatura (por exemplo, mostrar na visualização principal). |
| Arrastar/Deslizar | Habilite a interação em dispositivos móveis para alternar entre imagens. |
| Loop infinito | Permitir que o carrossel retorne à primeira imagem após atingir a última. |
Espaçamento de itens
Condição de exibição
Sob o Condição de exibição seção, você pode selecionar uma condição para o item de imagem padrão no menu suspenso, incluindo:
| 1ª variante disponível | Exibe a primeira imagem variante associada à primeira variante ativa do produto na Shopify. Ideal para lojas com imagens baseadas em variantes (por exemplo, cores ou estilos diferentes). |
| 1ª imagem | Exibe a primeira imagem na lista de mídia do produto. Ideal para produtos padrão que usam uma imagem principal. |
| 1o video | Exibe o primeiro vídeo carregado na seção de mídia do produto. Ótimo para destacar vídeos promocionais ou de demonstração. |
| 1º modelo 3D | Exibe o primeiro modelo 3D (formato GLB/GLTF) adicionado à seção Mídia do Shopify. Use isso para visualizações interativas de produtos, onde os clientes podem girar e inspecionar o produto em 3D. |
Otimize o LCP
Se você preferir que a imagem seja pré-carregada quando os visitantes acessarem sua página, escolha Sim para esta seção.
Alinhar
Este parâmetro permite que você determine como a imagem é posicionada na sua página. Há três opções para escolher: alinhado à esquerda, centralizado e alinhado à direita.
Configurar a guia Avançado
Para uma personalização mais avançada, navegue até a guia Avançado e siga as instruções em Este artigo.
Perguntas frequentes sobre o elemento de imagem do produto
1. Por que as imagens dos meus produtos não estão aparecendo na página?
Se as imagens do seu produto não estiverem sendo exibidas, pode ser devido a:
- O elemento Imagens do Produto não está sendo colocado dentro de um Módulo de Produto.
- O produto atribuído no Módulo de Produto não possui conteúdo de mídia no Admin do Shopify.
Verifique Este artigo para solução de problemas detalhada.
2. Por que as imagens dos meus produtos estão carregando lentamente?
O carregamento lento pode ser causado por:
- Imagens de alta resolução não são otimizadas para a web.
- Muitas imagens são carregadas de uma só vez sem carregamento lento.
Consulte este guia para otimizar a velocidade da imagem.
3. Posso usar o elemento Imagens de produtos em páginas que não sejam de produtos?
Sim. O elemento Imagens do produto pode ser usado em qualquer página, desde que seja colocado dentro de uma Módulo de Produto.
4. Posso reorganizar a ordem das imagens dentro do GemPages?
Não. A ordem das imagens é obtida da seção de mídia do produto do administrador da Shopify. Para alterar a ordem de exibição, você precisará reorganizar a mídia na Shopify.
5. Posso adicionar um vídeo ao elemento Imagens do produto?
- Acesse Produtos no seu Admin do Shopify.
- Selecione o produto ao qual deseja adicionar um vídeo.
- De acordo com o relatório Media seção, clique no + botão e carregue seu vídeo.
- Clique Economize para aplicar as mudanças.
- Volte para a página do seu produto no GemPages e clique sincronização. O vídeo aparecerá então no Imagens de produtos elemento.
6. Como posso fazer com que uma página exiba um produto específico com suas imagens?
Passo 1: Arraste um Módulo de Produto em seu layout.
Passo 2: Atribua um produto ao módulo por:
- Exibir por produto atribuído: Aplique o modelo atual dinamicamente a todos os produtos atribuídos.
- Escolha Manualmente: Selecione um produto diretamente do seu catálogo da Shopify.
Passo 3: Uma vez atribuído o produto, o Imagens de produtos O elemento dentro do módulo puxará e exibirá automaticamente as imagens do produto do Shopify Admin.
Para mais informações, por favor consulte Este artigo.
7. Por que a imagem do meu produto não está sincronizando com o meu produto na Shopify?
O elemento Imagem do Produto só carrega imagens dinamicamente quando está dentro de um Módulo de Produto e um produto está atribuído.
Se a foto do seu produto não estiver atualizando, verifique se o produto possui mídia no Shopify. Clique em sincronização No GemPages, certifique-se de que a Condição de Exibição corresponda à sua mídia disponível (por exemplo, 1ª imagem, 1ª variante).
8. Como criar uma apresentação de slides com imagens de produtos?
Se você quiser criar um apresentação de slides de imagens personalizadas onde você pode controlar manualmente cada imagem, você pode criar seu próprio carrossel usando o Elemento carrossel e Elementos de imagem.
Siga estes passos para criar e alterar imagens em uma apresentação de slides personalizada de imagens de produtos:
Passo 1: No Editor GemPages, arraste e solte um Elemento carrossel Posicione o carrossel de imagens do produto no local onde deseja exibi-lo na sua página.
Passo 2: Dentro do carrossel, arraste um Elemento de imagem no controle deslizante.
Passo 3: Selecione o elemento Imagem e, em seguida, carregue a imagem do seu produto.
Passo 4: Repita o mesmo processo para os slides restantes dentro do carrossel:
- Adicione um Elemento de imagem para cada slide
- Faça o upload da imagem do produto que deseja exibir.
- Organize os slides na ordem desejada.
Passo 5: Para alterar uma imagem existente posteriormente, basta selecionar o elemento Imagem dentro do slide e carregar uma nova imagem para substituir a antiga.
Obrigado por seus comentários