Ajoutez des transitions fluides entre les pages de votre boutique avec Scale Theme. 6 effets de transition, 3 vitesses et compatibilite View Transitions API.
Transitions de page
Quand un visiteur clique sur un lien dans une boutique Shopify classique, il y à un "flash blanc" : la page actuelle disparait instantanément et la nouvelle page met un moment a s'afficher. Ce flash est desagreable et donne une impression de lenteur. Les transitions de page eliminent ce probleme en ajoutant une animation fluide entre les pages, créant une expérience de navigation qui ressemble a celle d'une application native.
Pourquoi activer les transitions de page ?
| Sans transitions | Avec transitions |
|---|---|
| Flash blanc entre chaque page | Transition fluide et élégante |
| Impression de site "lent" | Impression de site "rapide" et premium |
| Expérience web classique | Expérience proche d'une app native |
| Chaque clic = rupture visuelle | Navigation comme une expérience continue |
Les transitions de page sont un détail qui fait la difference entre un site "correct" et un site "haut de gamme". Elles donnent une impression de polish et de qualité qui renforce la confiance du visiteur.
Activation
Les transitions de page sont désactivées par défaut car elles sont un ajout esthétique qui n'est pas nécessaire pour toutes les boutiques.
Pour les activer :
- Allez dans Paramètres du thème (icône engrenage)
- Cliquez sur Transitions de page
- Cochez Active
| Réglage | Type | Options | Défaut |
|---|---|---|---|
| Active | Checkbox | Oui / Non | Non |
| Effet | Select | Fade / Slide / Scale / Lift / Cover / Crossfade | Fade |
| Durée | Select | Fast / Normal / Slow | Normal |
Les 6 effets de transition
Chaque effet crée une sensation différente lors de la navigation.
| Effet | Mouvement | Impression | Intensité | Idéal pour |
|---|---|---|---|---|
| Fade | Fondu enchaine | Doux, naturel, classique | Faible | Toutes les boutiques, choix par défaut |
| Slide | Glissement horizontal | Dynamique, navigation latérale | Moyenne | Mode, lifestyle, navigation entre collections |
| Scale | Zoom arrière de la page sortante | Profondeur, cinématographique | Moyenne-forte | Tech, produits innovants, storytelling |
| Lift | Nouvelle page monte depuis le bas | Révélation, mobile-friendly | Moyenne | Navigation verticale forte, collection vers produit |
| Cover | Nouvelle page glisse par-dessus | Elegant, éditorial, premium | Forte | Mode haut de gamme, magazines, lifestyle |
| Crossfade | Double exposition momentanée | Artistique, photographique | Moyenne | Galeries photo, art, esthétique photographique |
Durée
La durée contrôle la vitesse de la transition. Elle affecte tous les effets de la même manière.
| Vitesse | Durée | Description | Impression |
|---|---|---|---|
| Fast | ~200 ms | Transition quasi instantanée | Navigation rapide, presque invisible, performant |
| Normal | ~400 ms | Transition visible mais pas lente | Équilibré idéal, l'effet est perceptible sans être intrusif |
| Slow | ~600 ms | Transition contemplative | Immersif, cinématographique, pour les expériences editoriales |
| Type de boutique | Durée recommandée | Pourquoi |
|---|---|---|
| E-commerce rapide (beaucoup de pages/produits) | Fast | Les visiteurs naviguent vite, la transition ne doit pas ralentir |
| Boutique générale | Normal | Équilibré entre esthétique et rapidité |
| Mode / Lifestyle | Normal ou Slow | L'esthétique est importante, la transition fait partie de l'expérience |
| Luxe / Premium | Slow | Chaque page mérite d'être révélée avec ceremonie |
Combinaisons recommandées
"Invisible et efficace"
- Effet : Fade
- Durée : Fast
- Pour qui : Marchands qui veulent juste supprimer le flash blanc sans attirer l'attention sur la transition
"Moderne et pro"
- Effet : Fade ou Scale
- Durée : Normal
- Pour qui : La majorité des boutiques, un bon équilibré
"Éditorial premium"
- Effet : Cover
- Durée : Normal
- Pour qui : Boutiques de mode, lifestyle, magazines qui veulent une navigation "feuilletage"
"Immersion totale"
- Effet : Cover ou Lift
- Durée : Slow
- Pour qui : Boutiques de luxe, expériences immersives, pages de marque
"Artistique"
- Effet : Crossfade
- Durée : Normal ou Slow
- Pour qui : Galeries, art, photographie
Compatibilite navigateur
Les transitions de page utilisent la View Transitions API, une technologie web moderne supportee par les navigateurs récents.
| Navigateur | Support |
|---|---|
| Chrome (desktop + Android) | Oui (depuis v111) |
| Edge | Oui (depuis v111) |
| Safari (desktop + iOS) | Oui (depuis v18) |
| Firefox | Oui (depuis v132) |
| Navigateurs anciens | Non -- navigation normale sans transition |
Impact sur la performance
Les transitions de page ont un impact minimal sur la performance :
- Pas de JavaScript supplémentaire lourd : utilise les API natives du navigateur
- Pas de chargement de librairie : zéro dépendance externe
- Acceleration GPU : les animations sont gérées par le GPU, pas par le CPU
- Pas d'impact sur le Lighthouse score : les transitions se déclenchent après le chargement de la page
FAQ
Est-ce que les transitions fonctionnent avec les apps Shopify tierces ?
Oui. Les transitions se font au niveau du document HTML entier, donc tout le contenu de la page (y compris celui injecte par des apps tierces) est inclus dans la transition.
Est-ce que je peux désactiver la transition pour certains liens ?
Non, les transitions s'appliquent à toutes les navigations au sein de votre boutique. Les liens externes (vers d'autres sites) ne sont pas affectes.
Est-ce que ça fonctionne avec le bouton "Retour" du navigateur ?
Oui. La transition s'applique également quand le visiteur utilise le bouton retour du navigateur. L'effet est le même que pour la navigation vers l'avant.
Dois-je choisir un effet différent sur mobile ?
Non, l'effet est le même sur mobile et desktop. Les transitions sont optimisées pour fonctionner sur les deux. L'effet Slide est particulièrement naturel sur mobile car il reproduit le geste de navigation latérale des apps.
Résumé
| Choix | Recommandation |
|---|---|
| Activer ou non ? | Oui, si votre marque mise sur la qualité de l'expérience |
| Quel effet ? | Fade pour la sécurité, Cover pour le wow |
| Quelle durée ? | Normal pour la plupart, Fast si beaucoup de navigation |
| Compatibilite ? | Tous les navigateurs modernes, degradation gracieuse |
| Performance ? | Impact zéro, c'est du progressive enhancement |
Prochaines étapes
- Animations — Animations globales du thème
- Animations (design) — Animations par section
- Layout — Mise en page et espacements
- Configuration initiale — Paramètres globaux