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 publications. 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 Produits et les pages Produits, consultez lʼarticle Pages Produits et Blocs Produits. Dans la version 7.1, les pages Produits sont appelées pages Boutique.

Avant de commencer

  • To use Product Blocks, you need a Products Page containing the product you want to display.
  • The Products Page containing the product must be enabled. If you disable it, the product won’t appear in shopping carts when added via Product Blocks.
  • 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. 

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 modifier le texte et la police du bloc Produit et personnaliser 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. Open the Products Page containing the product displayed in your Product Block.
  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. Dans le Menu principal, cliquez sur Design, puis 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

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

La police des informations du produit applique le même style que celui des polices à lʼéchelle du site et suit les ajustements de paragraphe.

  1. Dans le Menu principal, cliquez sur Design, puis sur Polices.
  2. Cliquez sur le bouton .
  3. Cliquez sur Paragraphe.

Les couleurs sont les mêmes que celles utilisées à lʼéchelle du site ou pour vos sections.

To change the text that displays, go to your Products Page and edit the item information.

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

  • Couleur du titre - Suit le corps de texte

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

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.

FAQ

Can I display multiple products in a Product Block?

No. Product Blocks display one product at a time. However, you can add multiple Product Blocks to a page. You can also display a collection of products using Summary Blocks.

If I use Product Blocks, can I hide my Products Pages?

Yes. If you're using Product Blocks to arrange your store instead of Products Pages, you can hide your Products Pages by moving them to the Not Linked section of the Pages panel. This removes the Products Page from navigation menus while keeping them enabled.

Can I change the size or shape of Product Blocks?

Oui. Lorsque vous ajoutez le bloc pour la première fois, il remplit 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 Redimensionnement des blocs et Déplacement 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.

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

If clicking a Product Block's Add to Cart button doesn't add the product to the shopping cart, the linked Products Page might be disabled. Products from disabled Products Pages can display in Product Blocks, but can't be added to carts. To resolve this issue, enable the Products Page.

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