PT

Como Incorporar um Vídeo do YouTube no Shopify

Como adicionar um vídeo do YouTube a uma página de produto ou secção de tema do Shopify usando uma secção Custom Liquid ou um bloco de conteúdo HTML.

O Shopify não tem um botão de YouTube de um clique em todos os temas, mas adicionar um vídeo é simples assim que se sabe onde colocar o HTML.

Método 1: uma secção Custom Liquid (temas Online Store 2.0)

A maioria dos temas atuais do Shopify suporta secções Custom Liquid, que aceitam HTML em bruto:

  1. No editor de temas do Shopify, adicione uma nova secção e escolha “Custom Liquid”.
  2. Construa o seu código de incorporação com o gerador de código de incorporação, ativando o contentor responsivo para que se adapte às larguras flexíveis das páginas do Shopify.
  3. Cole o código gerado no campo de conteúdo da secção Custom Liquid.
  4. Guarde e visualize a página antecipadamente.

Método 2: um bloco de texto rico ou HTML numa descrição de produto/página

Para uma descrição de produto ou uma página normal, mude o editor de descrição para “Mostrar HTML” (normalmente um pequeno ícone <> acima do campo de texto) e cole o código de incorporação diretamente na fonte HTML, em vez do editor visual, para que as tags do iframe não sejam convertidas em texto de escape.

Torná-lo responsivo dentro da disposição do Shopify

As larguras de página do Shopify variam consoante o tema e as definições da secção, por isso use sempre uma incorporação responsiva (baseada em percentagem) em vez de um tamanho fixo em píxeis. Caso contrário, o vídeo pode transbordar uma coluna estreita em dispositivos móveis ou deixar um espaço em branco desajeitado numa coluna larga.

Problemas comuns

Se a incorporação não aparecer depois de guardar, verifique se colou o código num campo que aceita HTML (Custom Liquid ou a vista da fonte HTML) e não no editor de texto rico simples, que pode remover completamente as tags de iframe. Confirme também que o seu tema não faz lazy load de secções inteiras de uma forma que entre em conflito com o próprio atributo loading=”lazy” do iframe; na maioria dos temas, os dois funcionam bem em conjunto.