Blocs Produit

Présentez un produit de votre boutique sur une autre page de votre site et redirigez les clients directement vers la page de paiement.

Dernière mise à jour le 5 février 2025

Un bloc Produit affiche un article de la boutique de votre site sur d'autres pages ou publications. C'est un excellent moyen de promouvoir des produits sur votre site ou de créer une disposition différente de la page de destination intégrée de votre boutique.

Astuce

Pour en savoir plus sur les différences entre les pages Boutique et les blocs Produits, consultez les pages Boutique et les blocs Produits.

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.
  • Le produit doit être publié et visible.

Ajouter le bloc Produit

Pour ajouter un bloc Produit :

  1. Modifiez une page ou un article, cliquez sur Ajouter un bloc ou un point d’insertion, puis cliquez sur Produit.Pour obtenir de l’aide, consultez l’article Ajouter du contenu avec des blocs.
  2. Ouvrez l’éditeur de bloc en cliquant sur l’icône en forme de crayon sur le bloc.
  3. Dans le champ Ajouter un produit, cherchez le produit que vous souhaitez afficher. Cliquez dessus dans les résultats de la recherche pour l’ajouter. La recherche affiche jusqu’à sept produits.
  4. Pour accéder à votre inventaire et apporter des modifications aux produits, cliquez sur Edit products (Modifier les produits), puis cliquez sur Save and Continue (Enregistrer et continuer). Gardez à l'esprit que cela ferme la page en cours.
  5. Cliquez sur l'onglet Design pour personnaliser les détails à afficher sur le produit.
Product_Block.gif

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 Sites réservés aux membres et que vous configurez une boutique en ligne dans l’un de vos sites réservés aux membres, les visiteurs du site devront souscrire un abonnement avant de pouvoir acheter des produits dans cette boutique protégée. Pour permettre aux visiteurs qui ne sont pas membres d’acheter ces produits, ajoutez des blocs Produit sur votre site principal et utilisez la barre de recherche Ajouter un produit pour sélectionner des produits de votre boutique protégée.

Ajouter les informations d’un produit

Pour personnaliser le bloc Produit, cliquez sur l'onglet Design. Ici, vous pouvez définir l'alignement du bloc à gauche, au centre ou à droite. Vous pouvez également personnaliser les détails à afficher sur le produit en activant ou en désactivant les curseurs :

  • Image - Affiche l’image mise en avant du produit
  • Titre - Affiche le titre du produit
  • Prix - Affiche le prix du produit
  • Description - Affiche la description du produit
  • Bouton Ajouter au panier - Affiche un bouton Ajouter au panier
  • Vue rapide du produit - Permet un aperçu rapide

Pour modifier l’une de ces informations, modifiez le produit.

Personnaliser le bloc Produit

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

Texte des boutons

Par défaut, le texte du bouton du bloc Produit est Ajouter au panier. Vous pouvez modifier ce texte par Acheter maintenant par exemple.

  1. Ouvrez la page Boutique contenant le produit affiché dans votre bloc Produit.
  2. Double-cliquez sur le produit pour ouvrir l’éditeur de produit.
  3. Dans l'onglet Options, saisissez le nouveau texte du bouton.

Design du bouton

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

  1. Ouvrez une page contenant un bloc Produit.
  2. Cliquez sur Modifier, ouvrez le panneau Styles du site, puis cliquez sur Boutons.

Les boutons du bloc Produit correspondent aux options du style Principal. Pour en savoir plus, consultez l’article Personnaliser les boutons.

  1. Ouvrez une page contenant un bloc Produit.
  2. Revenez dans le panneau Site web, puis cliquez sur Design et sur Styles du site.
  3. Faites défiler la page jusqu’aux ajustements de style des boutons.

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.

Les polices des informations sur le produit basent leur style sur d’autres styles de texte présents sur votre site. Dans la plupart des 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.
  • Tarifs - Suit la police et la couleur du corps de texte, mais en légèrement plus grand.
  • Description - Suit la police et la couleur du corps de texte.

Il existe quelques exceptions dans ces familles de templates :

Famille de templates Remarques

Bedford

  • Couleur du titre - Suit le corps de texte

Brine

  • Couleur du titre - Suit le corps de texte

Farro

  • Couleur du titre - Suit le corps de texte

Skye

  • Police du titre -Titre de liste (ajuster sur une page Blog)
  • Police de la description -Extrait
  • Couleur du titre -Couleur du titre
  • Couleur de la description -Couleur de l’extrait
Supply
  • Police du prix - pas d’options de style
  • Description - Poids fixe

Étiquettes « Épuisé »

La marche à suivre pour personnaliser l’étiquette « Épuisé » dépend de la version de votre site.

Le texte des étiquettes « Épuisé » est toujours en blanc sur fond rectangulaire noir. La police de l’étiquette « Épuisé » suit la police des paragraphes de votre site. Vous pouvez modifier le texte dans le panneau Statut du produit.

L’étiquette « Épuisé » suit l’ajustement de style Produit : Badges de statut de votre site. Il n’est pas possible de modifier l’emplacement de l’étiquette. Vous pouvez modifier le texte dans le panneau Statut du produit.

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 mise en avant 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.

Conseils de recherche de blocs Produits

Lorsque vous recherchez un produit à afficher dans le bloc, les résultats de recherche s’appuient sur les informations suivantes :

  • Titres
  • Descriptions
  • Tags
  • Catégories
  • Blocs Texte dans les informations supplémentaires sur le produit

La recherche affiche jusqu’à sept 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 devez utiliser une page Boutique pour ajouter des produits à votre site, vous pouvez utiliser des blocs Produits pour créer une disposition personnalisée de la boutique en ligne sur une autre page. Une fois que vous avez créé et personnalisé votre boutique, vous pouvez masquer la page Boutique en la déplaçant vers la section Hors navigation du panneau Pages. Cela supprime la page Boutique des menus de navigation tout en la laissant activée.

Dépannage

Mon bloc Produit nʼaffiche pas la bonne image

Les blocs Produits affichent l’image mise en avant du produit. Cette image peut être différente de la première image définie dans l’éditeur de produit. Pour modifier l’image dans le bloc Produit, modifiez l’image mise en avant du produit.

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.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.