À retenir
- Les sections peuvent être réorganisées en les faisant glisser dans la barre latérale gauche de l’éditeur de thème.
- Cela fonctionne sur tous les types de pages : page d’accueil, pages produits, pages collections et pages personnalisées.
- L’en-tête (header) et le pied de page (footer) sont des sections fixes, on ne peut pas les déplacer.
- Les modifications ne sont en ligne qu’après avoir cliqué sur Enregistrer.
- Fudge peut restructurer la mise en page à partir d’une simple description pour les changements qui vont au-delà du glisser-déposer.
Pour réorganiser les sections sur une page Shopify, allez dans Boutique en ligne > Thèmes > Personnaliser, rendez-vous sur la page, puis faites glisser chaque section par sa poignée dans la barre latérale gauche et cliquez sur Enregistrer. Aucun code n’est nécessaire.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous développons également Fudge, l’opérateur IA pour les boutiques Shopify, noté 4.9 sur le Shopify App Store.
Comment réorganiser les sections dans le Theme Editor
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Accédez à la page que vous souhaitez modifier. Utilisez le sélecteur de page en haut de l’éditeur pour passer d’une page à l’autre (Page d’accueil, Pages produits, Pages collections, etc.).
Étape 3. Regardez la barre latérale gauche. Vous y verrez la liste de toutes les sections de la page actuelle dans leur ordre actuel.
Étape 4. Survolez la section que vous voulez déplacer. Une poignée de déplacement (six points disposés en grille) apparaît à gauche du nom de la section.
Étape 5. Cliquez et maintenez la poignée, puis faites glisser la section vers le haut ou vers le bas jusqu’à sa nouvelle position.
Étape 6. Relâchez pour la déposer. L’aperçu se met à jour immédiatement.
Étape 7. Cliquez sur Enregistrer pour publier le nouvel ordre.
Les sections que vous ne pouvez pas déplacer
Toutes les sections ne sont pas déplaçables. Deux sections sont toujours fixes :
Le header - Toujours en haut. C’est une section globale - la déplacer n’est ni possible ni utile.
Le footer - Toujours en bas. Pour la même raison.
Certains thèmes verrouillent également des sections spécifiques (comme une bannière de cookies ou une barre d’annonce) à une position fixe. Si vous ne voyez pas de poignée de glissement sur une section, c’est qu’elle est verrouillée.
Réorganiser les sections sur différents types de pages
Le processus est le même pour tous les types de pages, mais vous devez d’abord vous rendre sur la bonne page.
Page d’accueil - Sélectionnée par défaut lorsque vous ouvrez l’éditeur de thème.
Pages produits - Cliquez sur le menu déroulant des types de pages en haut de l’éditeur et choisissez “Produits”. Cliquez ensuite sur n’importe quel produit pour le prévisualiser. L’ordre des sections que vous définissez s’applique à toutes les pages produits (ou par modèle de page produit si votre thème prend en charge plusieurs modèles).
Pages collections - Même processus : utilisez le menu déroulant des types de pages et sélectionnez “Collections”.
Pages personnalisées - Choisissez “Pages” dans le menu déroulant. Si vous avez plusieurs modèles de pages, sélectionnez le bon.
Pour réorganiser les blocs à l’intérieur d’une section, consultez comment déplacer des blocs dans une section Shopify.
Que faire quand le drag-and-drop ne suffit pas
Parfois, le changement de mise en page dont vous avez besoin n’est pas juste une réorganisation : vous voulez déplacer du contenu d’une section vers une autre, ou créer un type de section qui n’existe pas dans votre thème.
Cela dépasse ce que le glisser-déposer de l’éditeur de thème peut faire. Ces modifications nécessitent du code.
Fudge, l’opérateur IA pour les boutiques Shopify, est très utile ici. Vous pouvez décrire la mise en page que vous souhaitez en langage naturel, et Fudge génère les modifications de code sous forme de brouillon :
“Déplace le guide des tailles de la section des onglets vers la buy box.”
“Fusionne les deux sections de texte de la page À propos en une seule section à deux colonnes.”
Fudge s’occupe du code, vous vérifiez avant la mise en ligne. Chaque modification publiée conserve la version qu’elle a remplacée, donc si le nouvel ordre ne convient pas, vous pouvez restaurer l’ancien en un clic.
Masquer une section au lieu de la supprimer
Si vous voulez retirer une section de la vue sans la supprimer de façon permanente, vous pouvez la masquer au lieu de la réorganiser ou de la supprimer.
Cliquez sur la section dans la barre latérale pour ouvrir ses paramètres. Cherchez une icône en forme d’œil ou un bouton Visible/Masqué en haut du panneau de paramètres de la section. Désactivez-le pour masquer la section.
La section reste dans votre barre latérale (grisée) et peut être réactivée à tout moment. C’est plus sûr qu’une suppression pour des sections que vous aimeriez potentiellement réutiliser.
Astuces rapides
- Aperçu avant d’enregistrer - l’aperçu en direct montre le nouvel ordre en temps réel avant que vous ne validiez.
- Aperçu mobile - cliquez sur l’icône de téléphone en haut de l’éditeur pour vérifier l’apparence des sections réorganisées sur les petits écrans.
- Annuler - si vous faites glisser une section au mauvais endroit par erreur, appuyez sur Ctrl+Z (Cmd+Z sur Mac) pour annuler. Ou ne sauvegardez pas et rafraîchissez simplement la page.
Pour définir un ordre différent sur mobile, consultez comment réorganiser votre mise en page mobile sur Shopify.
FAQ
Pourquoi le glisser-déposer ne fonctionne-t-il pas dans mon éditeur de thème Shopify ?
Deux causes fréquentes : (1) la section est verrouillée (en-tête/pied de page ou thèmes qui épinglent des sections spécifiques), ou (2) un problème de navigateur, essayez donc un autre navigateur ou rafraîchissez la page. Cherchez la poignée de déplacement (six points) qui apparaît au survol.
Puis-je plutôt réorganiser les sections Shopify via l'éditeur de code ?
Oui — ouvrez le fichier JSON du modèle correspondant (par ex., templates/index.json pour la page d'accueil) et réorganisez les entrées dans le tableau order. C'est plus rapide pour réorganiser en masse ou pour les sections sans poignées de déplacement, mais plus risqué : une erreur de syntaxe JSON casse la page. Dupliquez toujours le thème en premier.
Réorganiser les sections Shopify affectera-t-il mon SEO ?
Légèrement. L'ordre des sections modifie la séquence visuelle, ce qui peut changer le contenu qui apparaît au-dessus de la ligne de flottaison et les mots-clés que Google voit en premier. Pour la plupart des réorganisations, l'impact SEO est négligeable, mais déplacer un long bloc de texte d'une position bien en vue vers une position enfouie peut réduire la pertinence des mots-clés de la page.
Puis-je réorganiser les sections Shopify différemment selon le modèle ?
Oui — chaque modèle (page d'accueil, produit, collection, page personnalisée) a son propre ordre de sections. Réorganiser la page d'accueil n'affecte pas les pages produits, et vice versa. Les modèles personnalisés (par ex., product.hero.json) conservent un ordre de sections indépendant du modèle par défaut.
Dois-je dupliquer mon thème avant une réorganisation majeure ?
Pour une restructuration importante (refonte de la page d'accueil, modification de l'ordre des pages produits pour tous les produits), oui. Pour des réorganisations mineures (déplacer une section vers le haut ou le bas), non — le changement est réversible en la faisant glisser à nouveau. La duplication est votre filet de sécurité pour les changements qui semblent irréversibles. Pour une restructuration qui dépasse le glisser-déposer (déplacer du contenu entre les sections, fusionner deux sections, en diviser une en deux), décrivez ce que vous voulez à Fudge et il réécrira le modèle de la page.
