Réussi
Accordéon
Créez des FAQ extensibles et des lignes de détails qui gardent les contenus longs organisés et faciles à parcourir.
- Documentation Shopify sur les sections et les blocs
- Documentation Company XYZ sur les paramètres de contenu dynamique
- Documentation Shopify sur la personnalisation des sections
- Documentation Company XYZ sur le bloc accordéon
- Documentation Company XYZ sur les paramètres des en-têtes
- Documentation Company XYZ sur les paramètres d’espacement de section
- Documentation Company XYZ sur les paramètres d’arrière-plan de section
- Documentation Company XYZ sur les paramètres de séparateur
- Documentation Company XYZ sur les paramètres de visibilité
- Documentation Company XYZ sur les paramètres de largeur de mise en page
Utilisez cette section pour regrouper des FAQ, des politiques, des détails sur les produits ou d’autres réponses longues dans des lignes extensibles empilées. Vous pouvez créer le contenu manuellement avec des blocs Row, récupérer des entrées depuis un blog ou combiner les deux lorsque vous souhaitez un mélange de contenu sélectionné et de contenu mis à jour automatiquement.
Pour un aperçu plus large du comportement des sections dans l’éditeur de thème, consultez la documentation Shopify sur les sections et les blocs
Paramètres standard de section
Section intitulée « Paramètres standard de section »Les contrôles principaux de la section déterminent la manière dont l’accordéon s’insère dans la page. Content position modifie la mise en page de la zone de contenu extensible, et les options sticky peuvent maintenir visible l’en-tête de section ou l’interface pendant que les visiteurs font défiler des listes plus longues.
Le positionnement à gauche ou à droite fonctionne généralement mieux lorsque vous voulez que la section paraisse structurée à côté de son contenu d’introduction. La pleine largeur convient mieux lorsque l’accordéon lui-même est l’élément principal et que la page a besoin d’une mise en page plus simple et plus aérée.
Contenu dynamique
Section intitulée « Contenu dynamique »Ce groupe vous permet de remplir automatiquement l’accordéon à partir d’un blog. Consultez la documentation Company XYZ sur les paramètres de contenu dynamique.
Pour la configuration générale dans l’éditeur de thème, consultez la documentation Shopify sur la personnalisation des sections
Choisissez un blog lorsque vous voulez que la section se mette à jour à mesure que du contenu est ajouté au fil du temps. Vous pouvez affiner les résultats avec un tag, contrôler le nombre d’éléments affichés et trier la liste par titre ou par date de publication afin qu’elle corresponde à la manière dont les visiteurs sont les plus susceptibles de la parcourir.
Utilisez Show excerpt lorsque des entrées complètes rendraient chaque ligne trop longue. Show link to content est utile lorsque l’accordéon doit servir d’aperçu, avec l’article ou la page complète disponible comme étape suivante.
Le filtrage par tag ne fonctionne que lorsqu’un blog est sélectionné. Si aucun blog n’est choisi, la section dépend des blocs Row que vous ajoutez manuellement.
Paramètres de couleur
Section intitulée « Paramètres de couleur »Ces contrôles remplacent les couleurs de texte par défaut de cette section. Ils sont particulièrement utiles lorsque l’accordéon repose sur un arrière-plan personnalisé ou nécessite un contraste plus marqué que la page environnante.
Ajustez ensemble les couleurs des icônes, du texte et du sous-titre afin que la section conserve une apparence cohérente. Si vous utilisez une image d’arrière-plan, un dégradé ou une vidéo, vérifiez soigneusement la lisibilité avant de publier.
Types de blocs pris en charge
Section intitulée « Types de blocs pris en charge »- Row
Un bloc Row crée un élément d’accordéon repliable. Il peut utiliser du texte riche personnalisé, récupérer du contenu depuis un article de blog ou une page, et inclure éventuellement un bouton, une image ou une vidéo. En savoir plus dans la documentation Company XYZ sur le bloc Accordéon.
Si un article de blog et une page sont tous deux attribués, la page est prioritaire. Utilisez Show open by default avec parcimonie afin que la section reste compacte et facile à parcourir.
Show excerpt fonctionne bien lorsque le contenu source est trop long pour un panneau d’accordéon. Le bouton facultatif convient bien lorsqu’une ligne doit d’abord présenter un aperçu du contenu puis renvoyer vers une ressource plus complète.
Paramètres d’image
Section intitulée « Paramètres d’image »Chaque Row peut inclure une image ou une vidéo pour rendre le contenu développé plus utile ou plus attrayant. Cela est particulièrement utile pour les guides de configuration, les explications de fonctionnalités, les instructions d’entretien ou d’autres réponses qui bénéficient d’une référence visuelle.
Le placement en haut donne plus d’importance au média, tandis que le placement en bas garde la réponse écrite en premier. Pour la vidéo, une image poster donne généralement à la ligne un aspect plus soigné avant le début de la lecture.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Chaque Row dispose aussi de son propre contrôle de visibilité. Utilisez-le lorsque certaines réponses ou certains traitements média doivent apparaître uniquement sur mobile ou uniquement sur ordinateur.
Paramètres standard de section
Section intitulée « Paramètres standard de section »Paramètres d’en-tête
Section intitulée « Paramètres d’en-tête »Utilisez les contrôles d’en-tête partagés pour ajouter une introduction avec une légende, une heading, un sous-titre, une icône et un bouton facultatif. Consultez la documentation Company XYZ sur les paramètres d’en-tête.
Une heading claire aide les visiteurs à comprendre ce que couvre l’accordéon avant d’ouvrir les lignes. Si vous ajoutez un bouton, gardez-le centré sur une action logique suivante, comme visiter une page d’aide ou une ressource associée.
Paramètres d’espacement
Section intitulée « Paramètres d’espacement »Utilisez les contrôles d’espacement partagés pour ajuster l’espace au-dessus et en dessous de la section. Consultez la documentation Company XYZ sur les paramètres d’espacement.
Un espacement plus réduit aide l’accordéon à se rapprocher du contenu associé. Un espacement plus important fonctionne mieux lorsqu’il doit se démarquer comme sa propre section d’information.
Paramètres d’arrière-plan de section
Section intitulée « Paramètres d’arrière-plan de section »Utilisez les contrôles d’arrière-plan partagés pour ajouter une couleur, un dégradé, une image ou une vidéo derrière la section. Consultez la documentation Company XYZ sur les paramètres d’arrière-plan de section.
Les traitements d’arrière-plan peuvent donner plus de présence à l’accordéon, mais ils affectent aussi la lisibilité. Lors de l’utilisation d’arrière-plans média, vérifiez le contraste du texte, l’intensité de l’overlay et le niveau de densité de la section une fois les lignes développées.
Paramètres de séparateur
Section intitulée « Paramètres de séparateur »Utilisez les contrôles de séparateur partagés pour ajouter une ligne au-dessus ou en dessous de la section. Consultez la documentation Company XYZ sur les paramètres de séparateur.
Les séparateurs sont utiles lorsque l’accordéon se trouve entre d’autres sections riches en contenu et a besoin d’une frontière visuelle subtile. Gardez-les simples si la structure des lignes fournit déjà une séparation suffisante.
Paramètres de visibilité
Section intitulée « Paramètres de visibilité »Utilisez les contrôles de visibilité partagés pour afficher ou masquer l’ensemble de la section selon l’appareil. Consultez la documentation Company XYZ sur les paramètres de visibilité.
C’est utile lorsque vous souhaitez une disposition d’information différente sur mobile et sur ordinateur. Si vous masquez la section sur un appareil, assurez-vous que le même contenu reste disponible ailleurs.
Paramètres de largeur
Section intitulée « Paramètres de largeur »Utilisez les contrôles de largeur partagés pour gérer à la fois l’enveloppe de section et la zone de contenu à l’intérieur. Consultez la documentation Company XYZ sur les paramètres de largeur.
Des largeurs de contenu plus étroites sont souvent plus faciles à lire lorsque les réponses sont longues. Des réglages plus larges peuvent bien fonctionner pour des entrées courtes ou des lignes qui incluent davantage de contenu visuel, mais il vaut la peine de prévisualiser le résultat sur la boutique en ligne en direct.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Choisissez une source de contenu claire. Utilisez du contenu basé sur un blog pour les FAQ qui changent souvent, et des blocs Row manuels pour les réponses permanentes ou les mises en page personnalisées plus riches.
- Rédigez des titres de ligne faciles à parcourir. Des titres clairs, sous forme de questions ou basés sur des sujets, aident les visiteurs à trouver la bonne réponse sans ouvrir plusieurs lignes.
- Concentrez le contenu développé. Utilisez des extraits, des boutons et des liens lorsque le contenu source complet rendrait l’accordéon trop long ou trop dense.
- Limitez les lignes ouvertes par défaut. N’ouvrez par défaut que l’élément le plus important afin que la section conserve son comportement compact d’accordéon.
- Vérifiez la lisibilité sur mobile. Contrôlez ensemble le comportement sticky, les médias, l’espacement et le contraste sur les écrans plus petits avant de publier.
- Comparez les deux tailles de zone d’affichage. Vérifiez séparément les mises en page desktop et mobile lorsque vous utilisez les options de positionnement, de visibilité ou de médias, car l’accordéon peut s’afficher différemment selon la taille d’écran.
- Utilisez les remplacements avec discernement. Laissez les couleurs et les médias à leurs valeurs par défaut ou vides lorsque vous souhaitez que la section hérite du style environnant ; ajoutez des couleurs explicites, des dégradés ou des médias séparés uniquement lorsque vous souhaitez que l’accordéon se distingue.