À retenir
- Ajoutez des sections depuis l’éditeur de thème : Personnaliser > Page d’accueil > Ajouter une section.
- Les types de sections disponibles dépendent de votre thème - vous ne pouvez pas ajouter des types qui ne sont pas dans la bibliothèque de votre thème.
- Sections courantes : bannière d’image, collection en vedette, texte enrichi, image avec texte, témoignages, vidéo.
- Pour les sections qui ne figurent pas dans la bibliothèque de votre thème, utilisez Fudge pour les créer en tant que code Shopify natif.
La page d’accueil de Shopify est construite à partir de sections modulaires. Chaque section est un bloc autonome avec son propre contenu et sa propre mise en page. Ajouter des sections signifie ajouter plus d’opportunités de storytelling, de découverte de produits et de conversions sur la page principale de votre boutique.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et optimisé les pages d’accueil de centaines de boutiques Shopify. Nous avons également créé Fudge — un éditeur de vitrine IA avec une note de 5,0 sur le Shopify App Store.
Comment ajouter une section à votre page d’accueil Shopify
Étape 1. Depuis votre interface d’administration Shopify, allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Assurez-vous que le sélecteur de page en haut indique Page d’accueil. Cliquez dessus et sélectionnez Page d’accueil si nécessaire.
Étape 3. Dans la barre latérale gauche, faites défiler jusqu’en bas de la liste des sections.
Étape 4. Cliquez sur Ajouter une section.
Étape 5. Une fenêtre modale s’ouvre pour afficher tous les types de sections inclus dans votre thème. Parcourez la liste et cliquez sur la section que vous souhaitez ajouter.
Étape 6. La section est ajoutée au bas de votre page d’accueil. Glissez-la vers le haut ou vers le bas dans la barre latérale gauche pour la positionner.
Étape 7. Cliquez sur la section dans la barre latérale pour ouvrir ses paramètres et en configurer le contenu.
Étape 8. Enregistrez.
Types de sections courants sur une page d’accueil Shopify
Bannière d’image / Hero Une section pleine largeur avec une image d’arrière-plan et un texte en superposition. C’est le hero de votre page d’accueil. La plupart des thèmes l’incluent avec des paramètres pour le titre, le sous-titre, le bouton, l’opacité du calque et l’alignement du texte.
Texte enrichi Un bloc de texte centré. Très pratique pour afficher la mission de la marque, des annonces, ou toute section axée sur le contenu pour laquelle vous n’avez pas besoin d’image.
Image avec texte Une mise en page sur deux colonnes : l’image d’un côté, le texte de l’autre. Polyvalent pour raconter l’histoire de la marque, présenter de nouvelles fonctionnalités ou mettre des produits en avant.
Collection en vedette Récupère les produits d’une collection choisie pour les afficher sous la forme d’une grille. Il faut spécifier ladite collection dans les paramètres de la section.
Produit en vedette Met un seul et unique produit en avant avec son image, son titre, son prix et un bouton d’ajout au panier directement sur la page d’accueil.
Multicolonne Deux à quatre colonnes de contenu avec une image ou une icône en haut, un titre et un texte. Un choix judicieux pour une section “Comment ça marche”, les atouts de la marque ou une liste de bénéfices.
Témoignages Une grille ou un carrousel d’avis clients. Soit cette option est intégrée au thème, soit elle est disponible en tant que bloc dans d’autres sections.
Vidéo Une section avec une vidéo intégrée ou en arrière-plan. La plupart des thèmes prennent en charge les liens YouTube ou Vimeo.
Compte à rebours / Annonce Certains thèmes incluent des sections d’urgence à afficher pendant des lancements ou des soldes. Il ne s’agit pas d’une fonction universelle.
Inscription aux e-mails / Newsletter Une section d’appels à l’action pour récolter des adresses e-mail. Elle inclut généralement un champ de texte et un bouton de validation.
Liste des collections Affiche plusieurs collections sous la forme de tuiles. C’est utile pour les boutiques qui disposent de différentes catégories de produits.
À lire aussi : Pages Builder Fudge.
À lire aussi : Ajouter des blocs dans une section Shopify.
Pour en savoir plus, consultez notre guide sur la refonte de votre page d’accueil Shopify.
Pourquoi est-il impossible d’ajouter une section personnalisée en passant directement par l’éditeur de thème ?
La fenêtre modale “Ajouter une section” de l’éditeur de thème n’affiche que les sections déjà codées dans votre thème. Vous ne pouvez pas créer de nouveau type de section de A à Z à l’intérieur même de l’interface de l’éditeur de thème.
S’il vous faut un type de section non inclus par défaut (un quiz, un compte à rebours, un outil de comparaison de produits, un format de témoignages personnalisé, une barre d’annonce sticky), vous devez avoir recours à une de ces options :
A. Une application Shopify. Certaines applications ajoutent des types de sections dans la bibliothèque de l’éditeur de thème. Plutôt pratique pour des fonctions spécifiques.
B. Le code. Les développeurs ajoutent une section personnalisée au code de votre thème. Ensuite, la section apparaît dans l’éditeur de thème, fin prête à être utilisée.
C. Fudge. Expliquez ce que vous souhaitez réaliser, avec des mots très simples, et Fudge le développe sous la forme de code Liquid natif dans votre thème. Aucune capacité de programmation n’est requise de votre part.
Ajouter une section personnalisée à la page d’accueil Shopify avec Fudge
Ouvrez Fudge et décrivez ce que vous aimeriez ajouter à votre page d’accueil :
-
“Ajoute une section ‘Comment ça marche’ en trois étapes, avec une icône numérotée, un titre en gras et deux lignes de texte descriptif pour chacune d’entre elles. Place ça entre le hero et la collection en vedette.”
-
“Ajoute un carrousel de témoignages sur la page d’accueil avec cinq citations de clients, la note par étoiles, leur nom et leur lieu de résidence. Utilise en arrière-plan la couleur primaire de la marque.”
-
“Mets en place un compte à rebours pour lancer nos soldes d’été. Il doit afficher le nombre de jours, heures, minutes, secondes restants. On veut du blanc sur fond noir. En haut de la page d’accueil, sous la barre d’annonce.”
Fudge conçoit virtuellement un brouillon dans votre thème. Vous vérifiez ce que ça donne dans l’éditeur de thème, effectuez vos éventuels ajustements, puis cliquez sur Publier.
Réorganiser les sections de votre page d’accueil
Étape 1. Dans l’éditeur de thème, avec la page d’accueil sélectionnée, regardez la liste des sections dans la barre latérale gauche.
Étape 2. Survolez le nom d’une section - une poignée de déplacement apparaît.
Étape 3. Faites glisser pour obtenir l’ordre souhaité.
Étape 4. Enregistrez.
FAQ
Entre six et neuf donne généralement les meilleurs résultats. En dessous de cinq, la page d'accueil semble souvent vide ; au-dessus de dix, les acheteurs arrêtent de scroller avant la fin. Chaque section doit mériter sa place - si une section ne génère pas un clic, un ajout au panier ou ne renforce pas la confiance, supprimez-la.
Oui. Vous pouvez ajouter trois sections de texte enrichi, deux bannières d'image, quatre sections multicolonnes - tout ce dont la page a besoin. Chaque instance possède ses propres paramètres et peut donc avoir un contenu complètement différent. La seule limite est celle imposée par le max_blocks ou les limites de section de votre thème.
Trois causes courantes : (1) vous n'avez pas cliqué sur Enregistrer dans l'éditeur de thème, (2) la section a bien été ajoutée mais son contenu requis (image, collection, produits) est vide, le thème n'affiche donc rien, ou (3) la section possède des règles de visibilité dans ses paramètres (ex. : "afficher uniquement sur ordinateur") qui la cachent sur l'appareil que vous utilisez.
Pas nativement. Les sections de l'éditeur de thème sont statiques — tout le monde voit la même page d'accueil. Pour une personnalisation par client, décrivez la règle à Fudge ("afficher cette variante du hero aux clients VIP connectés, et la standard à tous les autres") et il créera une section avec du code Liquid basé sur les tags des clients, rendu côté serveur. Alternatives : Shopify Markets pour du contenu par région, ou une application de personnalisation.
Un modèle est le fichier JSON qui définit quelles sections s'affichent sur une page (par ex., index.json pour la page d'accueil). Une section est le bloc de contenu modulaire qui est affiché à l'intérieur du modèle. Les modèles composent les sections ; les sections affichent le contenu.
À lire aussi : Réorganiser les sections sur une page Shopify.