Produtos etiquetados

Este componente permite carregar uma imagem na qual podes etiquetar e/ou posicionar produtos da tua loja.

Pode ser muito útil, por exemplo, para exibir uma Coleção onde existam vários produtos que vendes, permitindo que os clientes vejam quais são e os comprem, ou acedam às respetivas páginas de produto para ver mais detalhes.

Definições do componente

Ao adicioná-lo, encontrarás várias opções para o personalizar, as quais são explicadas a seguir.

Largura

Permite definir a largura máxima que o componente irá ocupar dentro da janela do navegador.

Podes ler mais sobre como esta opção afeta o componente nesta página.

---

Opções de imagem

Neste grupo encontrarás as opções para carregar imagens tanto para desktop como para dispositivos móveis.

Nota: Ao carregar uma imagem para telemóvel, surgirão opções adicionais no subcomponente Produto para que possas personalizar a posição do seu marcador.

---

Opções de marcadores

Os marcadores são os pontos ou elementos que permitem aos clientes ver os produtos que adicionas dentro do componente.

Neste grupo encontrarás várias opções para personalizar o seu aspeto e comportamento.

Tamanho

Define o tamanho de todos os marcadores, o que afeta a sua largura e altura, bem como o ícone (+) no seu interior, através de opções predefinidas.

Ao escolher Personalizado, poderás ajustar manualmente o tamanho para dispositivos desktop e móveis.

Estilo

Define o formato com que os marcadores serão apresentados.

Fundo

Define a cor de fundo de todos os marcadores. A cor do ícone (+) será ajustada automaticamente para garantir um contraste adequado.

Animação

Mostra uma animação de inclinação nos marcadores.

Ao escolher Hover, a animação será ativada apenas quando o cursor passar sobre o marcador. No caso de Sempre, a animação será aplicada sempre.

Ao escolher Nenhuma, não haverá animação, estando presente apenas a rotação do ícone no estado de “hover”.

---

Opções de produto

Neste grupo podes definir como os produtos serão exibidos ao clicar num marcador, dependendo de a opção Ativar Quick View estar ou não ativada, da seguinte forma:

1. Se estiver ativada, funcionará com base no que definiste em Definições do tema > Quick View de produto.
2. Se estiver desativada, ao clicar num marcador o produto será exibido ao lado, numa pequena janela –tooltip, como iremos referir– com detalhes como imagem, nome, preço, entre outros. Isto também tornará visíveis as seguintes opções para personalização.

Estilo

Define o formato dos cantos do tooltip para todos os produtos.

Alinhamento vertical

Define o alinhamento vertical entre a imagem do produto e o respetivo conteúdo.

Cores do conteúdo do produto

Define a Paleta para todos os tooltips de produto.

---

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

As Opções de personalização permitem ajustar as animações para este componente em específico. Podes ver quais estão disponíveis nesta página.

---

---

Definições do subcomponente

O componente funciona utilizando um subcomponente chamado Produto, no qual podes adicionar os produtos que desejas etiquetar dentro da imagem.

Possui as seguintes opções para que possas personalizá-lo.

Produto

Aqui deves escolher um produto da tua loja. Por defeito, aparece preenchido com o primeiro da lista de produtos no painel de administração, em Produtos > Todos os produtos.

---

Posição do marcador

Neste grupo encontrarás as opções Superior e Esquerda para controlar a posição do marcador, através de percentagens baseadas na largura e altura da imagem que carregaste nas definições principais do componente.

---

Posição do marcador (telemóvel)

Este grupo apenas ficará visível se carregaste uma imagem para dispositivos móveis nas definições principais do componente.

Também encontrarás as opções Superior e Esquerda para controlar a posição do marcador nesse caso específico.

Nota: Se não carregares uma imagem para telemóvel, os controlos anteriores serão aplicados para todos os dispositivos, desktop e telemóvel.