Documentação / Videocommerce / Vídeo shoppable

Vídeo shoppable

A função de conversão do módulo: transformar o story em ponto de venda. O cliente assiste, escolhe o tamanho e compra — tudo dentro do vídeo, sem abrir nova aba.

Associar produtos a um item

  1. Abra o item no editor do slider

    Na aba Stories, em cada item do vídeo, clique em 🛒 Associar produto.

  2. Busque e selecione

    Encontre o produto pelo nome e selecione.

  3. Adicione até 4 produtos

    Repita para adicionar até 4 produtos por item — ideal para montar um look completo.

  4. Salve o slider

    O botão de compra já aparece no player.

Como o cliente compra

sualoja.com.br — player de stories
PMG
Monte o look · 3 peças
Adicionar ao carrinho — R$ 289,90
Player shoppable em tela cheia: variação no topo, look na base, botão de compra. As telas podem variar conforme a versão.

No player em tela cheia:

  • Produto simples — o botão exibe “Adicionar ao carrinho — R$ X”. Um toque adiciona ao carrinho e o mini-carrinho abre na hora.
  • Produto com variação (tamanho, cor) — ao ativar o produto, os tamanhos aparecem no topo do player. O cliente escolhe a variação e o botão na base mostra o preço e conclui — sem sair do vídeo, sem abrir nova aba.
  • Look com vários produtos — uma tira de miniaturas (“MONTE O LOOK · N peças”) aparece na base. Tocar em uma miniatura troca o produto ativo.

O botão de compra pode ser ocultado tocando no vídeo — e reaparece ao tocar novamente.

Integração com o carrinho

A adição usa o carrinho nativo do WooCommerce. Em lojas com FunnelKit Cart, o carrinho lateral abre automaticamente ao adicionar pelo vídeo — a experiência “compra sem sair do vídeo” acontece sem configuração extra.

Os seletores de tamanho/cor são os do próprio tema. Os dados de variação só carregam quando o cliente interage com o produto — zero custo no carregamento da página.

Cores do player

Na aba Aparência, você personaliza o visual do player de stories:

  • Cor de destaque — usada no botão de comprar, no tamanho selecionado, na barra de progresso e nos destaques.
  • Cor do texto do botão — o texto e o preço dentro do botão. Use branco quando a cor de destaque for escura, para manter a legibilidade.

As cores são por loja: cada site pode ter a identidade da própria marca. Basta escolher no seletor de cor e salvar.

Documentação do Videocommerce · escrita com base na versão 1.6.2. As telas ilustradas podem variar conforme a versão instalada na sua loja.