Visualização do produto Mais elementos

O que é o elemento Exibir mais do produto?

O processo de Visualização do produto Mais elementos no GemPages há um botão dinâmico que redireciona os visitantes para uma página de detalhes do produto.

É normalmente usado em um Lista de Produtos or Coleção seção, onde vários produtos são exibidos com apenas informações básicas, como imagens e títulos.

Ao adicionar um botão Ver mais produtos, você oferece aos compradores uma maneira clara de visualizar todos os detalhes de um produto, incentivando uma exploração mais profunda e aumentando a probabilidade de uma compra.

Por exemplo, imagine uma grade de produtos exibindo produtos. Cada cartão de produto pode mostrar apenas a imagem, o título e o preço. Ao adicionar o botão "Ver Mais Produtos", os clientes podem clicar para acessar diretamente a página completa de detalhes do produto.

Como adicionar o elemento "Exibir mais produtos" à sua página?

Siga os passos abaixo para adicioná-lo à sua página:

Passo 1:  Use a barra de pesquisa para encontrar esse elemento e arraste-o e solte-o na posição desejada.

Por exemplo, se você estiver criando uma página de coleção, você pode soltar o botão abaixo de cada cartão de produto em sua Lista de Produtos.

Passo 2: Depois de adicionado, clique no botão Ver mais produtos para abrir seu Painel de configurações na barra lateral esquerda. Você verá duas abas disponíveis: Configurações e Avançado.

Configurar a guia Configurações

1. Origem do produto

Mostra de qual produto o elemento está exibindo informações.

O botão extrairá automaticamente os dados do produto do seu Administrador do Shopify. Certifique-se de que as informações necessárias do produto (título, descrição, preço, etc.) já estejam configuradas na sua loja Shopify.

2. Dimensões:

Você pode ajustar o largura, altura e acolchoamento do botão. Esses valores são definidos em pixels e permitem controlar o tamanho da imagem do botão.

3. Fundo

Escolha entre um cor e um fundo da imagem para o botão. 

4. Shape

Esta seção controla o estilo geral do botão:

• Fronteira: Defina a espessura e o estilo da borda.
• Corner: Ajuste o raio do canto.
• Shadow: Adicione profundidade com uma sombra de botão.

5. ícone

Você pode adicionar um ícone ao botão ou deixá-lo somente com texto. 

Se você optar por adicionar um:

• ícone: Selecione um dos ícones integrados do GemPages ou carregue seu próprio ícone personalizado.
• Posição: Decida se o ícone aparece no lado esquerdo ou direito do texto.
• lacuna: Ajuste o espaçamento entre o texto e o ícone. Você pode definir um valor manualmente ou usar o controle deslizante.

6. Texto

Sob o Texto seção, ative-a para expandir as configurações do texto completo, incluindo:

• Sessão de Fotos: Selecione entre seis estilos de título ou três estilos de parágrafo predefinidos no Editor.
• fonte: Escolha uma fonte da biblioteca ou carregue sua própria fonte personalizada.
• Dimensões:: Defina o tamanho da fonte em pixels.
• Cor: Selecione uma cor de texto que combine com seu design.
• Peso da fonte: Ajuste o quão em negrito o texto aparece.
• Altura da linha: Defina o espaçamento vertical entre as linhas de texto.
• Espaçamento entre Letras: Ajuste o espaçamento entre letras individuais.
• Transformam: Aplique transformações de texto, como letras maiúsculas, minúsculas ou maiúsculas.
• Shadow: Adicione uma sombra ao texto para dar ênfase.

7. Efeito

• Pairar: Defina como o botão muda quando o cursor passa sobre ele. Você pode ajustar a cor de fundo, a cor do texto, a borda, os cantos e a sombra para o efeito de foco.

8. Redirecionar para

• Nova aba: Escolha se a página de detalhes do produto abre em uma nova guia do navegador (Sim) ou a guia atual (Não).

9. Alinhar

Alinhe o botão dentro de seu contêiner. Você pode colocá-lo no esquerda, centro, ou certo.

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.