Vídeo comprável na página de produto

O recurso Vídeo comprável (Video Commerce) utiliza o primeiro vídeo nativo cadastrado nas mídias do produto. Na página de produto, o visitante pode assistir e escolher as variantes antes de adicionar ao carrinho.

No Brand Editor, abra o template de produto, selecione a seção principal de informações do produto e ative Ativar vídeo comprável. A configuração é aplicada ao template: produtos que usam esse template e possuem vídeo nativo podem exibir o recurso. Por padrão, ele vem desativado.

Em Formato do vídeo flutuante, escolha Círculo (padrão), Stories (vertical) ou Quadrado. O formato altera somente o flutuante; o player e a compra permanecem iguais.

Em computadores, o vídeo aparece em um botão no canto inferior esquerdo, sem som e em loop. A posição pode ser alterada para a direita em Posição do vídeo flutuante. O botão de fechar dispensa o flutuante para esse produto durante a sessão. Se o navegador impedir autoplay ou o visitante preferir menos movimento, a capa permite abrir o vídeo manualmente.

Em celulares, o mesmo vídeo flutuante aparece no formato escolhido, com largura padrão de 104 px (185 px de altura em Stories). O toque abre o modal em tela cheia. Não há botão adicional abaixo da galeria. O modal vertical apresenta um cartão com nome, imagem, preço e Comprar sobre o vídeo. O primeiro clique em Comprar abre variantes em botões e quantidade com −/+ ao lado da compra; a confirmação adiciona ao carrinho. A seleção acompanha o formulário da página, e opções sem estoque bloqueiam o botão. Após adicionar, o tema apresenta seu fluxo normal de carrinho.

Os controles em ícones permitem pausar/retomar e ativar/silenciar o som. Os ícones acompanham o estado informado pelo player e possuem rótulos acessíveis. Quando o recurso está ativo, o vídeo utilizado sai do carrossel de imagens e das miniaturas. Os demais vídeos permanecem; desativar o recurso restaura a galeria completa. O flutuante se oculta enquanto o carrinho ou outro modal do tema estiver aberto. Kits e assinaturas direcionam o visitante aos detalhes da página para concluir suas configurações.

O flutuante utiliza apenas vídeo nativo. Para cards na home ou na PDP, inclusive com YouTube/Vimeo, use a seção Carrossel de vídeos compráveis. Cada card pode vincular um produto; vários produtos no mesmo vídeo continuam fora do escopo. Uma transição entre flutuante e modal pode reiniciar a reprodução.

Se o vídeo não carregar, o modal informa a falha e oferece Tentar novamente. O cartão e as opções de compra continuam disponíveis. A nova tentativa recria o player e, quando necessário, solicita novamente o SDK.

Ao abrir as opções, o Comprar do cartão é ocultado: apenas o botão de confirmação do formulário permanece. Reabrir o modal restaura o cartão compacto.

Para voltar ao cartão compacto, toque na seta no canto superior do cartão ou na área do vídeo acima do cartão. As opções e a quantidade são preservadas. Pausa, som e X continuam independentes.

O cartão não apresenta link para os detalhes da própria PDP. O ícone de recolher fica junto ao resumo, sem ocupar uma linha do formulário.

O formulário abre e recolhe com a mesma transição curta do carrossel, desativada quando o visitante prefere movimento reduzido. Cores/imagens e tamanhos acompanham o visual de variantes do tema, e os arredondamentos seguem as superfícies e botões configurados.

Mover o vídeo flutuante

Arraste o vídeo flutuante com o mouse ou com o dedo para afastá-lo do conteúdo. Ao soltar, ele se encaixa na lateral mais próxima, mantendo a altura escolhida dentro da tela. Um clique ou toque curto abre o player. A posição é temporária na página e não altera a configuração do editor.

Personalizar o widget

O editor oferece ativação, formato (círculo, stories ou quadrado), lado inicial e tamanho compacto ou padrão. Padrão: 144px no computador e 104px no celular; compacto: 112px e 88px. Stories preserva 9:16. Cores acompanham o tema e espaçamentos são controlados pelo componente. À direita, a posição inicial deixa espaço para o botão de contato. O visitante sempre pode arrastar; a posição manual é temporária.

Vídeo flutuante na home

Na página inicial, adicione a seção Vídeo flutuante, disponível na categoria de mídia. É permitido um flutuante por home. Configure um link público do YouTube ou Vimeo, uma capa opcional, o nome acessível, o formato (círculo, stories ou quadrado), tamanho (compacto ou padrão) e lado inicial.

Esta versão é informativa: não vincula produtos nem mostra formulário de compra. A posição da seção na lista não muda a posição do widget na tela. O visitante pode arrastar para a outra lateral, fechar o widget ou abrir o vídeo. A prévia começa sem som; os controles do provedor ficam disponíveis no player. Movimento reduzido impede a reprodução automática.

Sem vídeo configurado, a loja não mostra o widget; o editor exibe uma orientação. Fechar o widget vale para a página aberta; ao recarregar, ele volta a aparecer. Vídeos privados ou com incorporação desabilitada continuam sujeitos às restrições do provedor.

O vídeo comprável da PDP permanece com sua configuração atual. A seção da home não está disponível em categorias nem substitui os settings da PDP.

Em círculo ou quadrado, a prévia do YouTube usa recorte central para preencher o widget, inclusive com Shorts. Partes das bordas do vídeo podem ficar fora da prévia. O formato stories e o vídeo aberto no modal mantêm seu enquadramento anterior. Faixas pretas gravadas no próprio arquivo podem permanecer.