Elementos Shopify - Imagem do Produto

Neste artigo, você aprenderá sobre outro Elemento do Shopify chamado Imagem do Produto. Este elemento é uma novidade da versão 2.10.0 do PageFly. Basicamente, esse novo elemento Imagem do produto possui muitos parâmetros parecidos com o antigo elemento Imagem do produto, mas esse novo elemento possui mais opções. Consulte este artigo para conhecer as alterações.

Sobre o elemento Imagem do Produto

O elemento Imagem do Produto foi desenhado para exibir imagens de seus produtos Shopify na sua página para aumentar sua taxa de conversão. Você pode usar o elemento Imagem do Produto para promover seus produtos em qualquer página que não seja do produto ou até mesmo em uma página de produto.

Note que você poderá buscar esse elemento usando a função de busca ao invés de procurar na barra lateral.

pagefly product image element

O elemento Imagem do Produto vem com 3 opções comuns, porém continuaremos a adicionar novas opções para ajudar você a economizar tempo.

Arraste uma opção para o layout e veja como pode ser configurado.

Configuração do elemento Imagem do Produto

O elemento Imagem do Produto vêm com uma infinidade de parâmetros, permitindo a você fazer o ajuste fino da aparência do conteúdo para alcançar a melhor taxa de conversão possível.

Selecione o elemento no layout e veja seus parâmetros.

Quando você arrastar o elemento Imagem do Produto 2 para o editor de página, haverão 2 opções para a Origem do Produto para seleção, que são:

  • Auto
  • Produto Customizado

Note que se você estiver na Página do Produto e usar o elemento Imagem do Produto, você poderá utilizar a opção de Origem do Produto. Porém, se você estiver na Página Regular e usar este elemento, a opção Origem do Produto estará desabilitada e a opção Produto Customizado selecionada por padrão.

Se você selecionar Auto, então o produto associado ao criar a página será exibido no editor de página.

Você pode usar a opção Produto Customizado e selecionar o produto desejado.

Parâmetros da aba Geral
1. CONTEÚDO
  • Origem da Imagem Padrão : Há 2 opções para escolher para exibir a imagem padrão do produto,que são: 
    • Imagem Destacada
    • Imagem do Primeiro Modelo

Você pode verificar estes produtos no admin do Shopify:

  • Definir altura fixa: Habilite esta opção se desejar ajustar a altura da imagem principal do produto. A altura máxima é 2000px.
  • Ação de foco da imagem: Existem 3 opções para escolher se você desejar focar o mouse ao passar na imagem
    • Nenhum: Escolha esta opção se não desejar que a imagem do produto seja exibida.
    • Ativar Lupa de Imagem: A imagem do produto será ampliada quando você passar o mouse sobre cada imagem da lista. Você pode ver a demonstração abaixo

  • Exibir Imagem Flutuante: Ao passar o mouse sobre o elemento de imagem do produto, a imagem flutuante substituirá a imagem padrão após um atraso de 0,3s. Existem 4 opções para selecionar
    • Próxima Imagem: Mostra a próxima imagem da imagem em destaque.
    • Última Imagem: Mostra a última imagem da imagem em destaque.
    • Imagem Aleatória: Mostra aleatoriamente uma variação da imagem em destaque.
    • Todas as imagens: Mostra várias imagens ao mover o cursor do mouse na imagem do produto.

Observe que a ação de foco instantâneo da imagem NÃO funcionará em dispositivos com tela sensível ao toque, como tablets ou smartphones.

  • Ação de clique na imagem: Existem 3 opções para escolher ao clicar na imagem do produto:
    • Nenhuma: Escolha essa opção se não desejar alterar ao clicar na imagem.
    • Vincular ao Produto: Escolha essa opção se desejar vincular a imagem ao produto correspondente.
    • Mostrar imagem em tela cheia: Escolha essa opção se desejar visualizar em tela cheia com toque / clique na imagem.
  • Você pode ver a demonstração abaixo no laptop

No dispositivo móvel, você pode tocar duas vezes para ampliar a imagem do produto e tocar duas vezes novamente para diminuir o zoom.

Você pode deslizar pelas imagens quando a imagem exibida não estiver ampliada.

Ampliador de imagens: Ative esta opção se desejar ampliar a imagem ao passar o mouse.

  • Lista de Imagens: Existem 2 opções para escolher, como Mostrar e Ocultar lista de imagens. Se você optar por mostrar a lista de imagens:
    • Posição da lista: Você pode escolher a posição da lista entre as 4 opções: Superior, Direita, Inferior e Esquerda.
    • Layout da lista: Você pode escolher o layout da lista de imagens e ela será exibida como 1 entre as 2 opções: Slider e Grade.
    • Itens por slide: Você pode configurar o número de itens exibidos em uma coluna aqui. O número máximo é de 12 itens.
    • Espaçamento entre itens: Você pode ajustar o espaçamento entre os itens aqui. O espaçamento máximo é 100px.

Se você selecionar esconder a lista de imagens, então não haverá opções da lista de imagens para você. 

  • Mostrar Selo: Ative esta opção se desejar mostrar um selo na imagem do seu produto
    • Posição do selo: Existem quatro posições para você escolher: Superior esquerdo, Superior direito, Inferior esquerdo e Inferior direito.
3. RASTREAMENTO Este é o local para configurar:

  • Evento do Google Analytics na sua conta do GA. Você pode ler mais como configurá-lo aqui. 
  • Pixel do Facebook quando um cliente clica no elemento. Você pode ler mais sobre isso aqui.
4. ATRIBUTOS Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
5. VISIBILIDADE Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
6. ANIMAÇÃO Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
Parâmetro da guia Estilo
1. NO GERAL Você pode ler mais aqui
2. ESPAÇAMENTO Você pode ler mais aqui
3. TIPOGRAFIA Você pode ler mais aqui
4. FUNDO DE TELA Você pode ler mais aqui.
5. BORDA Você pode ler mais aqui
6. EXIBIÇÃO Você pode ler mais aqui
7. CSS PERSONALIZADO Você pode ler mais aqui.

Configuração de elementos combinados

Configuração do Selo de Produto

Selecione o selo para configurar suas opções

product badge element

Parâmetro da guia Geral
1. CONTEÚDO
  • Texto: A caixa Texto mostra descontos ou estoque restantes da variante do produto. Você também pode adicionar conteúdo personalizado para esse emblema.

Observe que “Desconto” e “Estoque” são calculados com base no valor da variante de produto selecionada.

  • Aplicar condição do produto: Existem 2 condições a serem aplicadas:
    • Pertence à coleção (s):
      • Todas as coleções
      • Coleções personalizadas: o emblema é mostrado apenas quando o produto pertence à (s) coleção (s) selecionada (s).
    • Contém Etiquetas: O emblema é mostrado apenas quando o produto contém uma das etiquetas definidas.
2. ATRIBUTOS Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
3. VISIBILIDADE Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
Parâmetro da guia Estilo
1. NO GERAL Você pode ler mais aqui
2. ESPAÇAMENTO Você pode ler mais aqui
3. TIPOGRAFIA Você pode ler mais aqui
4. FUNDO DE TELA Você pode ler mais aqui.
5. BORDA Você pode ler mais aqui
6. EXIBIÇÃO Você pode ler mais aqui
7. CSS PERSONALIZADO Você pode ler mais aqui.

Item da lista de imagens

Selecione o item da lista de imagens para configurar as opções

Os parâmetros na guia Estilo para o elemento Item da lista de imagens incluem:

  • Estado do Cabeçalho: Você pode estilizar os três estados do cabeçalho, como Normal, Flutuar e Selecionado.
  • Estilo da Borda: Você pode escolher um dos quatro estilos de borda para cada estado. Clique no botão Mais configurações para configurar a largura da borda e o raio da borda.

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages