Ajouter du contenu - Produits

Dans la barre latérale Admin, accédez à Content > Elements>Blocks.

Cliquez sur Add New Block.

Saisissez les Block Title et les Identifier.

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

Faites défiler vers le bas et cliquez sur Edit with Page Builder ou dans la zone de prévisualisation du contenu pour ouvrir l’espace de travail Page Builder.

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

{width="600" modal="regular"}

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

{width="300"}

Si vous choisissez le carrousel de produit, vous devez également configurer les paramètres du carrousel.

Par Select Products By, choisissez la méthode pour la 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égories, puis passer à l’option Condition pour ajouter des conditions. Vos produits sont sélectionnés uniquement en fonction de ce que vous avez défini pour l une de ces trois options.

• Category - Sélectionnez cette option pour afficher les produits à l’aide d’une catégorie sélectionnée.

  {width="500"}

  Lorsqu’elle est sélectionnée, cette option fournit un sélecteur de Category. Cliquez sur la flèche et effectuez une analyse en profondeur pour choisir la catégorie de produits à afficher. Par exemple, dans les données d’exemple Commerce, l’exploration et la sélection du Femmes > Tops > Tees affichent tous les produits de cette catégorie.

  {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, elle fournit une zone de texte Product SKUs dans laquelle vous devez saisir une liste de SKU séparés par des virgules à afficher.

  {width="500"}

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

  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 Unisexe.

  {width="500"}

  note note
  NOTE
  La sélection de l’option Catégorie ou SKU fournit l’option Sort By 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 zone de texte Product SKUs.

Par Sort By, choisissez l’ordre de tri des produits de la liste :

{width="300"}

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

Les valeurs peuvent être comprises entre 1 et 999. La valeur par défaut est 5 pour une grille et 20 pour un carrousel.

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

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

{width="600" modal="regular"}

Si nécessaire, définissez l’option Autoplay sur 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 le volet de navigation des diapositives (points ou flèches) pour afficher chaque diapositive dans l’ordre.

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

Si nécessaire, définissez l’option Infinite Loop sur Yes.

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

Si nécessaire, définissez l’option Show Arrows sur Yes.

Lorsque cette option est activée, chaque diapositive comprend des flèches de navigation suivante et précédente sur les côtés gauche et droit. Si vous laissez le paramètre par défaut (No), les diapositives n’affichent pas de flèches de navigation.

Si nécessaire, définissez l’option Show Dots sur No.

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

Pour contrôler le positionnement de la liste Produits dans le conteneur parent, choisissez l’Alignment :

Définissez le style de Border appliqué aux quatre côtés du conteneur de produits :

Si vous définissez un style de bordure autre que None, renseignez les options d’affichage des bordures :

(Facultatif) Spécifiez les noms des CSS classes de la feuille de style actuelle à appliquer au conteneur.

Séparez plusieurs noms de classe par un espace.

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

Saisissez les valeurs correspondantes dans le diagramme.