FR

Comment intégrer une vidéo YouTube dans Shopify

Comment ajouter une vidéo YouTube à une page produit ou une section de thème Shopify à l'aide d'une section Liquid personnalisée ou d'un bloc de contenu HTML.

Shopify ne propose pas de bouton YouTube en un clic sur tous les thèmes, mais ajouter une vidéo reste simple une fois que l’on sait où placer le HTML.

Méthode 1 : une section Liquid personnalisée (thèmes Online Store 2.0)

La plupart des thèmes Shopify actuels prennent en charge les sections Liquid personnalisées, qui acceptent du HTML brut :

  1. Dans l’éditeur de thème Shopify, ajoutez une nouvelle section et choisissez « Liquid personnalisé ».
  2. Construisez votre code d’intégration avec le générateur de code d’intégration, en activant le conteneur responsive pour qu’il s’adapte aux largeurs de page flexibles de Shopify.
  3. Collez le code généré dans le champ de contenu de la section Liquid personnalisée.
  4. Enregistrez et prévisualisez la page.

Méthode 2 : un bloc de texte enrichi ou HTML sur une description de produit/page

Pour une description de produit ou une page standard, basculez l’éditeur de description vers « Afficher le HTML » (généralement une petite icône <> au-dessus du champ de texte) et collez le code d’intégration directement dans la source HTML, plutôt que dans l’éditeur visuel, afin que les balises iframe ne soient pas échappées.

Le rendre responsive dans la mise en page de Shopify

Les largeurs de page varient selon le thème et les réglages de section sur Shopify, donc utilisez toujours un embed responsive (en pourcentage) plutôt qu’une taille fixe en pixels. Sinon, la vidéo peut soit déborder d’une colonne étroite sur mobile, soit laisser un espace blanc disgracieux dans une colonne large.

Problèmes courants

Si l’embed n’apparaît pas après l’enregistrement, vérifiez d’abord que vous avez collé le code dans un champ compatible HTML (Liquid personnalisé ou la vue source HTML) plutôt que dans l’éditeur de texte enrichi classique, qui peut supprimer entièrement les balises iframe. Vérifiez aussi que votre thème n’applique pas de lazy-loading à des sections entières d’une façon qui entre en conflit avec l’attribut loading=”lazy” propre à l’iframe ; dans la plupart des thèmes, les deux fonctionnent bien ensemble.