Comment réorganiser la mise en page mobile sur Shopify (2026)

Points clés

• L’Éditeur de thème inclut un mode 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 sur mobile via les paramètres “Mise en page mobile” à l’intérieur des sections.
• Pour un ordre sur mobile totalement indépendant (différent de l’ordinateur), la propriété CSS flexbox order ou Fudge est requise.
• Testez toujours sur un vrai appareil après avoir effectué des modifications — l’aperçu n’est pas toujours parfait au pixel près.

La plupart des thèmes Shopify sont conçus pour s’empiler verticalement sur mobile, ce qui fonctionne bien pour les mises en page simples. Mais lorsque vous avez une section avec plusieurs colonnes ou blocs, l’ordre d’empilement peut ne pas correspondre à ce qui est logique pour les acheteurs sur mobile.

Ce guide explique vos options, de ce qui est disponible dans l’Éditeur de thème jusqu’au moment où vous aurez besoin de coder.

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.

Méthode 1 — Utiliser l’aperçu mobile de l’éditeur de thème

Étape 1 — Ouvrez l’éditeur de thème. Allez dans Boutique en ligne → Thèmes → Personnaliser.

É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 desktop. Faites glisser les sections dans la barre latérale gauche pour les réorganiser — cela affecte à la fois le desktop et le mobile.

Étape 4 — Vérifiez l’ordre des blocs dans les sections. Certains thèmes affichent une option “Mise en page sur mobile” dans les paramètres de la section. Cherchez-la dans le panneau de droite lorsqu’une section est sélectionnée.

Cette approche native couvre la plupart des besoins de base en matière de réorganisation sans toucher au code.

Sur le même sujet : Masquer du contenu sur mobile dans Shopify.

Sur le même sujet : Améliorer l’espacement mobile dans Shopify.

Sur le même sujet : Réorganiser les sections sur une page Shopify.

Méthode 2 — 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 3 — CSS flexbox order (code requis)

Lorsque vous avez besoin que l’ordre sur mobile soit complètement différent de celui sur desktop — par exemple, un layout à 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: 767px) {
    .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.

Article lié : Ajouter du JavaScript personnalisé sur Shopify.

Méthode 4 — Utiliser Fudge pour un ordre sur mobile entièrement sur mesure

Si votre mise en page nécessite une structure fondamentalement différente sur mobile — pas seulement une réorganisation, mais un contenu différent, de nouveaux types de sections ou une logique de blocs responsive — l’approche CSS devient vite compliquée.

Fudge vous permet de décrire exactement ce que vous voulez :

“Sur mobile, déplace la description du produit au-dessus des images du produit. Sur desktop, garde la mise en page standard à deux colonnes.”

Fudge génère le code, vous examinez le brouillon et l’approuvez quand il vous convient. Pas d’écriture manuelle de CSS, pas de recherche de classes.

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