Un guide étape par étape pour ajouter une bannière vidéo sur le thème Dawn dans Shopify

Si vous avez utilisé Shopify, vous connaissez le thème Dawn.

Il s'agit de l'un des thèmes gratuits les plus populaires auprès des nouveaux entrepreneurs, et d'une option très adaptable à la conception d'une vitrine unique.

Le thème Dawn est fourni avec de nombreux modules, tels que le bloc de téléchargement vidéo standard et une bannière d'image.

Dans ce guide, nous allons vous montrer comment créer une bannière vidéo sur le thème Aube pour attirer l'attention sur votre page d'accueil !

Présentation du thème Aube

Le thème Dawn est un thème gratuit de Shopify qui est utilisé par les détaillants de commerce électronique. Avec un design et des paramètres simples, il reste un choix populaire pour créer un magasin visuellement attrayant et élégant.

Qu'est-ce qu'un arrière-plan/une bannière vidéo et pourquoi devriez-vous en utiliser un sur votre site Web ?

Une bannière vidéo est une zone d'une page web qui présente une vidéo en arrière-plan sur toute la surface, avec d'autres éléments au premier plan, comme des boutons et du texte.

Un module tel que la bannière vidéo du thème Dawn offre de nombreux avantages pour améliorer l'expérience générale des visiteurs du site web. En voici quelques-uns :

1. Des éléments visuels plus intéressants : En ajoutant des vidéos captivantes, le site web devient plus attractif visuellement, ce qui permet d'attirer l'attention des visiteurs.
2. Un contenu dynamique et attrayant : Les vidéos transmettent efficacement l'information. Elles peuvent présenter les caractéristiques d'un produit, montrer comment faire ou raconter l'histoire d'une marque de manière captivante, ce qui permet de maintenir l'intérêt des visiteurs.
3. Augmentation de l'engagement de l'utilisateur : Les vidéos ont le pouvoir de créer une impression durable sur les visiteurs. La combinaison de visuels, de sons et de mouvements attire l'attention et encourage les utilisateurs à aller plus loin.
4. Communication efficace de la marque : Un arrière-plan ou une bannière vidéo peut communiquer le message de la marque aux clients. Il permet aux entreprises de mettre en avant leur offre de services uniques, de présenter leurs produits ou services et d'établir une identité de marque forte.

En optimisant le potentiel de la vidéo dans la conception de votre site web, vous pouvez rendre votre site plus attractif et augmenter les ventes.

Guide étape par étape pour ajouter un arrière-plan/une bannière vidéo au thème Dawn

Il y a en fait quatre façons d'ajouter une bannière vidéo au thème Dawn (qui ne sont pas toutes excellentes) :

1. Convertir la vidéo au format vidéo/image WebP.
2. Ajuster le code Shopify pour une bannière d'image normale, afin qu'il soit compatible avec la vidéo.
3. Convertir la vidéo au format GIF.
4. Télécharger simplement une vidéo dans le bloc Video de Shopify, sans se de la présence d'éléments au premier plan (il ne s'agirait donc pas d'une véritable bannière).

Il n'est pas très difficile de modifier le code de Shopify pour obtenir une image de bannière standard, mais le processus est trop long si vous avez accès à un format de fichier tel que WebP.

Les GIF diminuent considérablement la qualité de la vidéo, et l'option 4 ne permet pas d'obtenir une véritable bannière vidéo.

Par conséquent, nous vous recommandons de convertir le format vidéo dont vous disposez (.mp4, .mov, .wmv) au format WebP.

Le format WebP associe les avantages des images JPEG haute résolution, des vidéos et des GIF, en ce sens qu'il permet de produire de belles vidéos animées sans les rendre trop volumineuses et sans perdre trop de résolution.

Vous pouvez également télécharger des vidéos/images au format WebP dans une bannière d'images Shopify.

Voici comment procéder :

Étape 1 : prenez votre vidéo et convertissez-la en fichier WebP Format

Il existe différents convertisseurs gratuits de « vidéo vers WebP » en ligne. Essayez une recherche en ligne ou utilisez l'un des convertisseurs que nous avons testés :

• Ezgif
• Convertisseur MC
• MP4.à

Téléchargez votre vidéo sur l'outil de conversion gratuit, puis choisissez de la convertir au format WebP. Enregistrez le nouveau fichier sur votre ordinateur.

Étape 2 : Trouvez le thème Dawn dans Shopify

Accédez à « Boutique en ligne » > « Thèmes ».

Si vous ne l'avez pas déjà, installez le thème Dawn. Sinon, vous devriez trouver le thème Dawn désigné comme le « Thème actuel » de Shopify. Cliquez sur le bouton « Personnaliser » pour continuer.

Étape 3 : Ajouter et sélectionner le bloc de bannière d'image

Le bloc « Image Banner » est ajouté par défaut dans le thème Dawn. Ainsi, vous devriez pouvoir cliquer sur ce module pour ouvrir ses paramètres dans le panneau de gauche.

Il est également possible de cliquer sur la bannière d'image elle-même, dans l'aperçu visuel à droite. Utilisez le lien « Ajouter un bloc » si vous devez insérer la « bannière d'image » à partir de zéro.

Étape 4 : Téléchargez le fichier vidéo WebP

Cliquez sur le bouton « Sélectionner une image » dans la section « Première image ».

Cette fonction permet de charger des images dans la médiathèque de votre magasin. Il est également possible de coller des URL de vidéos, mais nous utiliserons la fonctionnalité de téléchargement.

Cliquez sur le bouton « Ajouter des images » et sélectionnez le fichier WebP que vous avez créé précédemment.

Cochez le nouveau fichier téléchargé, puis cliquez sur le bouton « Terminé ».

Le fichier vidéo WebP est alors inséré dans la bannière d'image, ce qui vous permet de modifier le contenu au premier plan. Cliquez sur « Enregistrer ».

Félicitations, vous avez ajouté avec succès une bannière vidéo au thème Dawn !

Étape 5 : prévisualiser la vidéo

Mais attendez, il est conseillé de prévisualiser la vidéo sur le frontend pour s'assurer qu'elle a été bien réalisée, qu'elle fonctionne sans problème et qu'elle a la résolution appropriée.

De retour sur l'écran principal du tableau de bord, cliquez sur l'icône représentant un globe oculaire pour « Afficher votre boutique en ligne ».

Cette icône se trouve à côté de « Boutique en ligne », sous la section « Canaux de vente ».

Succès!

Personnalisez la bannière vidéo de votre thème Dawn pour qu'elle soit unique

La personnalisation permet de s'assurer que votre vidéo correspond parfaitement à votre marque et à l'esthétique de votre boutique. Alors, retroussons nos manches et plongeons dans cette expérience !

Vous devez toujours sélectionner l’image de la bannière pour voir ses paramètres. Vous pouvez alors modifier l'opacité de l'image superposée et la hauteur de la bannière.

Vous pouvez ensuite modifier la position du contenu du bureau, en changeant l'emplacement du texte superposé.

Le déplacement du contenu et de la position des boutons permet d'afficher le texte et le bouton au-dessus d'une zone de la vidéo où ils sont les plus visibles.

Pour une personnalisation plus détaillée, vous avez accès à une section « CSS personnalisé ».

Et bien, il est possible de sélectionner le texte du contenu ou le bouton pour modifier leur contenu et leur présentation sûre.

Conseils pour optimiser votre fichier vidéo afin qu'il soit le plus rapide et le plus compatible possible

Une vidéo spectaculaire ne sert à rien si elle ralentit votre site ou si elle ne s'affiche pas correctement sur certains appareils. C'est pourquoi l'optimisation de votre fichier vidéo pour une vitesse et une compatibilité optimales est une étape essentielle.

Dans cette section conseils, nous allons vous donner quelques pratiques pour vous assurer que votre contenu vidéo est bien optimisé en vue d'un chargement efficace et d'une visualisation sur tous les appareils.

• Utilisez des formats de fichiers vidéo (comme WebP) qui sont largement compatibles avec la plupart des navigateurs web.
• Gardez la taille du fichier vidéo aussi petite que possible. Le format WebP fait un excellent travail de compression vidéo sans perte de qualité.
• Définissez le rapport hauteur/largeur de la vidéo de manière à ce qu'elle s'adapte à la taille de l'écran.
• Optez pour une vidéo dont les couleurs et les contrastes sont équilibrés et qui reflètent la personnalité du magasin.

Solution aux problèmes courants liés à l'ajout d'un arrière-plan ou d'une bannière vidéo au thème Dawn

Parfois, même si vous avez été très méticuleux, des problèmes peuvent survenir lors de l'ajout d'une bannière vidéo au thème Dawn. Voici quelques conseils de dépannage en cas de problème :

Problèmes d'incompatibilité

Essayez de convertir la vidéo dans un format de fichier compatible tel que WebP ou utilisez le lien d'intégration de la vidéo.

La taille de la vidéo est trop grande

Découpez la vidéo ou comprimez-la pour réduire la taille du fichier tout en préservant la qualité.

La lecture automatique de la vidéo n'est pas possible

Vérifiez que vous avez activé l'option « lecture automatique » dans les paramètres du thème.

Notre conclusion sur l'ajout d'une bannière vidéo dans le thème Dawn

En suivant notre guide étape par étape et nos de dépannage, vous devriez être en mesure d'ajouter facilement une bannière vidéo du thème Dawn sur Shopify.

Qu'en pensez-vous ?

Faites-nous savoir dans les commentaires si vous avez réussi à ajouter une bannière vidéo sur le thème Dawn !