Ajouter des Stories à votre vitrine
Mis à jour aujourd’hui
Ajoutez des Stories de style Instagram à votre vitrine avec le bloc Story, ou commencez plus rapidement à partir du préréglage Stories du bloc Group. Les clients appuient sur un cercle de story pour ouvrir des diapositives d’images ou de vidéos dans un lecteur plein écran qui avance automatiquement.
Les Stories se configurent dans l’éditeur de thème Shopify. Vous créez des pages à partir d’une section qui accepte les blocs de thème, puis vous organisez les blocs à l’intérieur ; ajoutez le bloc Story à ce même type de parent. Consultez l’article Section pour savoir comment fonctionne le parent Section.
Ajouter le bloc Story
Le bloc Story affiche un cercle de story que vous pouvez placer partout où une section accepte les blocs de thème.
Ouvrez le thème POPS dans l’éditeur de thème Shopify, puis ajoutez ou sélectionnez une section qui accepte les blocs de thème, comme Section.
Ajoutez un bloc Story à cette section.
Donnez-lui un titre de Story et définissez une image de couverture — l’image affichée sur le cercle sur lequel les clients appuient.
Commencer à partir du préréglage Stories
Pour voir immédiatement les Stories en fonctionnement, ajoutez un bloc Group et choisissez son préréglage Stories. Celui-ci crée trois blocs Story prêts à l’emploi avec des diapositives imbriquées : Story 1 avec deux diapositives, Story 2 avec trois diapositives et Story 3 avec quatre diapositives.
Ajouter et réorganiser les diapositives d’une Story
Chaque diapositive Story constitue une image de la story. Une story lit autant de diapositives que vous en ajoutez — il n’y a ni minimum ni maximum. Faites glisser les éléments de diapositive vers le haut ou vers le bas pour modifier leur ordre de lecture.
Sélectionnez un bloc Story.
Ajoutez des éléments Diapositive Story pour créer la story. Chaque diapositive constitue une image.
Faites glisser les éléments de diapositive pour définir l’ordre dans lequel ils apparaissent aux clients.
Configurer chaque diapositive
Chaque diapositive Story contient soit une image, soit une vidéo, ainsi que la durée pendant laquelle elle reste à l’écran. Définissez Type de média sur Image ou Vidéo ; le sélecteur de média correspondant au type choisi s’affiche.
Image — choisissez l’image affichée pour cette image.
Vidéo — choisissez la vidéo. Les vidéos sont lues sans son et passent automatiquement à la suite lorsqu’elles se terminent.
Durée — nombre de secondes pendant lesquelles une diapositive d’image reste à l’écran avant de passer à la suivante, de 3 à 15. La valeur par défaut est 5. Les diapositives vidéo utilisent leur propre durée.
Personnaliser le cercle de story
La bordure autour des cercles de story est un paramètre appliqué au niveau du thème, qui concerne tous les blocs Story de la vitrine.
Dans l’éditeur de thème, ouvrez les paramètres du thème, puis recherchez le groupe Story.
Définissez Dégradé de bordure du cercle de story sur une couleur d’arrière-plan ou un dégradé CSS. La valeur par défaut est un dégradé en cinq points allant de l’orange au rose.
Ajustez Taille de la bulle Story (ordinateur) et Taille de la bulle Story (mobile) si vous souhaitez agrandir ou réduire les cercles sur chaque type d’écran.
Ce que voient les clients
Lorsque l’utilisateur appuie sur un cercle de story, un lecteur plein écran s’ouvre sur la première diapositive. Les diapositives d’image avancent automatiquement après la durée configurée, et la barre de progression segmentée se remplit à la même vitesse ; les diapositives vidéo sont lues et passent à la suite lorsque la vidéo se termine, la barre reflétant la durée propre de la vidéo. Les clients peuvent également passer d’une diapositive à l’autre en appuyant sur les zones précédente et suivante du lecteur ou en utilisant les touches fléchées, et fermer le lecteur avec Échap, le bouton de fermeture ou en appuyant sur l’arrière-plan. Le lecteur se ferme lorsque l’utilisateur avance au-delà de la dernière diapositive.
Pour consulter la référence complète de tous les paramètres de Story et de diapositive Story, consultez l’article bloc Story.