Liste de collections

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Company XYZ sur les paramètres de mise en page
3. Documentation Company XYZ sur les paramètres des contrôles du diaporama
4. Documentation Company XYZ sur les paramètres d’en-tête
5. Documentation Company XYZ sur les paramètres de carte
6. Documentation Company XYZ sur les paramètres d’espacement de section
7. Documentation Company XYZ sur les paramètres d’arrière-plan de section
8. Documentation Shopify sur la personnalisation des sections
9. Documentation Company XYZ sur les paramètres de séparateur
10. Documentation Company XYZ sur les paramètres de visibilité
11. Documentation Company XYZ sur les paramètres de largeur de mise en page

Vidéos utiles

Vidéo Shopify Academy : Personnaliser votre boutique

Vidéo Shopify Academy : Personnaliser votre boutique

Utilisez cette section pour mettre en avant des collections sélectionnées sous forme de cartes visuelles qui aident les clients à parcourir les catégories. Elle fonctionne particulièrement bien sur les pages d’accueil, les pages d’atterrissage et les pages de campagne, lorsque vous souhaitez orienter les visiteurs vers la bonne partie de votre catalogue.

Paramètres de base

Commencez par sélectionner les collections que vous souhaitez afficher. Cette section est idéale pour la découverte de collections et la navigation par catégorie, plutôt que pour mettre en avant des produits individuels choisis à la main. Pour un aperçu plus large du fonctionnement des sections dans l’éditeur, consultez la documentation Shopify sur les sections et les blocs

Paramètres de mise en page

Utilisez les contrôles de mise en page pour choisir combien de cartes de collection apparaissent sur ordinateur, tablette et mobile, et si chaque appareil utilise une grille ou un diaporama. Consultez les paramètres de mise en page.

Le paramètre de colonnes pour tablette peut hériter du nombre de colonnes du bureau lorsqu’il est laissé à 0, ce qui est utile si vous souhaitez moins d’ajustements spécifiques par appareil. Si votre mise en page sur ordinateur paraît trop dense sur les écrans de taille moyenne, définissez explicitement une valeur pour la tablette au lieu de vous appuyer sur la mise en page héritée.

Une mise en page qui paraît équilibrée sur ordinateur peut sembler encombrée sur des écrans plus petits. Il est souvent préférable de réduire le nombre de colonnes ou de passer le mobile en diaporama pour faciliter la navigation.

Paramètres du diaporama

Lorsqu’un appareil utilise la mise en page en diaporama, ces paramètres contrôlent le déplacement de la section et la façon dont les clients naviguent entre les cartes de collection. Consultez les contrôles du diaporama.

L’animation en fondu crée une présentation plus simple et plus ciblée, mais elle limite aussi la mise en page à une seule diapositive visible à la fois et n’affiche pas la pagination. Utilisez-la lorsque vous souhaitez un rendu promotionnel plus épuré, et non lorsque la consultation rapide de plusieurs collections est plus importante.

La lecture automatique peut ajouter du mouvement, mais elle doit rester utile plutôt que distrayante. La pause au survol est particulièrement utile sur ordinateur afin que les clients puissent arrêter le mouvement pendant qu’ils décident où cliquer.

L’aperçu de la diapositive suivante peut rendre la section plus interactive, en particulier sur les appareils tactiles. Si vous souhaitez une mise en page plus propre et plus contenue, désactivez cet aperçu.

Paramètres de couleur des cartes

Utilisez ces paramètres pour remplacer, pour cette section uniquement, les couleurs des cartes utilisées ailleurs dans le thème. Cela est utile lorsque la liste de collections nécessite un aspect promotionnel plus marqué ou lorsque l’arrière-plan de la section environnante appelle un contraste différent pour les cartes.

Les contrôles de superposition de bannière s’appliquent uniquement lorsque vous utilisez le style de carte Bannière. Pour les autres styles de carte, concentrez-vous sur les couleurs d’arrière-plan, de bordure, de titre et de texte afin de conserver des cartes lisibles et visuellement cohérentes.

Paramètres de couleur

Ces contrôles remplacent les couleurs de l’icône, du titre et du texte d’accompagnement de la section. Ils sont particulièrement utiles lorsque vous ajoutez un arrière-plan de section personnalisé et que vous souhaitez que le contenu de l’en-tête se démarque plus clairement.

Conservez un contraste de texte élevé à la fois avec l’arrière-plan de la section et avec la zone de carte en dessous. De petits ajustements ici peuvent rendre la section plus soignée sans modifier le design de la carte lui-même.

Paramètres standard de section

Paramètres d’en-tête

Utilisez les Paramètres d’en-tête partagés pour ajouter une introduction au-dessus des cartes de collection, notamment l’alignement, le titre, la légende, le texte d’accompagnement et un bouton facultatif. Consultez les Paramètres d’en-tête.

C’est un bon endroit pour expliquer ce qui relie les collections mises en avant, comme la saison, le type de produit ou le public visé. Si vous ajoutez un bouton, utilisez-le pour une action suivante claire, comme afficher toutes les collections ou ouvrir une page d’atterrissage associée.

Paramètres de carte

Utilisez les Paramètres de carte partagés pour contrôler l’apparence de chaque carte de collection, notamment le style, le format d’image, l’affichage du texte, l’alignement et le traitement du bouton. Consultez les Paramètres de carte.

Ces paramètres remplacent les valeurs par défaut plus générales du thème pour cette section uniquement, ce qui est utile lorsque les collections mises en avant nécessitent une présentation différente du reste du site. Les cartes Bannière sont plus spectaculaires, tandis que les styles rembourrés plus simples sont souvent plus faciles à parcourir dans des grilles plus grandes.

Note

L’alignement vertical du texte n’a d’effet sur les cartes que lorsque le style de carte Bannière est utilisé.

Paramètres d’espacement

Utilisez les Paramètres d’espacement partagés pour ajuster l’espace au-dessus et au-dessous de la section. Consultez les Paramètres d’espacement.

Un espacement plus important aide la liste de collections à ressembler à une zone de navigation distincte, tandis qu’un espacement plus serré fonctionne mieux lorsqu’il soutient le contenu voisin. Vérifiez l’espacement sur ordinateur et mobile afin que la section paraisse équilibrée dans son contexte.

Paramètres d’arrière-plan de section

Utilisez les Paramètres d’arrière-plan de section partagés pour ajouter une couleur, un dégradé, une image ou une vidéo derrière la section. Consultez les Paramètres d’arrière-plan de section.

Les arrière-plans peuvent rendre la section plus éditoriale ou orientée campagne, mais ils affectent aussi la lisibilité et l’impression d’espacement. Si vous utilisez un arrière-plan d’image ou de vidéo, assurez-vous que le texte de l’en-tête conserve un contraste suffisant et utilisez des superpositions si nécessaire. Pour les détails de configuration au niveau de l’éditeur, consultez la documentation Shopify sur la personnalisation des sections

Paramètres de séparateur

Utilisez les Paramètres de séparateur partagés pour ajouter une ligne en haut ou en bas de la section. Consultez les Paramètres de séparateur.

Les séparateurs sont utiles lorsque cette section se trouve entre des zones de contenu visuellement similaires et a besoin d’une limite plus claire. Gardez-les discrets, sauf si vous souhaitez une rupture structurelle plus marquée.

Paramètres de visibilité

Utilisez les Paramètres de visibilité partagés pour contrôler si la section apparaît sur ordinateur, mobile ou les deux. Consultez les Paramètres de visibilité.

Cela est utile lorsque vous souhaitez des versions distinctes de la section pour différents appareils, comme une grande grille sur ordinateur et un curseur plus simple sur mobile. Si vous créez des versions spécifiques à chaque appareil, gardez les collections mises en avant et le message cohérents.

Paramètres de largeur

Utilisez les Paramètres de largeur partagés pour contrôler la largeur du contenu de la section et la largeur extérieure de la section. Consultez les Paramètres de largeur.

Des largeurs plus importantes prennent en charge des grilles plus grandes et davantage de colonnes, tandis que des largeurs plus étroites peuvent donner à un ensemble plus restreint de collections une impression plus soignée. Si vous utilisez un arrière-plan, prévisualisez les changements de largeur sur la boutique en ligne active, car le cadrage de l’éditeur peut faire paraître l’espacement différent de ce qu’il est sur la page.

Conseils d’utilisation

1. Groupez les collections de manière intentionnelle. Choisissez des collections qui partagent un thème clair afin que la section paraisse soigneusement sélectionnée plutôt que comme un répertoire.
2. Adaptez la mise en page à l’objectif. Utilisez une grille pour comparer rapidement plusieurs collections, et utilisez un diaporama lorsque l’espace est limité ou que la navigation tactile est plus importante.
3. Gardez les cartes faciles à lire. Les superpositions fortes, les couleurs personnalisées et les styles Bannière fonctionnent mieux lorsque le texte reste lisible sur les images de collection.
4. Ajoutez un contexte utile à l’en-tête. Un titre court et un bref texte d’accompagnement peuvent rendre les collections mises en avant plus faciles à comprendre d’un coup d’œil.
5. Vérifiez chaque taille d’écran. Les colonnes, le comportement du diaporama et les choix de largeur peuvent paraître très différents entre ordinateur, tablette et mobile.
6. Examinez attentivement les médias spécifiques à chaque appareil. Des images séparées pour ordinateur et mobile peuvent modifier le recadrage, le chargement, le comportement de repli et la lisibilité.
7. Traitez le contenu de navigation comme un parcours client. Les liens réorganisés, masqués ou réservés au mobile peuvent modifier ce que les clients peuvent atteindre depuis la section.