ProductZoom - Yampi Developer Portal

O componente ProductZoom renderiza a galeria de imagens do produto com carrossel principal e navegação por miniaturas. Em mobile, exibe um indicador de posição (ex.: 2/5) e suporta zoom por pinça. As imagens são atualizadas automaticamente quando o SKU selecionado muda.

Uso

<product-zoom
  :has-video="true"
  :thumb-width="80"
  :thumb-height="80"
/>

Propriedades

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`hasVideo`	`Boolean`	❌	`false`	Exibe o item de vídeo no carrossel. Requer que o produto tenha um vídeo cadastrado.
`thumbWidth`	`Number`	❌	`0`	Largura das miniaturas em pixels. `0` usa o valor padrão do tema.
`thumbHeight`	`Number`	❌	`0`	Altura das miniaturas em pixels. `0` usa o valor padrão do tema.

Mixins utilizados

Mixin	Finalidade
`productMixin`	Acesso ao produto, SKU selecionado e lista de imagens.
`mobileMixin`	Detecção de dispositivo para habilitar zoom e indicador de posição.

Comportamentos automáticos

Troca de SKU: ao selecionar um SKU diferente, o carrossel atualiza automaticamente para as imagens correspondentes.
Lazy loading: imagens de alta resolução são carregadas progressivamente conforme o usuário navega no carrossel.
Responsividade: em desktop exibe miniaturas clicáveis; em mobile exibe indicador de posição e habilita zoom por pinça.

⌘I