Modelo de produto

Este componente é o que te permite exibir e personalizar a secção principal da página dos teus produtos dentro do tema.

Funciona utilizando vários subcomponentes que mostram diferentes informações e detalhes sobre cada produto, que podes reorganizar, ocultar (1) ou eliminar (2).

Nota (1): Todos os subcomponentes dentro deste componente podem ser ocultados.

Nota (2): Alguns subcomponentes podem ser completamente removidos, enquanto outros não, pois são necessários para o funcionamento correto da página.

Para efeitos deste componente, referimo-nos como Conteúdo à coluna que contém todos os detalhes do produto, como Nome, Preço, Formulário, etc.; e como Galeria à que mostra a(s) imagem(ns) do produto.

Definições do componente

Ao clicar no nome do componente, encontrarás opções gerais para o personalizar, as quais determinarão o aspeto e o comportamento da secção. As opções disponíveis para este componente são as seguintes:

Alinhamento do conteúdo

Permite definir o alinhamento de todos os elementos dentro da coluna Conteúdo, como o nome, preço, etc.

Galeria de imagens

O seguinte grupo de opções permite-te personalizar certos aspetos da Galeria, que afetarão todos os produtos da loja:

Formatar imagens

Permite formatar e redimensionar automaticamente as imagens que carregares nos produtos, de acordo com as opções que encontras abaixo.

Nota: Podes consultar os tamanhos em que as imagens serão exibidas nesta secção.

Ao ativar esta opção, serão exibidas as seguintes opções para as personalizares:

Dimensão

Permite definir como as imagens serão exibidas dentro do componente, conforme as seguintes opções:

• Horizontal: formato largo e baixo, ideal para um estilo panorâmico. Usa uma proporção de 16:9.
• Vertical: formato alto e estreito, ideal para exibir imagens verticais, como cartazes. Usa uma proporção de 3:4.
• Retangular: formato equilibrado, ligeiramente alongado, adequado para a maioria das imagens. Usa uma proporção de 4:3.
• Quadrada: formato com altura e largura iguais, perfeito para imagens simétricas. Usa uma proporção de 1:1.

Exibição

Cortar: Cria uma versão miniatura da imagem, cortando-a para ajustar exatamente ao tamanho definido na opção Dimensão, mantendo centrada a parte mais importante.

Por exemplo, se definires uma dimensão quadrada, isso garantirá que ela mantenha sempre essa forma, mesmo que a imagem original seja retangular.

Redimensionar: Mantém as proporções originais da imagem (sem a cortar) e apenas a reduz para se ajustar ao espaço disponível, adaptando-se automaticamente sem cortar nada.

Resumindo:

• Cortar faz com que a imagem se ajuste a dimensões exatas.
• Redimensionar mantém as proporções originais e apenas a reduz.

Largura no computador

Permite definir a largura à qual as imagens dentro da galeria serão Cortadas ou Redimensionadas.

A dimensão que definires aqui está diretamente relacionada com a Largura máxima do contentor definida em Definições do tema > Design, pois deverás aumentá-la se escolheres um contentor maior do que Pequeno.

Nota: Se Formatar imagens estiver desativado, as imagens serão exibidas no formato original em que foram carregadas. Se tiverem alturas diferentes, a galeria adaptar-se-á automaticamente à altura de cada uma.

Exibir miniaturas da galeria

Permite exibir uma segunda Galeria com miniaturas de todas as imagens do produto, juntamente com a principal, permitindo que os utilizadores cliquem para as visualizar. Incluirá setas de navegação à esquerda e à direita.

Nota: Se esta opção estiver desativada, a Galeria principal exibirá setas internas para que os utilizadores possam navegar entre as imagens.

Posição das miniaturas no computador

Permite definir a posição das Miniaturas em computadores com largura igual ou superior a 992px.
Em dispositivos com largura inferior, serão automaticamente posicionadas abaixo da imagem principal.

Ativar zoom nas imagens

Permite que os utilizadores façam zoom sobre as imagens do produto ao passar o cursor por cima delas.

Nota: É recomendável carregar imagens com resolução superior às visíveis na loja, para que o zoom não as pixele.

Nível de zoom

Permite definir o nível de zoom aplicado às imagens do produto, se a opção anterior estiver ativada.

Galeria fixa

Permite que a Galeria permaneça fixa na parte superior do Cabeçalho do tema (se também estiver fixo) ou do Navegador, acompanhando o utilizador durante o scroll.

Podes saber mais sobre tamanhos e dimensões recomendadas nesta secção.

Aparência

Este grupo contém as seguintes opções para personalizar o componente:

• Margem superior: permite controlar a margem superior da secção.
• Margem inferior: permite controlar a margem inferior da secção.
• Cores do conteúdo: permite escolher a Paleta para o componente.

Animações

A opção Personalizar opções permite ajustar as animações para este componente específico. Podes ver quais estão disponíveis nesta página.

Subcomponentes

O componente Modelo de produto permite-te escolher o conteúdo a exibir através de vários subcomponentes que representam os detalhes do produto.

Cada um deles pode ser editado, movido, ocultado e/ou eliminado. Os disponíveis são os seguintes:

Nota: Alguns destes subcomponentes não têm opções dentro das suas definições, pois apenas exibem informações. Assim, o seu comportamento ou aparência pode ser gerido em Definições do tema dentro do Editor visual, uma vez que também afetam outras páginas e componentes do tema.

Atributos

Permite exibir o SKU e a Marca do produto, juntamente com outras opções para personalizar a visualização:

Nota: Se um produto não tiver algum destes atributos, não será exibido. Se tiver ambos e escolheres exibi-los, serão separados por uma linha vertical. A ordem será sempre primeiro SKU e depois Marca.

Exibir antes da galeria no telemóvel

Por defeito, os Atributos são exibidos após a Galeria em telemóveis. Esta opção permite alterá-los e exibi-los antes.

Exibir SKU

Permite definir se o SKU do produto será exibido ou não.

Exibir texto antes do SKU

Permite mostrar um texto antes do SKU do produto, como por exemplo “SKU: 1234”.

Exibir marca

Permite definir se a Marca do produto será exibida ou não.

Nome

Exibe o nome ou título do produto.

Avaliações

Permite exibir as avaliações e classificação do produto, se o tema ou as aplicações instaladas as suportarem.

Preço

Exibe o preço do produto, o preço anterior (se existir) e os descontos aplicados.

Formulário

Este subcomponente exibe o formulário principal de compra, com as seguintes secções:

• Seletor de variantes (se o produto tiver opções, como cor ou tamanho).
• Campo de quantidade.
• Botão de compra (Adicionar ao carrinho ou Comprar agora).
• Botões secundários, como “Adicionar aos favoritos” (se estiverem ativados no tema).

Nota: Se um produto tiver várias variantes, o formulário será atualizado dinamicamente ao alterar qualquer uma delas, exibindo o preço, disponibilidade e SKU.

Descrição

Exibe a descrição do produto conforme foi adicionada no painel de administração (Produtos > Todos os produtos > Descrição).

Etiquetas

Permite exibir as etiquetas associadas ao produto.

Nota: As etiquetas funcionam como metadados que permitem agrupar produtos semelhantes ou criar links dinâmicos dentro do tema. Podem ser adicionadas a partir do painel de administração.

Partilhar

Exibe botões para partilhar o produto nas redes sociais (Facebook, Pinterest, X/Twitter e WhatsApp).

Divisor de linha

Adiciona uma linha visual que separa blocos dentro do modelo.

Produtos relacionados

Exibe produtos semelhantes ao atual, com base na mesma categoria ou etiquetas partilhadas.

Separadores de informação

Permite agrupar informação adicional do produto (como envio, materiais, política de devoluções, etc.) em separadores horizontais ou verticais, conforme a configuração do tema.

Código personalizado

Permite inserir um bloco de código HTML personalizado, útil para widgets externos ou scripts específicos do produto.

Tamanhos de imagens

Os tamanhos das imagens dentro deste componente ou do Produto selecionado variam conforme as opções que escolheres:

• Se ativares a opção Formatar imagens.
• A opção Dimensão da imagem.
• A opção Largura no computador, que afeta as imagens em computadores com largura ≥ 992px.

Além disso, o tema carregará automaticamente diferentes tamanhos de imagem, dependendo da largura da janela do navegador a partir da qual a loja é visitada, para otimizar as imagens em cada tipo de dispositivo.

Também deves considerar que, ao ativares a opção Zoom, poderás ter de carregar imagens um pouco maiores do que as dimensões sugeridas abaixo, para que não fiquem pixeladas quando forem ampliadas.

Tamanhos predefinidos

A seguir, detalhamos as dimensões mínimas recomendadas para carregares as imagens dos teus produtos, considerando o valor predefinido da opção Largura no computador, que é 760.

Os valores da tabela abaixo consideram apenas a dimensão do computador, pois será o que terá o maior tamanho de todos:

Nota: As imagens serão automaticamente redimensionadas ou cortadas conforme o que escolheres na opção Exibição, dentro das definições do componente.

Tamanhos personalizados

Se alterares o valor predefinido da opção Largura no computador, juntamente com a opção Dimensão, e precisares calcular como as tuas imagens devem ser, podes fazê-lo facilmente das seguintes formas:

RatioBuddy

Esta ferramenta permite definir a proporção de aspeto (por exemplo, 4 por 3, que seria retangular) e indicar a largura e/ou altura.

Visita o site do RatioBuddy.

ChatGPT

Também podes usar o ChatGPT para fazer os cálculos por ti, fornecendo um prompt como o seguinte:

Hey chat, preciso calcular dimensões de imagem com base na largura e proporções.

As proporções são as seguintes:

- Horizontal: 9 ÷ 16
- Vertical: 4 ÷ 3
- Retangular: 3 ÷ 4
- Quadrada: 1 ÷ 1

O tamanho da minha imagem é 760px.

Gostava de saber as combinações para a largura e proporção que estou a usar [a tua proporção], para determinar qual deve ser a altura das minhas imagens. Por favor, arredonda os resultados para não incluir dimensões com decimais.

Deverá devolver-te um resultado semelhante à seguinte imagem: