Section d'etapes sequentielles avec numerotation, lignes de connexion, mode slider et grille responsive pour presenter un processus ou un mode d'emploi.
Pourquoi utiliser la section Steps
La section Steps est concue pour presenter un processus, un mode d'emploi ou un parcours client sous forme d'etapes visuelles numerotees. Elle transforme une information sequentielle en une experience claire et engageante, guidant le visiteur d'un point A a un point Z sans effort cognitif.
Dans un contexte e-commerce, cette section est un levier de conversion sous-estime. Un visiteur qui comprend exactement comment utiliser un produit, comment fonctionne le processus de commande ou ce qui l'attend apres l'achat est un visiteur qui a moins de freins a l'action. Les etapes eliminent l'incertitude, et l'incertitude est l'ennemi numero un de la conversion.
La section supporte jusqu'a 20 blocs step, avec un systeme de lignes de connexion visuelles (droites, pointillees ou courbees) entre les numeros, un slider automatique quand le contenu deborde, et des cartes entierement personnalisables avec images, icones, badges et liens.
Guide de configuration
Ajouter la section
Dans l'editeur Shopify, cliquez sur Ajouter une section puis cherchez Steps (ou le preset "How to Use" / "Results Timeline" selon le cas d'usage). La section apparait avec 3 etapes par defaut et un bloc heading.
Configurer le layout
Le premier choix a faire est le nombre de colonnes sur desktop et le comportement en cas de debordement.
Le setting Colonnes desktop (2 a 4) determine combien d'etapes sont visibles simultanement sur grand ecran. Le setting Comportement debordement propose deux modes :
- Slider : Les etapes defilent horizontalement dans un slider avec navigation (fleches et/ou dots). C'est le mode par defaut, recommande quand vous avez plus d'etapes que de colonnes visibles, ou quand vous souhaitez un affichage uniforme mobile/desktop.
- Wrap : Les etapes s'affichent dans une grille responsive classique qui passe a la ligne quand l'espace est insuffisant. Preferable quand vous voulez que toutes les etapes soient visibles d'un coup.
Sur mobile, le mode slider affiche 1 etape a la fois ; le mode wrap empile les etapes sur 1 colonne avec 2 colonnes a partir de 750px.
Configurer la numerotation
La numerotation est le coeur visuel de la section Steps. Trois parametres la controlent :
Afficher les numeros active ou desactive l'affichage des numeros. Quand desactive, seuls le media (image ou icone) et le contenu texte sont visibles.
Style du numero propose trois apparences :
- Circle : Le numero s'inscrit dans un cercle colore. C'est le style le plus courant, equilibre entre visibilite et elegance.
- Square : Le numero s'inscrit dans un carre aux coins legerement arrondis.
- Badge : Le numero est affiche dans un badge compact, plus petit que les styles circle et square. Adapte quand le numero est un texte personnalise (par ex. "Semaine 1").
Position du numero determine ou le numero apparait par rapport au media :
- Au-dessus (above) : Le numero est place au-dessus de l'image ou de l'icone. C'est la position qui permet l'affichage des lignes de connexion entre les etapes.
- Superpose (overlay) : Le numero est superpose sur l'image, positionne dans un coin. Disponible uniquement quand le media est de type image.
Configurer les lignes de connexion
Les lignes de connexion sont un element visuel distinctif qui relie les numeros entre eux, renforçant la notion de sequence. Elles ne sont visibles que lorsque les numeros sont affiches et positionnes au-dessus (above).
Style de connexion propose quatre options :
- Aucun : Pas de ligne entre les etapes.
- Ligne : Une ligne droite continue relie les numeros.
- Pointille : Une ligne pointillee relie les numeros. C'est le style par defaut, qui suggere un parcours "en cours".
- Courbe : Une ligne SVG courbee relie les numeros, creant un effet de chemin sinueux plus dynamique. Ce style charge un script JS supplementaire (
js-steps-connection.js) pour calculer les courbes.
Couleur de connexion permet de choisir la teinte de la ligne parmi Accent 1, Accent 2 ou Foreground.
Configurer les cartes et le media
Ratio image definit les proportions des images dans chaque etape : carre (1:1), portrait (4:5) ou paysage (3:2).
Style des cartes change l'apparence du conteneur de chaque etape :
- Flat : Pas de bordure ni d'ombre, le contenu flotte directement dans la section.
- Border : Une bordure fine entoure chaque carte.
- Shadow : Une ombre portee donne un effet de profondeur.
- Filled : Un fond colore remplit la carte, creant un contraste avec le fond de section.
Alignement du texte controle l'alignement de tout le contenu (numeros, titres, descriptions) : gauche, centre ou droite. L'alignement affecte egalement la position horizontale de la ligne de connexion.
Parametres de la section
Layout
| Parametre | Type | Description | Defaut |
|---|---|---|---|
columns_desktop | range | Nombre de colonnes sur desktop (2-4) | 3 |
overflow_behavior | select | Comportement en cas de debordement : slider ou wrap | slider |
text_alignment | select | Alignement du contenu : left, center, right | center |
Slider (visibles uniquement quand overflow_behavior = slider)
| Parametre | Type | Description | Defaut |
|---|---|---|---|
slider_navigation | checkbox | Afficher les fleches de navigation | true |
slider_pagination | checkbox | Afficher les dots de pagination | true |
slider_autoplay | checkbox | Lecture automatique | false |
slider_speed | range | Vitesse d'autoplay en secondes (3-10s) | 5 |
slider_loop | checkbox | Boucler a la fin | false |
Style du slider (visibles uniquement quand le slider est actif)
| Parametre | Type | Description | Defaut |
|---|---|---|---|
slider_nav_position | select | Position des fleches : overlay ou external | overlay |
slider_nav_background_palette | select | Fond des fleches : transparent, background, foreground, accent-1, accent-2 | background |
slider_nav_icon_palette | select | Couleur des icones de fleches | accent-1 |
slider_nav_icon_size | range | Taille des icones de navigation (16-32px) | 20 |
slider_dots_position | select | Position des dots : overlay ou external | external |
slider_dots_palette | select | Couleur des dots de pagination | accent-1 |
slider_dots_size | range | Taille des dots (8-20px) | 12 |
Numerotation
| Parametre | Type | Description | Defaut |
|---|---|---|---|
show_numbers | checkbox | Afficher les numeros d'etape | true |
number_style | select | Apparence : circle, square, badge | circle |
number_position | select | Position : above (au-dessus) ou overlay (superpose sur l'image) | above |
number_size | range | Echelle du numero (50%-200%) | 100 |
number_color | select | Couleur du numero : accent-1, accent-2, transparent, custom | accent-1 |
number_bg_color | color | Couleur de fond personnalisee (si number_color = custom) | #000000 |
number_text_color | color | Couleur du texte personnalisee (si number_color = custom) | #FFFFFF |
Lignes de connexion
| Parametre | Type | Description | Defaut |
|---|---|---|---|
connection_style | select | Style : none, line, dashed, curve | dashed |
connection_color | select | Couleur : accent-1, accent-2, foreground | accent-1 |
Media et cartes
| Parametre | Type | Description | Defaut |
|---|---|---|---|
image_ratio | select | Ratio des images : square, portrait, landscape | square |
card_style | select | Style de carte : flat, border, shadow, filled | flat |
Parametres globaux
La section inclut les parametres globaux du theme (marges, palette de couleurs, largeur du conteneur, visibilite, separateurs) via {{GLOBAL_SETTINGS}}, ainsi que les animations via {{SECTION_ANIMATIONS}} et {{ANIM_HAS_ITEM}}.
Blocs disponibles
Bloc Heading
Titre principal de la section. Limite a 1 par section.
| Parametre | Type | Description | Defaut |
|---|---|---|---|
subheading | text | Sous-titre affiche au-dessus du titre principal | Preset par defaut |
heading | inline_richtext | Titre principal (supporte le gras/italique inline) | "How it works" |
heading_level | select | Balise HTML : H1, H2, H3, H4 | h2 |
heading_size | range | Echelle de la taille du titre (50%-200%) | 100 |
Bloc Text
Paragraphe de description affiche sous le heading. Limite a 1 par section.
| Parametre | Type | Description | Defaut |
|---|---|---|---|
description | richtext | Texte riche avec mise en forme | Texte par defaut |
Bloc Step
C'est le bloc principal de la section. Chaque instance represente une etape dans le processus. Vous pouvez en ajouter jusqu'a 20.
| Parametre | Type | Description | Defaut |
|---|---|---|---|
number_override | text | Texte personnalise pour remplacer le numero automatique (ex. "Semaine 1", "Jour 3") | Vide (numero auto) |
badge | text | Badge affiche au-dessus du titre (ex. "Nouveau", "Important") | Vide |
media_type | select | Type de media : image, icon, none | image |
image | image_picker | Image de l'etape (visible si media_type = image) | Vide |
icon | select | Icone de la liste integree (visible si media_type = icon) | check_circle |
custom_icon | image_picker | Icone personnalisee uploadee (visible si media_type = icon) | Vide |
heading | text | Titre de l'etape | Texte par defaut |
description | richtext | Description detaillee de l'etape | Texte par defaut |
link | url | Lien optionnel (rend le titre et le texte du lien cliquables) | Vide |
link_text | text | Texte du lien affiche sous la description | Texte par defaut |
number_override est particulierement utile pour les timelines de resultats. Par exemple, au lieu des numeros 1, 2, 3, vous pouvez afficher "Semaine 1", "Semaine 3", "Semaine 6" pour montrer la progression d'un traitement ou d'un produit.Presets disponibles
La section est livree avec deux presets preconfigures :
Preset "How to Use"
Configuration orientee mode d'emploi produit :
- 3 colonnes desktop, mode slider
- Ligne de connexion courbe, couleur Accent 1
- Numeros en cercle, positionnes au-dessus
- Ratio d'image carre, cartes flat, alignement centre
- 3 etapes d'exemple : "Apply the product", "Massage gently", "Let it work"
Preset "Results Timeline"
Configuration orientee timeline de resultats :
- 3 colonnes desktop, mode slider
- Ligne de connexion pointillee, couleur Accent 1
- Numeros en badge, positionnes en overlay sur les images
- Ratio d'image portrait, cartes filled, alignement centre
- 3 etapes avec numeros personnalises : "Week 1", "Week 3", "Week 6"
Exemples de configuration
Mode d'emploi cosmetique
Un usage classique pour les marques de beaute et de soins : montrer au client exactement comment utiliser le produit en 3-4 etapes simples.
- Layout : 3 colonnes, mode slider
- Numerotation : Cercle, taille 100%, Accent 1, position au-dessus
- Connexion : Courbe, Accent 1
- Cartes : Flat, ratio carre, alignement centre
- Etapes :
- Etape 1 : "Nettoyez" -- Image du produit nettoyant, description courte
- Etape 2 : "Appliquez" -- Image du serum, description de la gestuelle
- Etape 3 : "Massez" -- Image des mains sur le visage
- Etape 4 : "Laissez agir" -- Image du resultat final
Processus de commande e-commerce
Rassurer le client sur le deroulement de la commande, de la selection a la livraison.
- Layout : 4 colonnes, mode wrap (toutes les etapes visibles)
- Numerotation : Cercle, taille 120%, couleur custom (#2563EB fond, #FFFFFF texte)
- Connexion : Ligne continue, couleur foreground
- Cartes : Border, ratio paysage, alignement gauche
- Etapes :
- Etape 1 : "Choisissez" -- Icone panier
- Etape 2 : "Personnalisez" -- Icone palette
- Etape 3 : "Commandez" -- Icone carte bancaire
- Etape 4 : "Recevez" -- Icone colis
Timeline de resultats avec badges
Montrer les resultats progressifs d'un produit sur plusieurs semaines, avec des numeros personnalises et des badges accrocheurs.
- Layout : 3 colonnes, mode slider
- Numerotation : Badge, taille 100%, position overlay, Accent 2
- Connexion : Aucune (les numeros sont en overlay)
- Cartes : Filled, ratio portrait, alignement centre
- Etapes :
- "Semaine 1" (number_override) : "Premieres ameliorations" -- Badge "Debut" -- Photo avant
- "Semaine 3" (number_override) : "Changements visibles" -- Badge "Progres" -- Photo intermediaire
- "Semaine 6" (number_override) : "Transformation complete" -- Badge "Resultat" -- Photo apres
Programme de fidelite ou parcours client
Illustrer les etapes d'un programme de recompenses ou le parcours d'engagement du client.
- Layout : 4 colonnes, mode slider avec autoplay (5s)
- Numerotation : Square, taille 80%, Accent 1, position au-dessus
- Connexion : Pointille, Accent 1
- Cartes : Shadow, ratio carre, alignement centre
- Etapes :
- Etape 1 : "Decouverte" -- Icone loupe -- Lien vers la collection
- Etape 2 : "Premier achat" -- Icone sac -- Lien vers les best-sellers
- Etape 3 : "Fidelite" -- Icone etoile -- Lien vers le programme fidelite
- Etape 4 : "Ambassadeur" -- Icone coeur -- Lien vers le parrainage
Comportement mobile
En mode slider, les etapes s'affichent une par une avec navigation par swipe. Les fleches et les dots restent accessibles pour une navigation au doigt.
En mode wrap, les etapes s'empilent en 1 colonne sur les ecrans de moins de 750px, et passent a 2 colonnes entre 750px et 989px.
Les lignes de connexion ne sont visibles qu'en mode grille (wrap) sur desktop. Elles sont masquees en mode slider car le defilement horizontal ne permet pas de representer la connexion de maniere coherente.
Bonnes pratiques
Prochaines etapes
- Timeline -- Pour une chronologie verticale avec animation progressive au scroll
- Collapsible Content -- Pour detailler chaque etape dans un accordeon FAQ
- Image with Text -- Pour mettre en avant une etape specifique en grand format