Ajouter du contenu - Produits

Utilisez la variable Produits type de contenu pour ajouter une liste de produits au Page Builder étape, à l’aide d’une mise en page de grille ou de carrousel. Utilisez la variable Ajouter du contenu - Bloc pour placer le bloc sur la balise Page Builder étape, puis placer une liste de produits dans le bloc. Vous pouvez également ajouter la liste de produits directement dans une ligne d’une page.

Instructions relatives à l’utilisation du carrousel de produit

Le carrousel de produit offre un moyen puissant et attrayant de présenter vos produits. Pour en tirer le meilleur parti, les instructions suivantes sont recommandées :

  • Ajoutez des carrousels de produit directement aux conteneurs de largeur de page tels que des lignes, des onglets ou des mises en page à une seule colonne. L’utilisation de dispositions de largeur de page garantit un affichage réactif optimal de vos produits. Page Builder réduit le nombre de produits affichés en fonction de la largeur de la page et non de la largeur du conteneur.

  • N’ajoutez pas de carrousel de produit à une colonne étroite. Comme mentionné ci-dessus : Page Builder, par défaut, détermine le nombre de produits à afficher en fonction de la largeur de page et non de la largeur de colonne.

  • Si vous souhaitez que le carrousel de votre produit fasse défiler automatiquement en continu, définissez les deux Autoplay et Infinite Loop to Yes. Si la lecture automatique est définie sur Yes mais la boucle infinie est définie sur No, le défilement automatique s’arrête à la fin de la liste de produits.

  • Définissez la variable Carousel Mode to Continuous pour mettre en évidence, centrer et faire défiler un produit à la fois dans le carrousel. Les autres produits sont visibles dans la liste, mais transparents pour mettre en évidence le produit centré.

    Liste de produits en mode carrousel continu {width="600"}

  • Pour afficher et faire défiler jusqu’à cinq produits à la fois dans le carrousel, conservez la variable Carousel Mode défini sur Default.

    Liste de produits en mode carrousel par défaut {width="600"}

Les instructions suivantes expliquent comment ajouter une liste de produits à un bloc. Vous pouvez ensuite utiliser une widget pour placer le bloc à un emplacement spécifique sur une page de votre magasin.

NOTE
Si vous apportez des modifications importantes à la variable Page Builder , il est recommandé d’augmenter le nombre de Durée de vie de la session d’administration pour empêcher l’expiration de la session pendant que vous travaillez.

Boîte à outils Produits

Outil
Icône
Description
Déplacer
Icône Déplacer {width="25"}
Déplace le conteneur de produits et son contenu vers une autre position sur la scène.
Paramètres
Icône Paramètres {width="25"}
Ouvre la Modifier les produits dans laquelle vous pouvez sélectionner la liste de produits et modifier les propriétés du conteneur.
Masquer
Icône Masquer {width="25"}
Masque le conteneur de produits actuel et son contenu.
Afficher
Icône Afficher {width="25"}
Affiche le conteneur de produits masqué et son contenu.
Dupliquer
Icône Dupliquer {width="25"}
Effectue une copie du conteneur de produits et de son contenu.
Supprimer
Icône Supprimer {width="25"}
Supprime le conteneur de produits et son contenu de la scène.
NOTE
Les éléments masqués sont stockés dans la base de données et invisibles pour les clients. Toutefois, ces éléments sont visibles par les moteurs de recherche et d’autres robots qui analysent votre site. Elles sont également renvoyées dans le cadre du contenu si nécessaire par le biais d’un appel API avec un attribut d’invisibilité, sauf si vous les supprimez de l’étape.

Création d’un bloc de liste de produits

  1. Sur le Administration barre latérale, accédez à Content > Elements>Blocks.

  2. Cliquez sur Add New Block.

  3. Saisissez le Block Title et Identifier.

  4. Choisissez la Store View où le bloc doit être disponible.

  5. Faites défiler la page vers le bas et cliquez sur Edit with Page Builder ou dans la zone d’aperçu du contenu pour ouvrir la Page Builder workspace.

  6. Dans le Page Builder panneau, développer Add Content et faites glisser un Products espace réservé sur la scène.

    Ajouter un type de contenu Produits {width="600" modal="regular"}

Configuration du conteneur de la liste de produits

Passez la souris sur le champ vide Produits pour afficher la boîte à outils, puis cliquez sur l’icône Paramètres ( Icône Paramètres {width="20"} ).

Boîte à outils Produits

Procédez comme suit : Paramètres selon les sections suivantes :

Apparence

  1. Pour déterminer l’affichage de la liste de produits sur la page, choisissez l’un des types d’aspect suivants :

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Type Description
    Grille de produits Affiche les produits dans une grille qui affiche cinq produits par ligne (par défaut), avec autant de lignes que nécessaire pour afficher le nombre entré dans la variable Number of Products to Display .
    Carrousel de produit Affiche les produits dans un carrousel (également appelé curseur). Le carrousel affiche jusqu’à cinq produits par diapositive.

    Alerte de réaction: lorsque vous sélectionnez cet aspect, il est préférable d’ajouter le type de contenu Produits directement à une disposition de ligne, d’onglet ou d’une colonne où il est réactif, en affichant moins de produits par côté sur des écrans plus petits. Si vous l’ajoutez à des types de contenu plus limités que la largeur de la page (une colonne étroite, par exemple), le carrousel affiche plus de produits par diapositive que ne le permet le conteneur, quelle que soit la taille de l’écran.

    Apparence du produit {width="300"}

    Si vous choisissez le carrousel de produit, vous devez également configurer la variable Paramètres du carrousel.

  2. Pour Select Products By, choisissez la méthode de sélection de produit :

    Vous pouvez sélectionner vos produits par catégorie, SKU ou condition. Ces options s’excluent mutuellement. Par exemple, vous ne pouvez pas sélectionner l’option Catégorie, utiliser le sélecteur de catégorie, puis passer à l’option Condition pour ajouter certaines conditions. Vos produits ne sont sélectionnés que selon ce que vous avez défini pour one de ces trois options.

    • Category - Sélectionnez cette option pour afficher les produits utilisant une catégorie sélectionnée.

      Sélection de produit par catégorie {width="500"}

      Lorsque cette option est sélectionnée, une Category sélecteur. Cliquez sur la flèche et faites défiler l’écran pour sélectionner la catégorie de produits à afficher. Par exemple, dans la variable Commerce données d’exemple, exploration et sélection Women > Tops > Tees affiche tous les produits de cette catégorie.

      Sélectionner une catégorie de catalogue {width="500"}

    • SKU - Sélectionnez cette option pour afficher les produits à l’aide d’un ou de plusieurs SKU

      Lorsque cette option est sélectionnée, une Product SKUs zone de texte dans laquelle vous devez entrer une liste de SKU séparés par des virgules à afficher.

      Sélection de produit par SKU {width="500"}

    • Condition - Sélectionnez cette option pour afficher les produits selon une ou plusieurs conditions que vous avez définies.

      Lorsque cette option est sélectionnée, des outils sont disponibles pour ajouter des conditions à votre sélection de produits. Par exemple, vous pouvez sélectionner uniquement les produits dont le genre est défini sur Unisex.

      Sélection du produit par condition {width="500"}

      note note
      NOTE
      La sélection de l’option Catégorie ou SKU fournit la variable Sort By option de Position. Avec cette option de tri, les produits apparaissent dans l’ordre dans lequel ils apparaissent dans votre catalogue.
      Pour l’option Catégorie , le tri par position affiche les produits dans l’ordre dans lequel ils apparaissent dans votre catalogue. Pour l’option SKU, le tri par position affiche les produits dans l’ordre dans lequel vous les saisissez dans la variable Product SKUs textbox.
  3. Pour Sort By, choisissez l’ordre de tri des produits de la liste :

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 11-row-2 layout-auto
    Option Description
    Position (pour les options Catégorie et SKU uniquement) Lorsque vous sélectionnez l’option Catégorie , la Position affiche les produits dans le même ordre que leur position dans le catalogue. Lorsque vous sélectionnez l’option SKU, la position affiche les produits dans le même ordre que les SKU dans la zone de texte des SKU du produit.
    Newest products first Trie les produits par date d’ajout au catalogue, en affichant d’abord les produits dont les dates d’entrée sont les plus récentes.
    Oldest products first Trie les produits par date d’ajout au catalogue, en affichant d’abord les produits avec les dates d’entrée les plus anciennes.
    Name: A - Z Trie les produits par ordre alphabétique.
    Name: Z - A Trie les produits par ordre alphabétique inverse.
    SKU: ascending Trie les produits par SKU par ordre alphanumérique.
    SKU: descending Trie les produits par SKU dans l’ordre alphanumérique inverse.
    Stock: low stock first Trie les produits du stock le plus faible au stock le plus élevé disponible.
    Stock: high stock first Trie les produits du stock le plus élevé au plus faible disponible.
    Price: high to low Trie les produits du prix le plus élevé au plus faible.
    Price: low to high Trie les produits du prix le plus bas au plus élevé.

    Options de tri des produits {width="300"}

  4. Saisissez le Number of Products to Display dans le carrousel ou la grille.

    Les valeurs peuvent provenir de 1 to 999. La valeur par défaut est 5 pour une grille et 20 pour un carrousel.

    note note
    NOTE
    Certains produits des paramètres Catégorie, SKU ou Condition peuvent ne pas apparaître dans votre grille ou carrousel de produits. Par exemple, les produits désactivés, les produits marqués comme non visibles, les produits en rupture de stock et les produits affectés à un autre site web ne s’affichent pas.
    note important
    IMPORTANT
    Les prix des produits configurables, groupés et regroupés (prix dynamique) ne sont pas définis dans l’Admin. Par conséquent, ces produits ne s’affichent pas dans la variable Preview si les produits sont filtrés par prix. Ces produits ne peuvent pas être commandés correctement dans la variable Preview si le prix commande.

Paramètres du carrousel

  1. Pour déterminer l’affichage des produits dans le carrousel, choisissez la variable Carousel Mode:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Option Description
    Default Par défaut, le carrousel affiche cinq produits par diapositive et réduit de manière réactive ce nombre selon les besoins.
    Continuous Le carrousel affiche cinq produits par diapositive par défaut (avec la moitié d’un produit à droite et à gauche), mais il centre et fait défiler un produit à la fois en boucle infinie. Les produits situés à droite et à gauche du produit centré sont grisés afin que le produit central soit mis en surbrillance.

    Si vous basculez entre ces deux modes, les autres paramètres du carrousel sont conservés, à l’exception de la variable Infinite Loop qui est toujours défini sur Yes en mode continu et que le champ est désactivé.

    Paramètres du carrousel {width="600" modal="regular"}

  2. Si nécessaire, définissez la variable Autoplay option à Yes.

    Lorsque la lecture automatique est activée, le carrousel commence à défiler automatiquement au chargement de la page. Si vous laissez le paramètre par défaut (No), le client doit cliquer sur la navigation de la diapositive (points ou flèches) pour afficher chaque diapositive dans l’ordre.

    Si vous activez cette fonction, saisissez Autoplay Speed pour spécifier le délai en millisecondes entre chaque diapositive. La valeur par défaut est 4000 (4 secondes).

  3. Si nécessaire, définissez la variable Infinite Loop option à Yes.

    Lorsque la boucle infinie est activée, le diaporama est lu indéfiniment pendant que la page est ouverte. Si vous laissez le paramètre par défaut (No), le diaporama n’est lu qu’une seule fois.

    note note
    NOTE
    Si vous définissez Infinite Loop to No et Autoplay défini sur Yes, la lecture automatique s’arrête à la fin du nombre de produits à afficher.
  4. Si nécessaire, définissez la variable Show Arrows option à Yes.

    Lorsque cette option est activée, chaque diapositive comprend next et previous flèches de navigation à gauche et à droite. Si vous laissez le paramètre par défaut (No), les diapositives n’affichent pas les flèches de navigation.

  5. Si nécessaire, définissez la variable Show Dots option à No.

    Lorsque ce paramètre est défini sur le paramètre par défaut (Yes), les points de navigation apparaissent au bas du curseur du carrousel. Si vous désactivez ce paramètre, le curseur du carrousel n’affiche pas de points de navigation.

Avancé

  1. Pour contrôler le positionnement de la liste Produits dans le conteneur parent, sélectionnez la variable Alignment:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Option Description
    Default Applique le paramètre d’alignement par défaut spécifié dans la feuille de style du thème actif.
    Left Aligne la liste le long de la bordure gauche du conteneur parent, en tenant compte de toute marge intérieure spécifiée.
    Center Aligne la liste au centre du conteneur parent, en tenant compte de toute marge intérieure spécifiée.
    Right Aligne la liste le long de la bordure droite du conteneur parent, en tenant compte de toute marge intérieure spécifiée.
  2. Définissez la variable Border style appliqué aux quatre côtés du conteneur Produits :

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Option Description
    Default Applique le style de bordure par défaut spécifié par la feuille de style associée.
    None Ne fournit aucune indication visible des bordures du conteneur.
    Dotted La bordure du conteneur s’affiche sous la forme d’une ligne pointillée.
    Dashed La bordure du conteneur s’affiche sous la forme d’une ligne en pointillés.
    Solid La bordure du conteneur s’affiche sous la forme d’une ligne pleine.
    Double La bordure du conteneur s’affiche sous la forme d’une ligne double.
    Groove La bordure du conteneur s’affiche sous forme de ligne droite.
    Ridge La bordure du conteneur s’affiche sous la forme d’une ligne à droite.
    Inset La bordure du conteneur s’affiche sous la forme d’une ligne d’insertion.
    Outset La bordure du conteneur apparaît comme une ligne de départ.
  3. Si vous définissez un style de bordure autre que None, renseignez les options d’affichage des bordures :

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Description
    Border Color Définissez la couleur en choisissant un échantillon, en cliquant sur le sélecteur de couleurs ou en saisissant un nom de couleur valide ou une valeur hexadécimale équivalente.
    Border Width Saisissez le nombre de pixels pour la largeur de la ligne de bordure.
    Border Radius Saisissez le nombre de pixels pour définir la taille du rayon utilisé pour arrondir chaque coin de la bordure.
  4. (Facultatif) Indiquez les noms des CSS classes de la feuille de style actuelle à appliquer au conteneur.

    Séparez plusieurs noms de classe par un espace.

  5. Saisissez des valeurs, en pixels, pour la variable Margins and Padding pour déterminer les marges extérieures et la marge intérieure du conteneur Produits.

    Saisissez les valeurs correspondantes dans le diagramme.

    table 0-row-2 1-row-2 2-row-2
    Zone de conteneur Description
    Margins Espace vide appliqué au bord extérieur de tous les côtés du conteneur. Options : Top / Right / Bottom / Left
    Padding Espace blanc appliqué au bord intérieur de tous les côtés du conteneur. Options : Top / Right / Bottom / Left

Enregistrer et prévisualiser sur la scène

Dans le coin supérieur droit, cliquez sur Save pour appliquer les paramètres et revenir au Page Builder workspace.

Si vous avez configuré un carrousel de produit, il doit ressembler à l’exemple suivant :

Carrousel de produit sur la scène

Vous pouvez désormais utiliser une widget pour placer ce bloc où vous souhaitez qu'il apparaisse dans le magasin. Vous pouvez également utiliser Ajouter du contenu - Bloc pour ajouter le bloc à une page, un onglet ou un bloc existant.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d