O Guia Completo Shopify + Swarmify para Hospedagem de Vídeos de Comércio Eletrônico

O Swarmify ajuda você a acelerar vídeos em sua loja virtual da Shopify para aumentar o envolvimento do usuário e aumentar sua receita.

Você sabia que as páginas de produtos com conteúdo de vídeo apresentam um aumento de 80% nas conversões ? Isso mesmo, seus clientes adoram ver o que estão recebendo.

Você pode fazer upload das melhores imagens de produtos, escrever descrições irresistíveis e reunir críticas brilhantes sobre seus produtos, mas o conteúdo de vídeo leva ao ponto em segundos.

Você pode demonstrar facilmente como seu produto funciona e usar depoimentos em vídeo para mostrar por que as pessoas estão elogiando seu produto. O ponto é que o marketing de vídeo é uma tática poderosa para aumentar as vendas em sua loja de comércio eletrônico da Shopify.

E na postagem do blog de hoje, mostramos exatamente como usar Swarmify e Shopify para fornecer vídeos de início instantâneo, sem buffer e incrivelmente rápidos para seus usuários. Configurar tudo é tão fácil quanto A, B, C, então não se preocupe se você não for experiente em tecnologia :)

Com o Swarmify, você desfruta de uma melhor experiência do usuário, taxas de conversão mais altas e, por fim, mais vendas. Por outro lado, vídeos lentos carregados de links de terceiros (por exemplo, YouTube) apenas mancharão sua marca, roubarão seu tráfego e afastarão os usuários.

Agora você não quer isso, e nem nós. Sem mais delongas, vamos começar com algumas informações básicas, então estamos na mesma página.

O que é Shopify?

Shopify é uma plataforma de comércio eletrônico líder do setor. Eles oferecem uma tonelada de ferramentas para criar uma loja online e começar a trabalhar.

Seja você iniciante ou profissional, Shopify torna extremamente fácil começar a vender, seja online ou em sua loja física.

Criar uma loja online da Shopify é coisa de alunos da quarta série. A plataforma vem com um construtor de lojas fácil e vários modelos prontos que você pode personalizar até cair.

Além disso, eles oferecem um editor de produtos fácil de usar, permitindo que você crie, publique e gerencie seu inventário como um chefe. Você pode até otimizar seus produtos para os mecanismos de pesquisa graças aos recursos de SEO integrados.

Além disso, você tem todas as ferramentas necessárias para processar e enviar pedidos sem suar a camisa. Além disso, eles oferecem um conjunto de ferramentas de marketing para "...criar, executar e analisar campanhas de marketing digital..." sem adivinhação.

Além de tudo, você tem vários gateways de pagamento à sua disposição, o que facilita a coleta e o processamento de pagamentos.

Eles começam com um teste de 14 dias, sem necessidade de cartão de crédito, para testar as águas. Para desbloquear todos os recursos da Shopify, você deve se inscrever em um plano pago.

Principais recursos da Shopify

Shopify é a plataforma de comércio eletrônico preferida de milhões de usuários, graças a recursos como:

• Editor de sites fácil de usar para criar lojas online como um desenvolvedor web experiente
• Mais de 70 temas que você pode personalizar para se adequar à sua loja
• Ponto de Venda (POS), para que possa vender na sua loja ou no seu smartphone/dispositivo móvel
• Integração sem esforço do Oberlo para empresas de envio direto
• Construtor de loja online
• Vários processadores de pagamento
• Design responsivo e otimizado para dispositivos móveis
• Fotos gratuitas
• Edite facilmente HTML, CSS e JS da sua loja
• Nome de domínio personalizado, por exemplo, swarmify.com
• Plataforma de blogs completa, o que é ótimo para marketing de conteúdo
• Certificado SSL gratuito
• Recuperação de checkout abandonado
• Taxas de envio flexíveis e impostos automáticos
• Múltiplos idiomas
• Créditos de anúncios do Google de US$ 100 se você gastar US$ 25 em uma nova conta do Google Advertising
• Integração perfeita de mídia social
• Largura de banda ilimitada
• Suporte 24 horas por dia, 7 dias por semana
• E muito mais!

Se você já usa Shopify, não precisa que eu explique por que é uma excelente plataforma de comércio eletrônico. Se você é um novato total com zero habilidades tecnológicas, nunca poderá errar com Shopify como seu provedor de comércio eletrônico.

Para adoçar o negócio, Shopify oferece planos acessíveis a partir de apenas US $ 9 por mês. Se você está começando um novo negócio, o plano Basic Shopify (US$ 29/mês) oferece uma excelente relação custo-benefício.

Dito isso, o que é Swarmify?

O que é Swarmify?

A menos que você seja totalmente novo aqui, o Swarmify é um serviço de aceleração de vídeo único que ajuda você a fornecer vídeos 12x mais rápidos para seus usuários.

Usamos a mesma tecnologia que os gigantes de streaming Netflix e Hulu usam para oferecer experiências de vídeo sem atrasos e sem buffer.

Se você usa (ou planeja usar) vídeos em sua loja da Shopify, oferecemos exatamente o que você precisa para aumentar a velocidade de carregamento de seus vídeos.

Além disso, ajudamos você a oferecer experiências de vídeo totalmente personalizadas para seus compradores.

Em vez de usar o player de vídeo do YouTube que vem com a marca do YouTube, links e vídeos recomendados de seus concorrentes, oferecemos nosso player SmartVideo.

Nosso reprodutor de vídeo revolucionário não contém nenhuma marca ou links. É 100% organizado e você pode personalizá-lo para combinar com sua loja da Shopify em minutos.

É por isso que muitos empreendedores como você escolhem o Swarmify SmartVideo para suas lojas online da Shopify.

Principais recursos do Swarmify

Somos líderes na área e oferecemos recursos para corresponder à nossa reputação.

• Largura de banda ilimitada , você sabe, assim como Shopify :)
• Armazenamento ilimitado
• Rede de entrega de conteúdo de vídeo SmartCDN - Seus compradores desfrutam de vídeos 12x mais rápidos do que a média do setor, não importa onde estejam
• Conversões automáticas do YouTube - Se você já usa o YouTube e tem alguns vídeos do YouTube em sua loja Shopify, o SmartVideo converte todos os vídeos automaticamente e os veicula a partir de nossas pilhas super rápidas e CDN
• Capacidade de hospedar vídeos em várias plataformas como YouTube, Wistia, Vimeo, Google Drive, Amazon S3, pCloud e assim por diante. Seus clientes não perceberão a diferença porque veiculamos todos os seus vídeos em nosso player de vídeo organizado
• Excelente codificação de vídeo para experiências de visualização otimizadas em todos os dispositivos
• Otimização de streaming contínuo - Durante a reprodução, o SmartVideo monitora continuamente a experiência de vídeo de cada usuário individual e evita falhas antes que elas ocorram.
• Reprodução sem travamento - O SmartVideo oferece 8x menos buffering durante a reprodução do que outros players em média. Agora, seus clientes não precisam esperar que os vídeos do produto sejam armazenados em buffer. Você tem nosso EdgeAI para agradecer por isso :)
• Instalação fácil
• Suporte de primeira classe apoiado por desenvolvedores apaixonados
• E muito mais (Leia mais sobre recursos aqui)

Como empreendedor, você deseja usar vídeos em sua loja virtual da Shopify para melhor retenção de usuários, taxas de conversão mais altas e mais vendas.

E como o marketing de vídeo é desafiador, você precisa de um host de vídeo que facilite seu trabalho, não dificulte.

Entra Swarmify, e você salva o dia. Oferecemos exatamente o que você precisa para oferecer experiências de vídeo rápidas, personalizadas e profissionais aos seus compradores.

Com a reprodução de vídeo rápida e de alta qualidade ao seu lado, vender em sua loja Shopify fica muito mais fácil do que se você estivesse veiculando vídeos diretamente do YouTube, Wistia, Vimeo ou outros sites de hospedagem de vídeo.

Com esse preâmbulo, vamos avançar e integrar o SmartVideo à sua loja Shopify.

Como usar Shopify + SmartVideo para hospedagem de vídeo de comércio eletrônico

Para a seção a seguir, você precisa ter uma loja Shopify funcionando. Se você ainda está molhado atrás das orelhas, aqui está um guia bacana sobre como criar uma loja Shopify.

Além disso, você precisa de uma conta Swarmify pronta. Confira nossos planos de preços acessíveis e escolha o plano perfeito para o seu negócio. Procurando aprender mais? Confira nossa lista crescente de estudos de caso.

Como adicionar um SmartVideo a uma página de produto da Shopify

Na seção "Mídia" da página de administração do seu produto, clique em "Adicionar mídia" e faça upload de um vídeo. Depois que o SmartVideo for instalado em seu site, o vídeo será entregue de nossa rede de entrega global, no entanto, o vídeo ainda será exibido no player de vídeo padrão da Shopify.

Para exibir um vídeo no player SmartVideo, você precisará permitir que o SmartVideo converta automaticamente um vídeo do YouTube ou Vimeo.

Para nosso produto de amostra, peguei emprestado um vídeo de revisão da Unbox Therapy no YouTube.

Então fui em frente e criei um produto de amostra completo com o vídeo do YouTube. Veja como fica em nossa loja de exemplo da Shopify:

Bem legal, certo? Devo admitir que parece bom no começo, mas há alguns problemas.

Em primeiro lugar, há a marca óbvia do YouTube, que pode não se adequar à sua loja Shopify.

Em segundo lugar, o título na parte superior do player de vídeo é um link inteligente que redireciona seus compradores para o YouTube. Quando você trabalha tanto para direcionar o tráfego para seu site, você definitivamente não quer que isso aconteça.

Em terceiro lugar, veja como o player do YouTube fica quando o usuário reproduz e pausa o vídeo:

Olhe para isso; o player do YouTube está repleto de desordem e distrações destinadas a desviar seus visitantes.

Veja a seção "Mais vídeos"?

Essa seção pode mostrar vídeos de seus concorrentes , o que é simplesmente inaceitável. E quando seu comprador compartilha o vídeo com amigos, o link redireciona os usuários de volta ao YouTube, e não à sua loja Shopify!

Se você gosta de usar vídeos de produtos em sua loja da Shopify, pode ver claramente como a hospedagem de vídeos diretamente do YouTube é um problema , mesmo que seja um serviço gratuito.

Ou, como dizem, não há nada como um almoço grátis :)

Basta colocar...

Você não pode projetar essa sensação e aparência profissional com o player de vídeo do YouTube. Além disso, as distrações apenas afastarão seus compradores, resultando em menores taxas de conversão e vendas.

Como adicionar um SmartVideo a uma página padrão da Shopify

Depois que o SmartVideo for instalado, os vídeos do YouTube e do Vimeo serão convertidos automaticamente em seu site, mas a maneira mais simples de adicionar um SmartVideo a uma página normal da Shopify é tirar proveito de uma tag SmartVideo.

Na seção de conteúdo do administrador da sua página, clique no botão "Inserir vídeo" e cole sua tag SmartVideo na caixa de texto.

Após instalar o SmartVideo (como discutiremos na próxima seção), o vídeo ficará visível em sua página:

Agora que você sabe com o que estamos trabalhando, vamos integrar o Swarmify à sua loja Shopify e veja a diferença.

Copie seu snippet de configuração do Swarmify

No momento da redação deste artigo, não temos um aplicativo da Shopify. Isso significa que você deve integrar o Swarmify ao Shopify manualmente. Mesmo assim, o processo é tão fácil quanto A, B, C.

O que fazer?

Faça login no seu painel do Swarmify :

O painel Swarmify é direto e fácil de usar. Não o sobrecarregamos com recursos inúteis. Nós o mantemos magro do jeito que você gosta :)

Em seguida, clique na guia Configuração , conforme mostrado abaixo.

Na próxima tela, escolha se você já possui vídeos do YouTube em sua loja da Shopify e clique em Avançar :

Dica profissional : o melhor é escolher " Sim " para ativar a conversão automática do YouTube. Eu também escolhi " Sim".

Depois disso, escolha se você tem vídeos em segundo plano em sua loja da Shopify e clique em Avançar . Não tenho vídeos de fundo, então escolhi " Não :"

Na próxima página, escolha se deseja alterar o esquema de cores do player de vídeo.

Se você deseja alterar o esquema de cores, escolha Sim (1), selecione sua cor personalizada (2) e clique em Avançar (3), conforme destacamos na captura de tela abaixo.

Você está indo fantástico :)

Em seguida, escolha a forma do botão do player de vídeo e clique em Avançar . No momento, temos três opções: Padrão (Hexagonal), Retângulo e Círculo :

Em seguida, escolha se deseja adicionar uma marca d'água personalizada aos seus vídeos e clique no botão Avançar :

Por fim, escolha se deseja ativar anúncios em seus vídeos e clique em Concluir :

Como você provavelmente está adicionando vídeos explicativos aos produtos da Shopify, é melhor ficar sem anúncios.

Após isso, clique em Copiar para a área de transferência , conforme detalhamos abaixo.

Com seu snippet Swarmify copiado, você está pronto para a próxima parte: adicioná-lo à sua loja Shopify.

Adicionando o Swarmify Snippet à Shopify Store

Na seção a seguir, adicionamos o snippet Swarmify que você acabou de copiar para sua loja da Shopify.

Não se preocupe, é simples :)

Faça login no painel da sua loja da Shopify e clique em Loja online no menu de navegação à esquerda:

Em seguida, clique em Temas , como mostramos abaixo.

Depois disso, clique no menu suspenso Ações e selecione Editar código :

Em seguida, clique em {/} theme.liquid :

Role para baixo até ver a seção com outro código JavaScript. Normalmente, começa com a tag <script> . Aqui está uma captura de tela para ajudar:

Em seguida, cole o Swarmify Snippet que você copiou anteriormente acima da tag <script> e clique em Salvar , conforme mostrado abaixo.

E é isso!

Sua loja Shopify agora está conectada ao Swarmify!

Incrível, certo?

Obrigado por ser tão paciente. Eu não queria pular nenhuma etapa porque é importante acertar desde o início :)

Agora, você pode continuar enviando vídeos para o YouTube e adicioná-los à sua loja da Shopify. O Swarmify codificará, converterá e exibirá todos os vídeos em um player de vídeo bonito e organizado.

Você sabe, algo assim:

Sem marca do YouTube, sem links e sem distrações - apenas um player de vídeo organizado que fica ótimo mesmo quando o usuário reproduz e pausa o vídeo :)

N/B : Os vídeos levam tempo para serem otimizados dependendo da duração. Meu vídeo de amostra tinha 3,58 minutos, então esperei cerca de quatro minutos :)

E como eu sabia que o vídeo estava totalmente otimizado? Em seu player de vídeo, você verá Video Acceleration: ON , conforme mostrado abaixo.

Mesmo vídeo, mesma página - resultados diferentes. Tudo o que poderia desviar seu tráfego se foi.

Puf! Tudo se foi.

Agora você pode manter seus compradores onde você mais precisa deles - nas páginas de seus produtos :)

O vídeo carrega 12x mais rápido que o player médio, e o novo player organizado parece incrível e profissional.

Você não saberia que recebi o vídeo do YouTube se o Unbox Therapy não dissesse: "Por favor, inscreva-se e siga-me pelos links na descrição... blá blá..."

Ele é um cara legal, a propósito, mas espero que você entenda o ponto :)

Personalizando ainda mais o player de vídeo

Temos algumas tags para personalizar ainda mais seu player de vídeo.

N/B : ao contrário do código JavaScript que adicionamos à seção <HEAD> do arquivo {/}theme.liquid , você adiciona as seguintes tags SmartVideo diretamente onde deseja exibir seu player de vídeo. Temos um ótimo exemplo Shopify no final :)

Se você quiser adicionar uma imagem de pôster ou miniatura ao seu vídeo, copie e cole o seguinte código em seu site:

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" poster="path/to/my/image.png" controls></smartvideo>

Notas:

• Substitua " path/to/my/video.mp4" e " path/to/my/image.png" pelos caminhos reais para o vídeo e a imagem do pôster, respectivamente
• Você pode ajustar a largura e a altura do seu player como achar melhor

Para reproduzir automaticamente seu vídeo, use a seguinte tag SmartVideo:

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls muted autoplay></smartvideo>

Dica profissional: a menos que combinado com muted , muitos navegadores restringirão a reprodução automática . Recomendamos usar apenas a reprodução automática em combinação com silenciado . Além disso, adicionar playsinline é essencial para a reprodução adequada no IOS/Safari quando reproduzido automaticamente.

Para dizer ao player de vídeo para iniciar a reprodução com o áudio silenciado, use:

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls muted></smartvideo>

Para fazer um loop em seu vídeo para repetir quando ele terminar, use:

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls loop></smartvideo>

Para impedir que o vídeo seja reproduzido em tela cheia no Safari iOS, use:

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls playsinline></smartvideo>

Para tornar o player não responsivo (largura e altura fixas), remova class="swarm-fluid" da sua tag.

N/B: Se você usa o YouTube como sua fonte de vídeo:

• Altere todos os vídeos de "privados" para "não listados". Dessa forma, o Swarmify pode buscar e processar seus vídeos.
• Use o link de incorporação correto, não o link direto para a página. Como exemplo, use https://www.youtube.com/embed/wBp0Rb-ZJak (bom) em vez de https://www.youtube.com/watch?v=wBp0Rb-ZJak (ruim) .

Além disso, não remova os controles incluídos em cada tag SmartVideo. Se você fizer isso, seu usuário não terá os botões para reproduzir seu vídeo.

Um exemplo funcional do Shopify

Para ilustrar como usar as tags SmartVideo na Shopify, adicionarei um vídeo a uma nova página da Shopify.

Você também pode adicionar tags SmartVideo às postagens do blog da Shopify - o procedimento permanece o mesmo.

Estou usando o mesmo vídeo do Unbox Therapy. Lembre-se de usar o código de incorporação e não o link direto.

Assim, minha tag SmartVideo pronta se parece com isso:

 <smartvideo src="https://www.youtube.com/embed/MPzBcvGtry8" width="1280" height="720" class="swarm-fluid" controls muted autoplay></smartvideo>

Em seguida, faça login no admin da sua loja da Shopify e navegue até Loja virtual > Páginas e adicione uma nova página :

Observe que a minha é uma loja totalmente nova, sem páginas :) Se você tivesse páginas existentes, veria algo assim:

Não importa, você pode editar uma página existente ou clicar em Adicionar página para adicionar uma nova. Fazer isso leva você ao editor de página.

Em seguida, adicione um título à sua página e alterne para HTML, conforme mostrado abaixo.

Em seguida, copie e cole sua tag SmartVideo e clique em Salvar , conforme destacamos abaixo:

Agora, se você visualizar sua página no front-end, verá:

Nosso vídeo de teste está lá - completo com aceleração de vídeo em segundo plano. O vídeo começou a ser reproduzido automaticamente, pois minha tag SmartVideo inclui reprodução automática e foi silenciada . Você também pode ver todos os controles lá.

E isso é tudo para usar as tags SmartVideo para personalizar ainda mais seu player de vídeo. Combine diferentes tags para alcançar os resultados desejados.

Palavras finais

Swarmify é o novo padrão para hospedagem de vídeo. Junte nossa tecnologia à Shopify e você terá as ferramentas para oferecer experiências de vídeo fantásticas aos seus compradores ansiosos.

Fornecemos experiências de vídeo rápidas, personalizáveis ​​e de alta qualidade para uma ampla variedade de empresas, assim como a sua. É a nossa missão abrangente, e estamos melhorando a cada dia.

Não acredite em nossa palavra, confira nossos estudos de caso e descubra como outras empresas estão arrasando com a hospedagem de vídeo Swarmify para comércio eletrônico.