Ajouter du contenu - Produits

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

Cliquez sur Add New Block.

Saisissez les Block Title et Identifier.

Sélectionnez l’ Store View où le bloc doit être disponible.

Faites défiler l’écran vers le bas et cliquez sur Edit with Page Builder ou à l’intérieur de la zone d’aperçu 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 sur 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’aspect suivants :

{width="300"}

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

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 sont sélectionnés uniquement en fonction de ce que vous avez défini pour 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 Category. Cliquez sur la flèche et faites défiler l’écran pour sélectionner la catégorie de produits à afficher. Par exemple, dans l’exemple de données Commerce, l’exploration et la sélection de Femmes > Trops > Tees affichent tous les produits pour cette catégorie.

  {width="500"}

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

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

  {width="500"}

• Condition - Sélectionnez cette option pour afficher les produits en fonction d’une ou de plusieurs conditions 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.

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

Pour 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 le 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 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 la navigation dans 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).

Si nécessaire, définissez l’option Infinite Loop sur 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.

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 next et previous sur les côtés gauche et droit. Si vous laissez le paramètre par défaut (No), les diapositives n’affichent pas les flèches de navigation.

Si nécessaire, définissez l’option Show Dots sur 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.

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

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

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

(Facultatif) Indiquez les noms de CSS classes dans la feuille de style actuelle à appliquer au conteneur.

Séparez plusieurs noms de classe par un espace.

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

Saisissez les valeurs correspondantes dans le diagramme.