Galeria de vídeos

A seção Carrossel de vídeos compráveis reúne cards verticais com capa, nome e preço do produto. Ao abrir um card, o visitante pode assistir ao vídeo, escolher variantes e quantidade e adicionar o produto ao carrinho. O vínculo de produto é opcional para vídeos externos, permitindo também uma galeria editorial.

Configurar no Brand Editor

1. Abra a home ou um modelo de página de produto e selecione Adicionar seção → Carrossel de vídeos compráveis.
2. Adicione blocos de título e texto conforme necessário. Configure as cores de fundo/texto, a quantidade visível no computador e o espaçamento vertical. Escolha alinhamento à esquerda ou centralizado (centralização apenas quando há espaço livre, preservando a rolagem). Arraste a seção para a posição desejada.
3. Em cada bloco Vídeo com produto, informe o ID do produto quando quiser associar um item do catálogo. Copie apenas o número do endereço de edição desse produto no administrador. Nome, preço, disponibilidade e variantes são consultados no catálogo; não precisam ser cadastrados novamente.
4. Escolha a origem: Vídeo nativo do produto usa o primeiro vídeo enviado às mídias desse produto; Vídeo externo permite colar um link de YouTube ou Vimeo exclusivo do card. O campo de link aparece somente nessa origem.
5. Opcionalmente, selecione uma Imagem de capa. Sem ela, o tema utiliza a miniatura do vídeo ou a imagem do produto.
6. Reordene os blocos para definir a sequência. A seção aceita até 12 cards. Salve e confira o preview.

O seletor de grupos de produtos do editor não oferece seleção individual nessa versão; por isso o vínculo usa o ID. Ele permanece estável quando o nome ou a posição do produto no catálogo muda. O conteúdo textual segue o tratamento de idiomas do Brand Editor.

O preset começa com três blocos vazios. Cards sem vídeo compatível mostram uma instrução no editor e ficam ocultos na loja. Uma seção sem cards válidos também fica oculta na loja.

Reprodução e compra

A galeria mostra um card por produto, na ordem da primeira ocorrência. Blocos com o mesmo ID do produto formam uma sequência de stories; vídeo nativo e externo podem participar do mesmo grupo. O primeiro bloco define capa, título e configuração de compra. Com “Agrupar vídeos do mesmo produto” ativado, vídeos idênticos no mesmo produto são deduplicados. Desative para mostrar cada bloco como um card independente. Vídeos externos sem produto permanecem independentes.

No celular, deslize a galeria horizontalmente; no computador, use também as setas. O player preserva o produto escolhido: apenas setas, teclas esquerda/direita ou gesto horizontal trocam de produto. Barrinhas aparecem somente quando o produto tem vários stories e permitem escolher um deles. Vídeos nativos e YouTube avançam automaticamente apenas dentro do grupo. O último vídeo mantém o produto aberto; “Repetir vídeos ao terminar” reinicia a sequência do mesmo produto. Abrir a compra interrompe o avanço automático até uma nova escolha de produto, mesmo após recolher o formulário. Vimeo mantém os controles do provedor; o tema acompanha o progresso, a retomada e o fim de cada story pelo player. Gestos sobre iframes externos não são interceptados. A seleção de variantes permanece associada ao produto enquanto a página estiver aberta.

As prévias dos cards visíveis podem reproduzir sem som, com carregamento sob demanda. Desative “Reproduzir prévias sem som” para mostrar apenas capas. Abrir um player suspende as prévias. O vídeo nativo começa sem som quando o navegador permite; YouTube também inicia sem som por padrão. Preferências de movimento reduzido desativam o início automático. Fechar ou trocar o vídeo encerra o player anterior. Vídeos nativos e YouTube retomam a posição ao voltar enquanto a página permanece aberta; vídeos concluídos reiniciam. A escolha explícita de som é preservada durante a página aberta e compartilhada com o modal flutuante; a prévia flutuante continua silenciosa. Escape fecha o modal e devolve o foco ao card.

A ficha compacta fica sobreposta na base do vídeo. Toque nela para abrir ou recolher as variantes e quantidade com uma transição curta, respeitando movimento reduzido. Variantes e quantidade usam os componentes do quickshop; abrir as opções pausa o vídeo nativo. A compra usa o carrinho do tema. Combinações sem estoque bloqueiam o botão, e a navegação fica bloqueada enquanto uma adição está em andamento. Preço e estoque são validados novamente pela plataforma na compra.

Kits e assinaturas direcionam à página completa. Para produtos que exigem campos personalizados ou aplicativos na PDP, desative Permitir compra no vídeo no card: o vídeo continua disponível com o link Ver detalhes do produto. O tema não consegue identificar automaticamente todas as exigências de aplicativos externos.

Na PDP, o carrossel pode coexistir com o vídeo comprável flutuante. Abrir o carrossel oculta e pausa o flutuante. As variantes do carrossel não alteram a seleção do produto principal.

Limites desta versão

• Até um produto opcional por vídeo. “Shop the look” não está incluído.
• Upload nativo é feito nas mídias do produto, não no bloco do carrossel. Não há seletor do segundo vídeo nativo por card.
• Links externos são de YouTube/Vimeo; URL MP4 direta, TikTok e Instagram não são fontes aceitas.
• YouTube usa controls=0 e rel=0, mas título, marca, anúncios e recomendações não podem ser eliminados por completo.
• Vídeos externos precisam permitir incorporação. Restrições, anúncios, cookies e mensagens do player são definidos pelo provedor.
• Falhas do player nativo oferecem nova tentativa; vídeos externos apresentam também as mensagens do próprio provedor. O link para a PDP continua disponível.
• Não há sincronização de progresso de reprodução entre o carrossel, a galeria e o flutuante.

Controles de reprodução

No vídeo nativo, clique ou toque sobre a imagem para pausar e retomar. O ícone central aparece quando pausado, e o volume continua em um botão separado. O controle da imagem também aceita teclado. Vídeos do YouTube usam os controles do próprio player, sem duplicação pelo tema.

Opções da galeria

“Nome do vídeo (opcional)” identifica o vídeo para acessibilidade; não substitui o nome do produto. Na ausência dele, o nome do produto é usado.

“Navegação circular” funciona com pelo menos quatro cards exibidos e conteúdo suficiente para rolagem: a seta retorna do fim ao início (e vice-versa). Não duplica formulários nem cria um loop contínuo com clones. O contador numérico do player foi removido; o progresso aparece somente dentro de grupos com vários stories.

O preset “Vídeos em destaque” oferece fundo claro, texto escuro e quatro blocos para configurar. O preset escuro permanece disponível. Ambos preservam as configurações dos módulos já adicionados. O conteúdo da seção usa grupos, títulos e textos nativos do editor, como as listas de produtos do tema.

A opção Exibir numeração dos vídeos controla os números nos cards e vem ativada por padrão. O ícone decorativo de play foi removido; clicar no card continua abrindo o player.

Controle das prévias e provedores

Cada card tem um botão Reproduzir/Pausar no canto superior direito, com fundo translúcido e círculo de 36px (área de interação de 44px). Ele controla somente a prévia, sem abrir o player de compra. O restante do card abre o player. A pausa individual permanece ao navegar pelo carrossel; enquanto o player da prévia estiver carregado, retoma do mesmo ponto. Ao sair da área visível, o player é descarregado: a pausa permanece, mas uma reprodução posterior pode reiniciar. O controle coletivo “Pausar prévias” foi removido. Com movimento reduzido ou reprodução automática desativada, o visitante ainda pode iniciar cada prévia pelo botão.

Vimeo também integra progresso, retomada e pausa ao abrir as opções de compra. Vídeos externos mantêm os controles do próprio provedor; restrições de privacidade e incorporação continuam valendo.

O preset Vídeos em destaque herda as cores da loja quando as cores locais não estão preenchidas. O preset escuro mantém cores explícitas. Configurações já salvas não são substituídas.

Navegação e acesso à compra

A galeria usa o Swiper do tema para arraste e transições de 300ms. Quando todos os cards cabem, as setas ficam ocultas e o alinhamento configurado é preservado. Com quatro ou mais cards e espaço para rolagem, a navegação circular retorna à outra extremidade pelas setas; não utiliza clones. A navegação manual mantém a animação mesmo com movimento reduzido, enquanto essa preferência impede o início automático dos vídeos. Cada card mantém seu número durante a navegação, conforme a ordem configurada após o agrupamento.

O resumo do produto oferece a ação terciária Escolher opções para produtos com variantes, ou Comprar para produtos sem variantes. A confirmação continua no formulário. Os tamanhos têm rótulos centralizados e área mínima de 44px de altura e os controles superiores do player usam fundo escuro para permanecer legíveis sobre vídeos claros.

Largura e cards no celular

Em Design, escolha a largura Página (padrão do tema) ou Completa. Na largura completa, o espaçamento horizontal é configurável. Vídeos visíveis no celular aceita 1, 1,5 (padrão) ou 2; controla quantos aparecem por vez, sem limitar o total cadastrado. No computador, Vídeos visíveis no computador permite de 2 a 6, com padrão de 4. Se houver menos vídeos, os cards mantêm o tamanho correspondente à quantidade escolhida e o alinhamento configurado, sem duplicar conteúdo. Com dois cards, o resumo fica compacto e dispensa o ícone da sacola para preservar o preço.

No computador com mouse, o play/pause aparece ao passar pelo card ou ao receber foco por teclado. Quando pausado, permanece visível. Em dispositivos sem hover, permanece visível.

Organização das configurações

• Conteúdo: adicione blocos nativos de título, texto ou grupo antes/depois dos vídeos.
• Disposição: alinhamento, quantidade visível no computador, quantidade visível no celular, agrupamento por produto, numeração e navegação circular.
• Propriedades do vídeo: reprodução das prévias e repetição dos vídeos no player.
• Design: largura da seção e espaçamentos vertical/horizontal.
• Cores: fundo e texto.

A reorganização mantém os IDs, valores padrão e configurações salvas.

A configuração antiga de largura em pixels deixa de ser usada. Valores antigos persistidos não são apagados, mas a galeria passa a usar quatro colunas até que uma quantidade seja escolhida.

Conteúdo e setas

Título e descrição são blocos nativos do editor, com suas próprias opções de tipografia e alinhamento. A galeria aparece na posição do primeiro bloco de vídeo; os demais vídeos compõem essa mesma faixa. Posicione títulos, textos ou grupos antes do primeiro vídeo ou após os vídeos para compor a seção. Os presets incluem um título editável. Os antigos campos fixos de título, texto de apoio e cor de destaque deixam de ser usados; valores já salvos não são apagados.

As setas usam o componente compartilhado das listas de produtos, nas laterais da faixa e com tamanho, cor, ícone e visibilidade definidos pelo tema.