Frise chronologique verticale avec 3 dispositions, barre de progression au scroll, badges temporels et animations d'apparition pour le storytelling de marque.
Pourquoi utiliser la section Timeline
La section Timeline est un outil de storytelling visuel qui permet de raconter une histoire dans le temps : l'evolution de votre marque, le parcours de transformation d'un client, les etapes d'un projet ou le cycle de vie d'un produit. Elle transforme une liste de dates et d'evenements en une experience de lecture immersive ou chaque element apparait au fur et a mesure que le visiteur fait defiler la page.
En e-commerce, le storytelling est un puissant levier de conversion. Un visiteur qui comprend l'histoire derriere une marque -- ses origines, ses valeurs, ses etapes de croissance -- developpe une connexion emotionnelle qui va au-dela du simple rapport qualite/prix. La timeline cree cette connexion en structurant visuellement le recit avec une ligne verticale, des points de jonction et des animations progressives.
La section propose 3 dispositions (gauche, centree, alternee), 3 styles de points (dot, icone, numero), un systeme de badges temporels, une barre de progression au scroll, et le support d'images par evenement avec 3 positions possibles. Chaque evenement peut inclure un lien pour diriger le visiteur vers une page de detail.
Guide de configuration
Ajouter la section
Dans l'editeur Shopify, cliquez sur Ajouter une section puis cherchez Timeline. Deux presets sont disponibles :
- Our Story : Configuration orientee histoire de marque, avec disposition alternee, points numerotes et badges annuels (2018, 2020, 2023).
- Treatment Journey : Configuration orientee parcours de transformation, avec disposition a gauche, points dot en grande taille, badges temporels (Day 1, Week 2, Month 1) et barre de progression activee.
Choisir la disposition
Le parametre Layout style est le premier choix a faire car il determine l'architecture visuelle de toute la section.
Left (gauche) : Tous les evenements sont alignes a droite de la ligne verticale, qui longe le bord gauche du conteneur. C'est la disposition la plus compacte et la plus lisible, notamment sur mobile. Elle convient aux timelines avec du contenu textuel simple et un nombre d'evenements eleve.
Centered (centree) : Les evenements sont centres sous la ligne verticale, qui est au milieu du conteneur. Chaque bloc de contenu est centre horizontalement. Cette disposition fonctionne bien avec peu d'evenements (3-4) et un design symetrique.
Alternating (alternee) : Les evenements alternent entre la gauche et la droite de la ligne verticale centrale. C'est la disposition la plus riche visuellement, creant un rythme de lecture en zigzag qui maintient l'attention du visiteur. Elle est ideale pour le storytelling avec images.
Configurer la ligne verticale
La ligne verticale est l'element structurant de la timeline. Deux parametres la controlent :
Style de ligne propose deux options :
- Solid : Une ligne continue, nette et affirmee. Convient aux timelines formelles ou professionnelles.
- Dashed : Une ligne pointillee, plus legere et dynamique. Evoque un parcours "en progression".
Couleur de ligne permet de choisir entre Accent 1, Accent 2 ou Foreground. Utilisez la couleur accent de votre marque pour renforcer l'identite visuelle.
Configurer les points de jonction
Les points de jonction sont les marqueurs visuels places sur la ligne verticale, au niveau de chaque evenement. Trois parametres les controlent :
Style du point propose trois options :
- Dot : Un simple cercle colore. C'est le style le plus epure, qui laisse la place au contenu textuel.
- Icon : Une icone de la bibliotheque integree du theme, choisie par bloc. Permet de donner un repere visuel thematique a chaque evenement (ex. etoile pour une reussite, fusee pour un lancement).
- Number : Le numero sequentiel de l'evenement (1, 2, 3...). Renforce la notion de progression ordonnee.
Taille du point propose trois tailles : small, medium, large. La taille medium est recommandee pour la plupart des cas. Utilisez large quand les points portent des icones ou des numeros qui doivent etre bien lisibles.
Couleur du point permet de choisir entre Accent 1 et Accent 2.
Configurer les badges
Les badges sont des etiquettes affichees au-dessus du contenu de chaque evenement. Ils servent generalement a indiquer la date, l'annee ou le repere temporel (ex. "2020", "Phase 2", "Semaine 3").
Afficher les badges active ou desactive l'affichage des badges pour toute la section. Meme si des textes de badge sont renseignes dans les blocs, ils ne seront pas visibles si ce parametre est desactive.
Style du badge propose deux options :
- Filled : Le badge a un fond colore opaque. Plus visible, ideal quand les badges contiennent des informations importantes (dates, phases).
- Outline : Le badge a une bordure coloree et un fond transparent. Plus discret, adapte quand les badges sont secondaires par rapport au contenu.
Couleur du badge permet de choisir entre Accent 1 et Accent 2.
Configurer les animations
Animation au scroll active l'apparition progressive des evenements au fur et a mesure que le visiteur fait defiler la page. Chaque evenement apparait avec un effet de fade quand il entre dans le viewport. C'est un element cle de l'experience immersive ; il est recommande de le garder active.
Barre de progression ajoute une ligne de remplissage qui se superpose a la ligne verticale de fond. Cette ligne "se remplit" progressivement au fur et a mesure que le visiteur scrolle vers le bas, creant un sentiment de progression visuelle. L'effet est particulierement engageant pour les parcours de transformation ou les roadmaps.
Parametres de la section
Contenu
| Parametre | Type | Description | Defaut |
|---|---|---|---|
desktop_content_alignment | select | Alignement du header sur desktop : left, center, right | center |
mobile_content_alignment | select | Alignement du header sur mobile : left, center, right | center |
Layout
| Parametre | Type | Description | Defaut |
|---|---|---|---|
layout_style | select | Disposition : left, centered, alternating | left |
content_max_width | select | Largeur max du contenu par evenement : auto, narrow (400px), medium (550px) | medium |
Ligne verticale
| Parametre | Type | Description | Defaut |
|---|---|---|---|
line_style | select | Style de la ligne : solid, dashed | solid |
line_color | select | Couleur de la ligne : accent-1, accent-2, foreground | accent-1 |
Points de jonction
| Parametre | Type | Description | Defaut |
|---|---|---|---|
point_style | select | Style du point : dot, icon, number | dot |
point_size | select | Taille : small, medium, large | medium |
point_color | select | Couleur : accent-1, accent-2 | accent-1 |
Badges
| Parametre | Type | Description | Defaut |
|---|---|---|---|
show_badges | checkbox | Afficher les badges temporels | true |
badge_style | select | Style : filled, outline | filled |
badge_color | select | Couleur : accent-1, accent-2 | accent-1 |
Animations
| Parametre | Type | Description | Defaut |
|---|---|---|---|
animate_on_scroll | checkbox | Animation d'apparition progressive au scroll | true |
show_progress_bar | checkbox | Barre de progression qui se remplit au scroll | false |
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 d'entree via {{SECTION_ANIMATIONS}} et {{ANIM_HAS_ITEM}}.
Blocs disponibles
Bloc Heading
Titre principal de la section, affiche au-dessus de la timeline. Supporte un sous-titre, differents niveaux de heading (H1-H4) et un controle de taille. L'alignement suit les parametres desktop_content_alignment et mobile_content_alignment de la section.
Bloc Timeline Item
C'est le bloc principal de la section. Chaque instance represente un evenement sur la frise chronologique.
| Parametre | Type | Description | Defaut |
|---|---|---|---|
badge | text | Texte du badge temporel (ex. "2020", "Phase 1", "Jour 3") | Vide |
icon | select | Icone affichee dans le point de jonction (si point_style = icon) | check_circle |
title | text | Titre de l'evenement | Texte par defaut |
description | richtext | Description detaillee de l'evenement (supporte la mise en forme riche) | Texte par defaut |
image | image_picker | Image illustrant l'evenement | Vide |
image_position | select | Position de l'image : above (au-dessus du titre), side (a cote du contenu), opposite (de l'autre cote de la ligne) | above |
image_width | select | Largeur de l'image : small, medium, large, full | medium |
link | url | Lien de l'evenement | Vide |
link_text | text | Texte du lien affiche sous la description | "Learn more" |
Positions d'image expliquees
Le parametre image_position controle ou l'image apparait par rapport au contenu textuel de l'evenement :
- Above : L'image est placee au-dessus du titre et de la description, dans le bloc de contenu. C'est la position la plus simple et la plus previsible.
- Side : L'image est placee a cote du contenu textuel, dans le meme bloc. Utile pour de petites images illustratives.
- Opposite : L'image est placee de l'autre cote de la ligne verticale par rapport au contenu. En disposition "alternating", cela cree un effet ou contenu et image se repondent de part et d'autre de la ligne. En disposition "left", l'image apparait a gauche de la ligne.
Exemples de configuration
Histoire de marque
Racontez les moments cles de votre entreprise pour creer une connexion emotionnelle avec vos visiteurs.
- Disposition : Alternating
- Ligne : Solid, Accent 1
- Points : Number, taille medium, Accent 1
- Badges : Filled, Accent 1
- Animations : Scroll active, progression desactivee
- Evenements :
- Badge "2018" : "L'idee" -- Description des origines -- Image de l'equipe fondatrice (position opposite)
- Badge "2019" : "Le premier produit" -- Description du lancement -- Image du produit original (position opposite)
- Badge "2021" : "10 000 clients" -- Description de la croissance -- Image de la communaute (position opposite)
- Badge "2024" : "L'expansion internationale" -- Description des nouveaux marches -- Image de la carte (position opposite)
Parcours de transformation client
Montrez les resultats progressifs de votre produit pour convaincre les visiteurs hesitants.
- Disposition : Left
- Ligne : Solid, Accent 1
- Points : Dot, taille large, Accent 1
- Badges : Outline, Accent 1
- Animations : Scroll active, progression activee
- Evenements :
- Badge "Jour 1" : "Commencez votre routine" -- Description de la premiere utilisation -- Image du kit debutant (position above)
- Badge "Semaine 2" : "Les premiers signes" -- Description des changements subtils -- Image d'un gros plan peau (position above)
- Badge "Mois 1" : "Resultats visibles" -- Description de la transformation -- Image avant/apres (position above)
- Badge "Mois 3" : "Transformation complete" -- Description du resultat final -- Image du resultat (position above)
Processus de fabrication
Montrez la qualite et le soin apportes a la creation de vos produits.
- Disposition : Alternating
- Ligne : Dashed, Accent 2
- Points : Icon (icones differentes par etape), taille medium, Accent 2
- Badges : Filled, Accent 2
- Animations : Scroll active, progression desactivee
- Evenements :
- Badge "Etape 1" : "Selection des ingredients" -- Icone feuille -- Image de la recolte (position opposite)
- Badge "Etape 2" : "Formulation" -- Icone flacon -- Image du laboratoire (position opposite)
- Badge "Etape 3" : "Tests qualite" -- Icone check -- Image des tests (position opposite)
- Badge "Etape 4" : "Emballage eco-responsable" -- Icone recyclage -- Image du packaging (position opposite)
Roadmap produit ou entreprise
Partagez votre vision future pour engager votre communaute.
- Disposition : Centered
- Ligne : Solid, Foreground
- Points : Dot, taille small, Accent 1
- Badges : Filled, Accent 1
- Animations : Scroll active, progression activee
- Contenu max width : Narrow (400px)
- Evenements :
- Badge "Q1 2026" : "Nouvelle gamme soins" -- Description courte, sans image
- Badge "Q2 2026" : "Lancement international" -- Description courte, sans image
- Badge "Q3 2026" : "Programme fidelite" -- Description courte, lien vers la page d'inscription
- Badge "2027" : "Objectif zero dechet" -- Description courte, sans image
Comportement mobile
Sur mobile, les trois dispositions convergent vers un affichage similaire :
- La disposition left reste inchangee, avec la ligne verticale a gauche et le contenu a droite.
- Les dispositions centered et alternating basculent automatiquement vers un affichage de type gauche pour garantir que le contenu reste lisible dans l'espace reduit.
- Les images en position opposite sont repositionnees au-dessus du contenu textuel.
- La barre de progression et les animations au scroll fonctionnent de maniere identique.
- Les badges, titres et descriptions s'adaptent a la largeur disponible.
Bonnes pratiques
js-timeline-progress.js n'est charge que si la barre de progression ou l'animation au scroll est activee. Si vous desactivez les deux, aucun JavaScript supplementaire n'est charge, ce qui preserve les performances.Accessibilite
La section Timeline est construite avec l'accessibilite en tete :
- Le conteneur principal utilise
role="list"avec unaria-labeldescriptif, et chaque evenement utiliserole="listitem", ce qui permet aux lecteurs d'ecran d'annoncer la structure comme une liste ordonnee. - Les points de jonction en mode icone heritent de l'attribut
aria-hiddende l'icone SVG, evitant la lecture de contenu decoratif. - Les badges sont lus naturellement par les lecteurs d'ecran car ils utilisent du texte brut dans un
<span>. - Les liens de chaque evenement sont accessibles au clavier via la navigation par tabulation.
Prochaines etapes
- Steps -- Pour des etapes horizontales avec lignes de connexion, quand l'orientation verticale n'est pas souhaitee
- Stacking Cards -- Pour un effet d'empilement de cartes au scroll, complementaire a la timeline
- Collapsible Content -- Pour detailler les evenements de la timeline dans un accordeon FAQ