Points clés
- L’éditeur de thème (Theme Editor) inclut un mode d’aperçu mobile — cliquez sur l’icône de téléphone en haut pour vérifier l’apparence de votre mise en page.
- Certains thèmes vous permettent de réorganiser les blocs différemment pour mobile via les paramètres “Mobile layout” (Mise en page mobile) dans les sections.
- Pour un ordre mobile totalement indépendant (différent de celui sur bureau), l’ordre flexbox CSS ou Fudge est requis.
- Testez toujours sur un vrai appareil après avoir effectué des changements — l’aperçu n’est pas toujours parfait au pixel près.
Pour réorganiser votre mise en page mobile sur Shopify, vérifiez d’abord les paramètres de la section pour les options de mise en page mobile (ordre d’empilement, colonnes). Pour un ordre qui diffère de celui sur bureau, ajoutez du CSS : rendez le conteneur display: flex; flex-direction: column dans une media query mobile et définissez order sur chaque bloc.
Pourquoi l’ordre sur mobile est important
Sur desktop, une section à deux colonnes peut afficher une image à gauche et du texte à droite. Sur mobile, les deux s’empilent — mais lequel s’affiche en premier ? Le sens de lecture sur mobile affecte directement la conversion. Si votre titre apparaît sous votre image, les visiteurs doivent scroller pour comprendre ce qu’ils regardent.
Avoir le bon ordre est particulièrement important pour les sections de caractéristiques de produits, le contenu hero et les barres d’annonce.
Avant de commencer : vérifiez l’ordre dans l’aperçu mobile
Étape 1 — Ouvrez l’éditeur de thème. Allez dans Boutique en ligne → Thèmes → Personnaliser (Online Store → Themes → Customize).
Étape 2 — Passez à l’aperçu mobile. Cliquez sur l’icône de téléphone en haut au centre de l’éditeur. Cela vous montre comment les sections s’afficheront sur les petits écrans.
Étape 3 — Vérifiez l’ordre des sections. Par défaut, les sections s’empilent dans le même ordre que sur bureau. Glissez-déposez les sections dans la barre latérale gauche pour les réorganiser — cela affecte à la fois le bureau et le mobile.
Étape 4 — Vérifiez l’ordre des blocs dans les sections. Certains thèmes affichent une option “Mise en page mobile” (Mobile layout) dans les paramètres de la section. Cherchez-la dans le panneau de droite lorsqu’une section est sélectionnée.
L’aperçu ne vous montre que l’ordre. Pour modifier l’ordre des blocs uniquement sur mobile, utilisez l’une des trois méthodes ci-dessous.
Pour déplacer des sections entières sur tous les appareils, consultez comment réorganiser les sections sur une page Shopify.
Méthode 1 - Utiliser les paramètres “Mobile layout” du thème
Les thèmes construits sur le framework Dawn de Shopify (et de nombreux thèmes premium) incluent des contrôles de mise en page mobile par section. Ceux-ci apparaissent dans le panneau des paramètres de section lorsque vous sélectionnez une section dans l’éditeur de thème.
Options courantes que vous pourriez voir :
- Ordre d’empilement (Stack order) — texte au-dessus de l’image vs image au-dessus du texte sur mobile
- Nombre de colonnes sur mobile — 1 colonne vs 2 colonnes
- Visibilité des blocs — afficher ou masquer des blocs spécifiques sur mobile
Si votre thème possède ces options, utilisez-les en priorité avant de passer au CSS. C’est l’option la plus sûre car elles sont officiellement prises en charge.
Méthode 2 - Ordre flexbox CSS (code requis)
Lorsque vous avez besoin que l’ordre sur mobile soit complètement différent de celui sur bureau — par exemple, une mise en page à trois colonnes où le bloc du milieu doit apparaître en premier sur mobile — le CSS est le bon outil.
Ajoutez ceci au fichier assets/base.css de votre thème (dupliquez toujours votre thème en premier) :
@media (max-width: 749px) {
.your-section-class {
display: flex;
flex-direction: column;
}
.your-block-first-on-mobile {
order: 1;
}
.your-block-second-on-mobile {
order: 2;
}
}Trouver les bons noms de classe : Faites un clic droit sur l’élément dans votre navigateur → Inspecter → copiez la classe depuis le HTML. Cherchez des classes spécifiques à la section plutôt que des classes génériques.
Cette méthode vous donne un contrôle précis mais nécessite une certaine familiarité avec les dev tools du navigateur et le CSS.
Méthode 3 - Utiliser Fudge pour un ordre mobile entièrement personnalisé
Si votre mise en page nécessite une structure fondamentalement différente sur mobile — pas seulement une réorganisation, mais un contenu différent, des types de sections différents ou une logique de blocs responsive — l’approche CSS devient vite compliquée.
Fudge, l’opérateur IA pour les boutiques Shopify, vous permet de décrire exactement ce que vous voulez dans son éditeur de boutique :
“Sur mobile, déplace la description du produit au-dessus des images du produit. Sur bureau, garde la disposition standard à deux colonnes.”
Fudge génère le code, vous passez en revue le brouillon et l’approuvez quand il vous semble correct. Pas d’écriture manuelle de CSS, pas de recherche de classes. Une fois le nouvel ordre en ligne, Fudge montre le taux de conversion de la page sur mobile avant et après, et l’ancien ordre est à portée de clic si vous voulez le rétablir.
Qu’en est-il de l’ordre des sections par rapport à l’ordre des blocs ?
Ce sont deux choses différentes :
Ordre des sections — la séquence des sections principales sur la page (hero, caractéristiques, témoignages, etc.). L’éditeur de thème gère cela par glisser-déposer (drag-and-drop), et l’ordre est le même sur desktop et mobile.
Ordre des blocs — la séquence des éléments au sein d’une section (image vs texte, ou l’ordre des cartes de témoignages). C’est là qu’interviennent les paramètres du thème ou le CSS.
Si vous essayez d’afficher une structure de page complètement différente sur mobile (des sections entièrement différentes), vous devrez utiliser le CSS display: none pour masquer des sections spécifiques à chaque breakpoint et créer des versions séparées exclusivement pour mobile et desktop.
Erreurs courantes
Réorganiser la vue desktop sans vérifier la vue mobile. Passez toujours sur l’aperçu mobile après d’éventuels changements — ce qui rend bien sur desktop peut être cassé sur mobile.
Modifier le thème en ligne. Dupliquez votre thème avant de toucher à l’éditeur de code. Une mauvaise règle CSS peut complètement casser la mise en page de votre boutique.
Utiliser JavaScript pour l’ordre de mise en page. Le CSS gère la réorganisation au niveau du rendu. La réorganisation basée sur JavaScript provoque un décalage de mise en page (CLS - Cumulative Layout Shift), ce qui pénalise votre score Google PageSpeed.
FAQ
Pourquoi mon ordre mobile correspond-il à celui du bureau même après avoir utilisé `order` en flex ?
Trois causes habituelles : (1) le conteneur parent n'est pas en display: flex (ou grid), donc order n'a aucun effet, (2) la spécificité CSS est trop faible et les styles du thème écrasent votre règle, ou (3) la media query cible le mauvais breakpoint. Inspectez avec les DevTools pour confirmer que display: flex est appliqué et que votre règle order l'emporte.
Dois-je utiliser `order` en flexbox ou CSS Grid pour la réorganisation sur mobile ?
Flexbox order pour une réorganisation linéaire simple d'éléments empilés. CSS Grid grid-template-areas pour des changements de disposition 2D complexes (où vous réorganisez les lignes et les colonnes différemment selon le breakpoint). Flexbox est plus simple et bien supporté ; Grid est plus puissant pour une réorganisation multi-axes.
La réorganisation mobile va-t-elle causer un Cumulative Layout Shift (CLS) ?
La réorganisation basée sur CSS (order en flex, placement en grid) ne cause pas de CLS — l'ordre est calculé au rendu initial. Le CLS se produit lorsque JavaScript réorganise les éléments du DOM après le chargement de la page, ou lorsque le contenu se décale à cause du lazy-loading. Tenez-vous-en au CSS pour la réorganisation de la mise en page et n'utilisez JS que pour les interactions véritablement dynamiques.
Puis-je afficher conditionnellement un contenu différent en fonction du viewport en Liquid ?
Pas via Liquid seul — il s'exécute côté serveur et ne connaît pas le viewport. L'approche la plus propre : décrivez le changement à Fudge et il génère les variantes bureau et mobile dans la section, avec du CSS qui affiche la bonne selon le breakpoint.
Dois-je dupliquer les sections pour mobile ou cacher des variations d'une seule section ?
Pour des différences mineures de mise en page (nombre de colonnes, padding), une seule section responsive. Pour des blocs de contenu substantiellement différents ou des traitements visuels totalement différents, deux sections — une stylisée pour mobile, une pour bureau, l'autre étant cachée via une media query. La séparation est plus propre qu'une logique responsive complexe dans une seule section.
