Points clés
- Les sections sont réorganisées en les faisant glisser dans la barre latérale gauche du Theme Editor.
- Cela fonctionne sur n’importe quel type de page : page d’accueil, pages produits, pages collections et pages personnalisées.
- Le header et le footer sont des sections fixes - ils ne peuvent pas être déplacés.
- Les changements ne sont en ligne qu’après avoir cliqué sur Enregistrer.
- Fudge peut restructurer la mise en page à partir d’une description naturelle pour des modifications allant au-delà du drag-and-drop.
Réorganiser les sections est l’une des choses les plus satisfaisantes que vous puissiez faire dans le Theme Editor de Shopify. C’est un simple drag-and-drop - aucun code n’est requis. Voici exactement comment faire.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge - un éditeur de boutique IA avec une note de 5.0 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 une liste de toutes les sections de la page actuelle dans leur ordre actuel.
Étape 4. Survolez la section que vous souhaitez déplacer. Une poignée de glissement (six points disposés en grille) apparaît sur le cô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 à sa nouvelle position.
Étape 6. Relâchez pour la déposer à sa place. L’aperçu à droite 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 le Theme Editor.
Pages produits - Cliquez sur le menu déroulant du type de page 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 du type de page 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.
Article lié : Fudge Store Editor.
Article lié : Réorganiser la mise en page mobile dans Shopify.
Article lié : Supprimer une section dans Shopify.
Article lié : Ajouter des sections à la page d’accueil dans Shopify.
Article lié : 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 le contenu d’une section vers une autre, ou créer un type de section qui n’existe pas dans votre thème.
C’est au-delà de ce que permet le drag-and-drop du Theme Editor. Ces changements nécessitent de coder.
C’est là que Fudge est utile. Vous pouvez décrire la mise en page que vous souhaitez de manière naturelle, et Fudge génère les modifications de code sous forme de brouillon :
“Déplace la section des caractéristiques du produit au-dessus de la section de description du produit.”
“Restructure la page d’accueil pour que la section des témoignages apparaisse avant la section des produits en vedette.”
Fudge gère le code - vous n’avez plus qu’à vérifier avant la mise en ligne.
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
- Prévisualiser avant de valider - l’aperçu en direct affiche le nouvel ordre en temps réel avant la sauvegarde.
- Aperçu mobile - cliquez sur l’icône mobile en bas de l’éditeur pour vérifier l’apparence de vos sections réorganisées sur petits écrans.
- Annuler - si vous glissez accidentellement une section au mauvais endroit, faites Ctrl+Z (Cmd+Z sur Mac) pour annuler. Vous pouvez aussi simplement ne pas sauvegarder et rafraîchir la page.
FAQ
Pourquoi le glisser-déposer ne fonctionne-t-il pas dans mon éditeur de thème Shopify ?
Trois causes courantes : (1) la section est verrouillée (en-tête/pied de page ou thèmes qui épinglent des sections spécifiques), (2) la page est chargée à partir d’un thème brouillon mais vous visualisez le thème en ligne — passez à la vue du bon thème, ou (3) un problème de navigateur — essayez 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 template 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 les réorganisations en masse ou pour les sections sans poignée de déplacement, mais c’est plus risqué — une erreur de syntaxe JSON cassera la page. Dupliquez toujours le thème en premier.
Réorganiser les sections Shopify va-t-il affecter 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 (above the fold) et quels mots-clés 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 privilégiée vers le bas de la page peut réduire la pertinence des mots-clés de la page.
Puis-je réorganiser les sections Shopify différemment d’un template à l’autre ?
Oui — chaque template (page d’accueil, produit, collection, page sur mesure) a son propre ordre de sections. Une réorganisation sur la page d’accueil n’affecte pas les pages produits, et inversement. Les templates sur mesure (par ex. product.hero.json) conservent un ordre de sections indépendant de celui du template par défaut.
Dois-je dupliquer mon thème avant une réorganisation majeure ?
Pour une restructuration importante (refonte de la page d’accueil, changement de l’ordre de la page produit pour tous les produits), oui. Pour les réorganisations mineures (déplacer une section vers le haut ou vers le bas), non — vous pouvez revenir en arrière d’un simple glisser-déposer. La duplication est votre filet de sécurité pour les changements aux allures irréversibles. Pour des restructurations au-delà de ce que permet le glisser-déposer (déplacer du contenu entre des sections, fusionner deux sections, en diviser une en deux), décrivez ce que vous voulez à Fudge et il réécrira le template de la page pour vous.
