Como adicionar banner de vídeo temático do Shopify ou seção de plano de fundo

21 de fevereiro de 2022

Compatibilidade: Todos os temas do Shopify

Shopify é uma plataforma de comércio eletrônico poderosa que permite que você personalize sua loja online como quiser. Uma maneira de destacar sua loja é adicionar uma seção de banner de vídeo cativante à sua página inicial. Neste tutorial, vamos nos concentrar em adicionar uma seção de banner de vídeo ao tema Dawn no Shopify. Também discutiremos a importância de usar seu próprio vídeo para obter autenticidade e forneceremos dicas sobre como lidar com proporções de vídeo.

Adicione um banner de vídeo à sua página inicial: adicionar um banner de vídeo à página inicial da sua loja Shopify pode fazer uma diferença significativa na maneira como você exibe seus produtos ou marca. Embora existam vários temas disponíveis no Shopify, abordaremos especificamente o tema Dawn para este tutorial.

Esteja atento às proporções do vídeo: ao enviar seu vídeo, é essencial estar atento à proporção do vídeo, pois tanto a altura quanto a largura são importantes quando se trata de como ele aparece na sua página inicial. A proporção do vídeo determina como ele se ajusta à seção designada do banner.

Aqui estão algumas dicas para manter em mente:

Proporção de aspecto: Uma proporção de aspecto de 16:9 é uma escolha comum para vídeos, pois se ajusta bem à maioria das dimensões da tela sem distorção. No entanto, a proporção ideal pode variar dependendo do design específico do seu tema.
Resolução: certifique-se de que seu vídeo tenha alta resolução para manter a qualidade. A resolução recomendada do Shopify para banners de vídeo é 1920 x 1080 pixels.
Formato de arquivo: Shopify oferece suporte a vários formatos de arquivo de vídeo, incluindo MP4 e MOV. Certifique-se de que seu vídeo esteja em um formato compatível.
Duração do vídeo: mantenha seu vídeo curto e envolvente. Os compradores tendem a perder o interesse em vídeos longos. Apontar para uma duração de cerca de 15 a 30 segundos.

Você pode verificar a loja de demonstração aqui . Senha: made4uo

O que você está comprando:

Banner de vídeo de largura total
Funciona SOMENTE em vídeos próprios
Opções para reprodução automática e loop
Nenhum botão para clicar para jogar

O que torna nosso código melhor:

Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
Não deixamos nem adicionamos códigos para anunciar em nosso site
Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Você precisa ir ao editor de código. Na sua loja de administração, clique em Loja Online > Temas > Ações > Editar código.

2. Abra a pasta Seções e crie uma nova seção. Nomeie-o como quiser e substitua o código padrão pelo código abaixo. Clique em SALVAR.

 < div class = "videoBannerContainer" >
 < vídeo 
{ % se seção. configurações . Reprodução automática % }
 reprodução automática silenciada
 { % fim se % }
 { % se seção. configurações . laço % }
 laço
 { % fim se % }
 jogar online
 nenhum 
>
 < fonte src = " {{section.settings.video_url}} " type = "video/mp4" >
 Seu navegador não é compatível para reproduzir o vídeo !
 </ vídeo >
 </div> _ _
 <estilo> _
 . videoBannerContainer {
 largura : 100 %; 
exibição : flexível ;
 estouro : oculto ;
 }
 . videoBannerContainer > vídeo {
 largura : 100 %;
 altura : automático ;
 }
 </ estilo >
 { % esquema % }
 { 
"nome" : "Banner de vídeo" ,
 "predefinições" : [
 {
 "nome" : "Banner de vídeo"
 }
 ] ,
 "configurações" : [
 {
 "tipo" : "caixa de seleção" , 
"id" : "reprodução automática" ,
 "label" : "Reprodução automática" ,
 "padrão" : verdadeiro ,
 "info" : "O vídeo deve estar silenciado para ter reprodução automática"
 } ,
 {
 "tipo" : "caixa de seleção" , 
"id" : "loop" ,
 "label" : "Vídeo em loop" ,
 "padrão" : falso
 } ,
 {
 "tipo" : "texto" ,
 "id" : "url_do_vídeo" , 
"label" : "URL do vídeo" ,
 "info" : "Cole o link do seu arquivo."
 }
 ]
 }
 { % termina o esquema % }