Ajouter des Stories à votre boutique

Ajoutez des Stories de style Instagram à votre boutique avec le bloc Story, ou commencez plus rapidement à partir du préréglage Stories du bloc Group. Les visiteurs 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.

1. 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.

2. Ajoutez un bloc Story à cette section.

3. Donnez-lui un titre de story et définissez une image de couverture — l’image affichée sur le cercle sur lequel les visiteurs 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 et Story 3 avec quatre.

Ajouter et réorganiser les diapositives d’une Story

Chaque diapositive de 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 l’ordre de lecture.

1. Sélectionnez un bloc Story.

2. Ajoutez des éléments Diapositive de Story pour créer la story. Chaque diapositive constitue une image.

3. Faites glisser les éléments de diapositive pour définir l’ordre dans lequel ils apparaissent aux visiteurs.

Configurer chaque diapositive

Chaque diapositive de Story contient soit une image, soit une vidéo, ainsi qu’une durée d’affichage. 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 avancent automatiquement à leur terme.

• Durée — nombre de secondes pendant lesquelles une diapositive d’image reste affichée 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 du thème qui s’applique à chaque bloc Story de la boutique.

1. Dans l’éditeur de thème, ouvrez les paramètres du thème, puis recherchez le groupe Story.

2. 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 étapes allant de l’orange au rose.

3. 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 visiteurs

Lorsque vous appuyez 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 avancent à la fin de la vidéo, la barre reflétant la durée propre de la vidéo. Les visiteurs peuvent également passer d’une diapositive à l’autre en appuyant sur les zones précédente et suivante du lecteur ou sur les touches fléchées, et fermer le lecteur avec Échap, le bouton de fermeture ou en appuyant sur l’arrière-plan. Le passage après la dernière diapositive ferme le lecteur.

Pour consulter la référence complète de tous les paramètres de Story et de diapositive de Story, consultez l’article bloc Story.

FAQ