Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Blocs Produit

Les blocs Produit permettent dʼafficher un article de votre boutique sur dʼautres pages ou billets. Ils sont idéaux pour promouvoir des éléments sur votre site ou créer une disposition différente de celle de la page de destination intégrée de votre boutique. Vous pouvez inclure un bouton Ajouter au panier pour chaque article.

Remarque : pour en savoir plus sur les différences entre les blocs Produit et les pages Boutique, consultez lʼarticle Pages Boutique ou blocs Produit

Avant de commencer

  • Pour utiliser les blocs Produit, vous devez disposer d’une page Boutique contenant le produit que vous souhaitez afficher.
  • La page Boutique contenant le produit doit être activée. Si vous la désactivez, le produit n’apparaîtra pas dans les paniers s’il est ajouté via les blocs Produit.
  • The product must be published and visible.

Add the Product Block

Pour ajouter un bloc Produit :

  1. Modifiez une page ou une publication, cliquez sur un point d’insertion, puis sélectionnez Produit dans le menu. Pour en savoir plus, consultez l’article Ajouter des contenus à l’aide de blocs.
  2. In the Find A Product search bar, search for the product you want to display. Click it in the search results to add it. The search displays up to 15 products.
  3. Customize what product details display using the checkboxes.
  4. Cliquez sur Appliquer pour enregistrer vos modifications. 
Astuce : les blocs Produit affichent un produit à la fois. Pour afficher plusieurs produits sur une page, utilisez plusieurs blocs Produit ou affichez une collection de produits à l’aide de blocs Sommaire.

Promouvoir des produits protégés

Si vous disposez d’un abonnement au service Espaces membres et que vous configurez une boutique en ligne dans l’un de vos espaces membres, les visiteurs du site devront souscrire un abonnement avant de pouvoir acheter des produits dans cette boutique protégée. Pour permettre aux non-membres d’acheter ces produits, ajoutez des blocs Produit sur votre site principal et utilisez le champ de recherche Trouver un produit pour sélectionner des produits de votre boutique protégée.

Add product details

Use the checkboxes in the block editor to customize which product details display. These details are pulled from the Item and Options tabs in the product editor:

  • Check Show Image to display the product's thumbnail image.
  • Check Show Title to display the product's title.
  • Check Show Price to display the product's price.
  • Check Show Description to display the description of the product.
  • Check Show Add to Cart Button to display an Add to Cart button.

To change any of these details, edit the product.

Personnaliser le bloc Produit

Vous pouvez personnaliser le bloc Produit et le bouton Ajouter au panier.

Texte des boutons

By default, the text for the Product Block's button is Add to Cart. You can change this text to something else, like Buy Now.

  1. Ouvrez la page Boutique contenant le produit affiché dans votre bloc Produit.
  2. Double-click the product to open the product editor.
  3. In the Options tab, enter new button text.

Design du bouton

La méthode pour modifier le design du bouton dépend de la version de votre site.

  1. Open a page containing a Product Block.
  2. Cliquez sur Modifier le design, ouvrez le panneau Styles du site, puis cliquez sur Boutons.

Pour en savoir plus, consultez l’article Personnaliser les boutons.

  1. Open a page containing a Product Block.
  2. Dans le Menu principal, cliquez sur Design, puis sur Styles du site.
  3. Scroll down to the style tweaks for buttons.

Pour en savoir plus, consultez l’article Personnaliser les boutons.

Texte et police du bloc Produit

La marche à suivre pour personnaliser le style du titre, du prix et de la description du bloc Produit dépend de la version de votre site

Pour modifier le texte qui sʼaffiche, accédez à votre page Boutique et modifiez les informations du produit.

Modifiez la police, la couleur du texte et la taille du texte dans le panneau Styles du site

  • Police : suit Paragraphes
  • Couleur : suit Paragraphe (moyen)
  • Taille : suit Paragraphe 2

Le titre apparaît toujours légèrement plus grand.

Pour modifier le texte qui sʼaffiche, accédez à votre page Boutique et modifiez les informations du produit.

The product details fonts take their style from other text styles on your site. In most templates:

  • Titre - Reprend la police du corps du texte, mais légèrement plus grande. La couleur reprend celle du lien dans le corps de texte.
  • Pricing - Follows the body text font and color, but slightly larger.
  • Description - Follows the body text font and color.

There are some exceptions. In these template families:

Famille de templates Remarques

Bedford

  • Title color - Follows body text

Brine

  • Title color - Follows body text

Farro

  • Title color - Follows body text

Skye

  • Title font - List Title (adjust while on a Blog Page)
  • Description font - Excerpt
  • Title color - Title Color
  • Description Color - Excerpt Color
Supply
  • Price font - no style options
  • Description - Fixed weight

Taille et forme du bloc Produit

Lorsque vous ajoutez le bloc pour la première fois, il couvre toute la largeur de la zone de contenu s’il n’y a pas d’autres blocs à côté. Pour obtenir de l’aide sur le redimensionnement des blocs, consultez les articles Redimensionner des blocs et Déplacer des blocs pour personnaliser les dispositions.

Pour la forme du bloc, la valeur de proportion des blocs Produit correspond à la valeur de proportion originale de lʼimage miniature du produit. Pour vous assurer quʼun bloc Produit utilise une valeur de proportion spécifique, recadrez lʼimage avant de la charger dans lʼéditeur de produit ou utilisez lʼéditeur dʼimage dans lʼéditeur de produit.

Product Block search tips

When searching for a product to display in the block, the search results are based on the following information:

  • Titres
  • Descriptions
  • Tags
  • Catégories
  • Text Blocks in the product's Additional Information

La recherche affiche jusquʼà 15 correspondances. Si vos produits ont des noms similaires, effectuez une recherche par titre exact. Il est possible que les nouveaux produits ne sʼaffichent pas immédiatement dans la recherche.

Personnaliser votre boutique en ligne

Bien que vous deviez utiliser une page Produits pour ajouter des produits à votre site, vous pouvez utiliser des blocs Produit pour créer une boutique en ligne à la disposition personnalisée sur une autre page. Après avoir créé et personnalisé votre boutique, vous pouvez masquer la page Boutique en la déplaçant vers la section Hors navigation du panneau Pages. La page Boutique est alors supprimée des menus de navigation tout en restant activée.

Dépannage

Mon bloc Produit nʼaffiche pas la bonne image

Product Blocks display the product's thumbnail image. This image may be different than the first image set in the Item tab of the product editor. To change the image in the Product Block, change the product's thumbnail image.

Le produit ne peut être ajouté au panier à partir du bloc Produit

Si le fait de cliquer sur le bouton Ajouter au panier d’un bloc Produit n’ajoute pas le produit au panier, la page Boutique associée peut être désactivée. Les produits des pages Boutique désactivées peuvent s’afficher dans les blocs Produit, mais ne peuvent pas être ajoutés aux paniers. Pour résoudre ce problème, activez la page Boutique.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 51 sur 152