Page de collection par défaut : Sections et Bloc

Cette page affiche un groupe de produits ou de contenus associés.

Avec Concept , un thème Shopify OS 2.0 , vous avez la possibilité d'ajouterdifférentes sections sur chaque page. Cela signifie que vous pouvez entièrement personnaliser l'apparence de votre page de collection en ajoutant les sections de votre choix. Cliquez simplement sur le bouton Ajouter une section et choisissez les sections que vous souhaitez afficher sur votre page. Avec cela, vous pouvez créer une page de collection visuellement attrayante qui gardera vos visiteurs engagés et informés.

Par défaut, les pages de collection comportent les sections suivantes :

  1. Bannière de collecte
  2. Grille de produits
  3. Images avec superposition de texte
  4. Vu récemment

1. Bannière de collecte

Les paramètres de la section Bannière de collection
Paramètres des sections
 Description
Bannière de collecte

Ajoutez une description ou une image en modifiant votre collection. Apprendre encore plus .

Autoriser l'en-tête transparent Permet d'afficher un en-tête transparent.

Ce paramètre s'applique uniquement lorsque cette section est la première.

Afficher l'image de la collection Permet d'afficher les images de la collection.

Pour de meilleurs résultats, utilisez une image au format 16:9. Apprendre encore plus .

Image Choisit/télécharge l’image de la section.

Image par défaut de la collection.

Hauteur du bureau Détermine la hauteur de l'image lorsqu'elle est affichée sur le bureau :
    • S'adapter à l'image : conserve le rapport hauteur/largeur d'origine de l'image.
  • 400px - 400px.
  • 450px - 450px.
  • 500px - 500px.
  • 550px - 550px.
  • 600px - 600px.
  • 650px - 650px.
  • 700px - 700px.
  • 750px - 750px
  • Plein écran
      • - Étend l'image pour adapter la hauteur de la fenêtre du navigateur.
    Position du contenu du bureau Définit la position du contenu sur le bureau :
  • En haut à gauche
  • Milieu gauche
  • En bas à gauche
  • Centre supérieur
  • Centre central
  • En bas au centre
  • En haut à droite
  • Milieu droit
  • En bas à droite
    • Alignement du contenu du bureau Définit l'alignement du contenu sur le bureau :
  • Gauche
  • Centre
  • Droite
    • Disposition mobile
    Hauteur mobile Détermine la hauteur de l'image lorsqu'elle est visualisée sur mobile :
      • Auto - Le navigateur décidera en fonction de la valeur du bureau.
  • 200px - 200px.
  • 250px - 250px.
  • 300px - 300px.
  • 400px - 400px.
  • 500px - 500px.
  • 600px - 600px.
    • S'adapter à l'image : conserve le rapport hauteur/largeur d'origine de l'image.
    • Plein écran - Étend l'image à la hauteur de la fenêtre du navigateur.
    Position du contenu mobile Définit la position du contenu sur le navigateur mobile :
  • En haut à gauche
  • Milieu gauche
  • En bas à gauche
  • Centre supérieur
  • Centre central
  • En bas au centre
  • En haut à droite
  • Milieu droit
  • En bas à droite
    • Alignement du contenu mobile Définit l'alignement du contenu sur le navigateur mobile :
  • Gauche
  • Centre
  • Droite
    • Couleur

    		 Vous pouvez éventuellement personnaliser les couleurs de la section, notamment les suivantes :
    • Texte
    • Souligner
    • Dégradé de surbrillance
    • Texte du bouton
    • Arrière-plan du bouton
    • Dégradé de fond de bouton
    • Superposition, réglable de 0 à 100 %
    Section
    Vous pouvez ajuster le remplissage supérieur et le remplissage inférieur de 0 px à 120 px par incréments de 4 px.
    Afficher le séparateur de section Affiche un séparateur de ligne au-dessus de cette section.
    Faire une section pleine largeur Rend le conteneur sur toute la largeur.
    Rendre la section arrondie Applique un bord arrondi aux deux coins supérieurs.
    Activer l'effet de parallaxe Activez l'effet de parallaxe, qui crée l'illusion de profondeur dans une image ou une scène en deux dimensions.

    La direction de la parallaxe peut être choisie parmi les 3 options suivantes :

  • Verticale
  • Horizontal
  • Zoom
    • CSS personnalisé Ajoute du CSS personnalisé à cette section.

    Blocs disponibles :

    • 1.1 Titre du recueil
    • 1.2 Description des collections
    • 1.3 Fil d'Ariane
    • 1.4 Espace vide
    1.1 Les paramètres du cartouche de la collection.

    La taille du texte peut être définie sur l'une des options suivantes :

  • Petit
  • Moyen
  • Grand
  • Très grand
    • 1.2 Les paramètres du bloc de description de la collection.
    Paramètres de blocage
    		 Description
    Description de la collection
    Taille du texte La taille du texte peut être définie sur l'une des options suivantes :
  • Petit
  • Moyen
  • Grand
  • Extra large
  • Coutume.

    • L'option personnalisée vous permet de définir la taille du texte sur la valeur de votre choix, de 12 px à 128 px, en augmentant arithmétiquement de 2 px.

    Police du texte Choisissez entre 2 options pour le formatage du texte : Corps ou Titre .
    Utiliser une couleur secondaire Permet d'afficher la couleur secondaire.
    1.3 Les paramètres du bloc Breadcrumb.

    Permet d'afficher la page des collections dans le fil d'Ariane.

    1.4 Les paramètres du bloc Espace vide.
    Paramètres de blocage
    		 Description
    Espace libre
    Hauteur du bureau Détermine la hauteur de l'espace vide lorsqu'il est affiché sur le bureau. Peut aller de 0px à 120px, augmentant arithmétiquement de 4px. La valeur par défaut est 40px.
    Hauteur mobile Détermine la hauteur de l'espace vide lorsqu'il est affiché sur mobile. Peut aller de 0px à 120px, augmentant arithmétiquement de 4px. La valeur par défaut est 28px.

    2. Grille de produits

    Les paramètres de la section Grille produits
    Paramètres des sections Paramètres Description
    Grille de produits
    Produits par page Le nombre de produits affichés sur la page, ajusté de 6 à 50.
    Nombre de colonnes sur le bureau Le nombre de colonnes affichées sur la page, ajusté de 1 à 5.
    Nombre de colonnes sur mobile Personnalise le nombre de colonnes affichées sur le navigateur mobile : 1 colonne ou 2 colonnes .
    Filtrage et tri
    Activer le filtrage Permet aux clients de filtrer les produits de la collection en fonction des filtres de vos paramètres de navigation.

    Personnalisez les filtres avec l'application Search & Discovery. Apprendre encore plus .

    Réduire les filtres Active les filtres de réduction.
    Disposition des filtres sur le bureau Choisissez la disposition du filtre du bureau que vous préférez : Barre latérale ou Tiroir .
    Activer les échantillons de couleurs Active les échantillons de couleurs. Afficher les instructions de configuration .
    Activer le tri Permet aux clients de trier les produits de la collection en fonction des éléments suivants :
    • En vedette : produit le plus vendu, basé sur le nombre historique de commandes incluant le produit. Si vous n'avez encore vendu aucun produit, cette option trie vos produits du plus récent au plus ancien.
    • Meilleures ventes - Affiche les produits par ordre décroissant en fonction du nombre de fois que chaque produit a été commandé.
    • Par ordre alphabétique, AZ - Affiche les produits par ordre alphabétique.
    • Par ordre alphabétique, ZA - Affiche les produits par ordre alphabétique inverse.
    • Prix, bas à haut - Affiche les produits du prix le plus bas au prix le plus élevé.
    • Prix, du plus haut au plus bas - Affiche les produits du prix le plus élevé au prix le plus bas.
    • Date, de l'ancien au nouveau - Affiche les produits du plus ancien au plus récent, en fonction de la date à laquelle chaque produit a été ajouté à votre boutique.
    • Date, du nouveau à l'ancien - Affiche les produits du plus récent au plus ancien, en fonction de la date à laquelle chaque produit a été ajouté à votre boutique.
    Section
    Peut ajuster le remplissage dans le remplissage supérieur et le remplissage inférieur de 0px à 120px, augmentant arithmétiquement de 4px.
    Afficher le séparateur de section Affiche un séparateur de ligne au-dessus de cette section.
    Faire une section pleine largeur Rend le conteneur sur toute la largeur.
    Rendre la section arrondie Applique un bord arrondi aux deux coins supérieurs.
    CSS personnalisé Ajoute du CSS personnalisé à cette section.

    Blocs disponibles :

    • 2.1 Description des collections
    • 2.2 Sous-collections
    • 2.3 Promotions
    2.1 Les paramètres du bloc de description de la collection.

    Aucun paramètre personnalisable disponible.

    2.2 Les paramètres du bloc Sous-collection.
    Paramètres de blocage Description
    Sous-collections

    Les liens vers les collections de votre menu apparaîtront ici. Apprendre encore plus .

    Menu Choisit/Sélectionne le menu que vous souhaitez afficher.
    Sous-collections par ligne Choisissez le nombre de sous-collections à afficher par ligne, de 2 à 5.
    Afficher le nombre de collectes Affiche le nombre de produits dans chaque collection.
    2.3 Les paramètres du bloc Promotion.
    Paramètres de blocage Description
    Promotion

    Les blocs peuvent être masqués si trop peu de produits sont visibles.

    Position dans la grille Les coordonnées du bloc dans la grille, de gauche à droite et de haut en bas.
    Image Choisit/télécharge l’image du bloc.
    Icône Choisit/télécharge l’image de l’icône.
    Titre Le titre du bloc.
    Description Le texte de description du titre est placé sous le titre.
    Etiquette du bouton Le texte qui s'affiche sur le bouton.
    Lien du bouton L'URL du bouton.
    Position du contenu du bureau Définit la position du contenu sur le bureau :
  • Haut
  • Milieu
  • Bas
    • Alignement du contenu du bureau Définit l'alignement du contenu sur le bureau :
  • Gauche
  • Centre
  • Droite
    • Disposition mobile
    Image mobile Image de la section sur navigateur mobile.
    Position du contenu mobile Définit la position du contenu sur le navigateur mobile :
  • Haut
  • Milieu
  • Bas
    • Alignement du contenu mobile Définit l'alignement du contenu sur le navigateur mobile :
  • Gauche
  • Centre
  • Droite
    • Couleur

    		 Vous pouvez éventuellement personnaliser les couleurs de la section, notamment les suivantes :
    • Texte
    • Texte du bouton
    • Arrière-plan du bouton
    • Dégradé de fond de bouton
    • Superposition, réglable de 0 à 100 %

    3. Images avec texte

    Cette section vous permet d'afficher jusqu'à 5 images simultanément, offrant une plus grande flexibilité de conception pour votre page.

    Les paramètres de la section Images avec texte
    Paramètres des sections Description
    Images avec superposition de texte
    Autoriser l'en-tête transparent Ce paramètre s'applique uniquement lorsque cette section est la première
    Hauteur du bureau Détermine la hauteur de l'image lorsqu'elle est affichée sur le bureau :
  • 400px - 400px.
  • 450px - 450px.
  • 500px - 500px
  • 550px - 550px.
  • 600px - 600px
  • 650px - 650px.
  • 700px - 700px
  • 750px - 750px
  • Plein écran
      • - Étend l'image pour adapter la hauteur de la fenêtre du navigateur.
    Largeur du contenu du bureau Détermine la largeur de l'image lorsqu'elle est affichée sur le bureau :
  • Petit
  • Moyen
  • Grand
    • Position du contenu du bureau Définit la position du contenu sur le bureau :
  • En haut à gauche
  • Milieu gauche
  • En bas à gauche
  • Centre supérieur
  • Centre central
  • En bas au centre
  • En haut à droite
  • Milieu droit
  • En bas à droite
    • Alignement du contenu du bureau Définit l'alignement du contenu sur le bureau :
  • Gauche
  • Centre
  • Droite
    • Image

    #1 #2 #3 #4 #5

    		 Les images de la section sur le navigateur de bureau.
    Disposition mobile
    Hauteur mobile Détermine la hauteur de l'image lorsqu'elle est visualisée sur mobile :
      • Auto - Le navigateur décidera en fonction de la valeur du bureau.
  • 200px - 200px.
  • 250px - 250px.
  • 300px - 300px.
  • 400px - 400px.
  • 500px - 500px.
  • 600px - 600px
  • Plein écran
      • - Étend l'image à la hauteur de la fenêtre du navigateur.
    Position du contenu mobile Définit la position du contenu sur le navigateur mobile :
  • En haut à gauche
  • Milieu gauche
  • En bas à gauche
  • Centre supérieur
  • Centre central
  • En bas au centre
  • En haut à droite
  • Milieu droit
  • En bas à droite
    • Alignement du contenu mobile Définit l'alignement du contenu sur le navigateur mobile :
  • Gauche
  • Centre
  • Droite
    • Couleur

    		 Vous pouvez éventuellement personnaliser les couleurs de la section, notamment les suivantes :
    • Texte
    • Arrière-plan
    • Dégradé de fond
    • Souligner
    • Dégradé de surbrillance
    • Texte du bouton
    • Arrière-plan du bouton
    • Dégradé de fond de bouton
    Section
    Peut ajuster le remplissage dans le remplissage supérieur et le remplissage inférieur de 0px à 120px, augmentant arithmétiquement de 4px.
    Afficher le séparateur de section Affiche un séparateur de ligne au-dessus de cette section.
    Faire une section pleine largeur Rend le conteneur sur toute la largeur.
    Rendre la section arrondie Applique un bord arrondi aux deux coins supérieurs.
    Activer l'effet de parallaxe Activez l’affichage de l’effet de parallaxe, qui crée l’illusion de profondeur dans une image ou une scène bidimensionnelle.
    CSS personnalisé Ajoute du CSS personnalisé à cette section.

    Blocs disponibles :

    • 3.1 Titre
    • 3.2 Sous-titre
    • 3.3 Texte
    • 3.4 Bouton
    • 3.5 Lien
    • 3.6 Image
    • 3.7 Liquide personnalisé
    • 3.8 Espace vide
    3.1 Les paramètres du bloc Titre.
    Paramètres de blocage
    		 Description
    Titre
    Titre Le titre du bloc.
    Taille du titre La taille du titre peut être définie sur l'une des options suivantes : Small , Medium , Large ou Extra large .
    Balise de titre Sélectionne la balise de titre pour structurer et organiser votre contenu pour le référencement.
    Texte surligné

    Texte surligné Choisissez parmi l'une des 6 options suivantes pour formater votre texte :
    • Couleur du texte
    • Couleur d’arrière-plan du texte
    • Soulignement fantaisie
    • Soulignement régulier
    • Texte au pochoir
    • Griffonnage dessiné à la main
    Griffonnage surligné

    Exiger que le style de texte en surbrillance soit défini sur Griffonnage dessiné à la main.

    		 Ce paramètre propose 5 façons de surligner du texte :
    • Cercle
    • Soulignement de base
    • Soulignement de l'esquisse
    • Soulignement en gribouillis
    • Gribouillis souligné 2
    3.2 Les paramètres du bloc Sous-titre.
    Paramètres de blocage
    		 Description
    Sous-titre
    Sous-titre Le sous-titre du titre.
    Taille du sous-titre Taille du sous-titre :
  • Petit
  • Moyen
  • Grand
    • Utiliser une couleur secondaire Applique une couleur un peu plus claire en fonction de la couleur du texte.
    3.3 Les paramètres du bloc Texte.
    Paramètres de blocage
    		 Description
    Texte
    Texte Ajout de votre texte.

    Taille du texte La taille du texte peut être définie sur l'une des options suivantes :
  • Petit
  • Moyen
  • Grand
  • Extra large
  • Coutume.

    • L'option personnalisée vous permet de définir la taille du texte sur la valeur de votre choix, de 12 px à 128 px, en augmentant arithmétiquement de 2 px.

    Police du texte Choisissez entre 2 options pour le formatage du texte : Corps ou Titre .
    Utiliser une couleur secondaire Activer la couleur secondaire.
    Texte surligné

    Texte surligné Choisissez parmi l'une des 6 options suivantes pour formater votre texte :
    • Couleur du texte
    • Couleur d’arrière-plan du texte
    • Soulignement fantaisie
    • Soulignement régulier
    • Texte au pochoir
    • Griffonnage dessiné à la main
    Griffonnage surligné

    Exiger que le style de texte en surbrillance soit défini sur Griffonnage dessiné à la main.

    		 Ce paramètre propose 5 façons de surligner du texte :
    • Cercle
    • Soulignement de base
    • Soulignement de l'esquisse
    • Soulignement en gribouillis
    • Gribouillis souligné 2
    3.4 Les paramètres du bloc Bouton.
    Paramètres de blocage
    		 Description
    Bouton
    Etiquette du bouton Le texte qui s'affiche sur le bouton.
    Lien du bouton L'URL du bouton.
    Taille du bouton Ajuste la taille du bouton en 3 options : Petit, Moyen ou Grand
    Utiliser le style du bouton de contour Utilise le style de contour du bouton.
    3.5 Les paramètres du bloc Lien.
    Paramètres de blocage
    		 Description
    Lien
    Texte Le texte du lien, placé juste à côté du bouton.
    Lien Ajoute l'URL que vous souhaitez lier.
    3.6 Les paramètres du bloc Image.
    Paramètres de blocage
    		 Description
    Image
    Image Sélectionne une image à bloquer.
    Largeur de l'image Choisissez l'une des deux options de largeur d'image :
    • Pleine largeur : l'image remplit toute la fenêtre du navigateur.
    • Personnalisé : définit la largeur de l'image entre 20 px et 1 000 px par incréments de 10 px.
    3.7 Les paramètres du bloc de liquide personnalisé.

    Vous pouvez ajouter votre propre code Liquid pour créer un bloc personnalisé.

    3.8 Les paramètres du bloc Espace vide.
    Paramètres de blocage
    		 Description
    Espace libre
    Hauteur du bureau Détermine la hauteur de l'espace vide lorsqu'il est affiché sur le bureau. Peut aller de 0px à 120px, augmentant arithmétiquement de 4px. La valeur par défaut est 40px.
    Hauteur mobile Détermine la hauteur de l'espace vide lorsqu'il est affiché sur mobile. Peut aller de 0px à 120px, augmentant arithmétiquement de 4px. La valeur par défaut est 28px.

    4. Récemment consulté

    Aide vos clients à trouver les produits qu'ils ont déjà visités et les incite à acheter. Il est ainsi plus facile pour vos clients de les retrouver plutôt que de se repérer dans le menu de navigation.

    Les paramètres de la section Récemment consultés
    Paramètres des sections
    		 Description
    Vu récemment
    Nombre de produits récents Le nombre de produits complémentaires peut aller de 2 à 12.
    Nombre de colonnes sur le bureau Personnalise le nombre de colonnes affichées sur le navigateur de bureau de 1 colonne à 5 colonnes
    Activer le carrousel sur le bureau Affiche un carrousel de produits de la collection sur un navigateur de bureau.
    Disposition mobile
    Nombre de colonnes sur mobile Personnalise le nombre de colonnes affichées sur le navigateur mobile : 1 colonne ou 2 colonnes .
    Activer le balayage sur mobile Définit l’affichage mobile sur une ligne avec un balayage horizontal.
    Titre
    Titre Le titre de la section.
    Taille du titre La taille du titre peut être définie sur l'une des options suivantes : Small , Medium , Large ou Extra large .
    Alignement du cap Le titre peut être aligné à gauche , au centre ou à droite .
    Balise de titre Sélectionne la balise de titre pour structurer et organiser votre contenu pour le référencement.
    Sous-titre Le sous-titre du titre est placé au-dessus du titre.
    Description Le texte de description du titre est placé sous le titre.
    Texte surligné

    Texte surligné Choisissez parmi l'une des 6 options suivantes pour formater votre texte :
    • Couleur du texte
    • Couleur d’arrière-plan du texte
    • Soulignement fantaisie
    • Soulignement régulier
    • Texte au pochoir
    • Griffonnage dessiné à la main
    Griffonnage surligné

    Exiger que le style de texte en surbrillance soit défini sur Griffonnage dessiné à la main.

    		 Ce paramètre propose 5 façons de surligner du texte :
    • Cercle
    • Soulignement de base
    • Soulignement de l'esquisse
    • Soulignement en gribouillis
    • Gribouillis souligné 2
    Couleur

    		 Vous pouvez éventuellement personnaliser les couleurs de la section, notamment les suivantes :
    • Texte
    • Arrière-plan
    • Dégradé de fond
    • Souligner
    • Dégradé de surbrillance
    • Texte du bouton
    • Arrière-plan du bouton
    • Dégradé de fond de bouton
    Section
    Peut ajuster le remplissage dans le remplissage supérieur et le remplissage inférieur de 0px à 120px, augmentant arithmétiquement de 4px.
    Afficher le séparateur de section Affiche un séparateur de ligne au-dessus de cette section.
    Faire une section pleine largeur Rend le conteneur sur toute la largeur.
    Rendre la section arrondie Applique un bord arrondi aux deux coins supérieurs.
    CSS personnalisé Ajoute du CSS personnalisé à cette section.

    Cette section ne prend pas en charge l'ajout de blocs.

    Nous espérons que cet article vous a été utile. Si vous avez des questions ou des préoccupations concernant cette fonctionnalité, n'hésitez pas à contacter notre équipe pour obtenir de l'aide.

    Back to Soyez le support du concept