Les personnes qui visitent votre page Boutique trouvent toutes les images mises en avant de votre produit présentées dans une grille. La page Boutique présente jusqu’à 200 produits. S’il y a plus de 200 produits, les clients peuvent cliquer sur Suivant pour en afficher davantage.

Pour personnaliser la section de la page Boutique :

1. Ouvrez la page boutique que vous souhaitez modifier.
2. Cliquez sur Modifier.
3. Cliquez sur Modifier la section dans la section de boutique. Vous pouvez personnaliser les éléments ci-dessous. Les modifications s’appliquent uniquement à cette section de boutique.

Dans l’onglet Éléments, vous pouvez personnaliser :

• Titre de la boutique : affichez le titre de la page en haut de la section.
• Fils d’Ariane : affichez le chemin de navigation emprunté par les visiteurs avant d’accéder à leur page actuelle, à l’exclusion des produits associés et des pages de catégorie filtrées.
• Libellé des catégories : affichez le libellé « Catégories » dans le menu des catégories.
• Libellé des filtres : affichez le libellé « Filtres » dans le menu des filtres.
• Filtres : ajoute des filtres pour aider vos clients à parcourir vos produits par étiquette.
• Description du produit : affiche ou masque la description du produit lorsque vous utilisez la disposition en liste.
• Prix : affichez ou masquez le prix sur la miniature du produit.
• Bouton Ajouter au panier : s’affiche sous les miniatures des produits sur la page Boutique et sur les pages Informations sur le produit.

Dans l’onglet Design, vous pouvez personnaliser :

• Disposition : affiche les miniatures des produits dans une grille ou une liste. Dans la disposition en liste, affiche un aperçu de la description de vos produits.
• Alignement du titre : définissez la justification du texte pour le titre de votre boutique.
• Placement du menu : affichez la navigation par catégorie en haut de la section ou sous forme de barre latérale.
• Style des catégories : personnalisez le menu de vos catégories sous forme de liste déroulante, de sous-navigation ou de boutons.
• Nombre de colonnes dans la disposition de la grille (au moins deux)
• Espacement des colonnes et des lignes
• Arrière-plan : afficher ou masquer un arrière-plan pour entourer la miniature de votre produit, comme avec un passe-partout. Définissez la couleur de fond, courbez les coins et choisissez le type de trait, la couleur et l’épaisseur.
• Style et alignement des boutons
• Valeur de proportion de l’image et espacement du texte
• Coins : l’arrière-plan des miniatures et les images des produits peuvent avoir des coins carrés ou incurvés.
• Largeur de section et marge intérieure verticale.
• Séparateur : affiche un séparateur entre la section de votre boutique et les autres sections de la page. Choisissez la forme, le type de trait, la couleur et l’épaisseur du séparateur.

Dans l’onglet Couleurs :

• Sélectionnez un thème de section pour votre section de boutique.
• Cliquez sur l’icône crayon sur un thème pour le personnaliser. Les modifications concernent toutes les sections utilisant le thème.

Filtres de la page Boutique

Créez des filtres de produits pour aider vos clients à trouver les produits et services les plus intéressants pour eux. Les filtres se basent sur les tags des produits pour afficher une sélection de produits sur votre page Boutique.

Vous pouvez ajouter des filtres aux pages Boutique qui contiennent 200 produits ou moins. Le bouton du filtre utilise les mêmes styles que votre bouton principal.

Les options de personnalisation disponibles dépendent de la famille de templates et du type de page Boutique de votre site.

Remarque : Galapagos et Supply suivent différents ajustements de style. Consultez le guide de votre modèle pour en savoir plus sur la personnalisation des produits.

Pour personnaliser les pages Boutique :

1. Ouvrez la page boutique que vous souhaitez modifier.
2. Retournez au panneau Site web.
3. Cliquez sur Design.
4. Cliquez sur Styles du site.
5. Utilisez les ajustements des sections Produits pour modifier le style de la page de destination.
6. Pour les réglages spécifiques aux pages de détails de chaque produit, quittez Styles de site, ouvrez un produit, puis saisissez à nouveau Styles de site.

Conseil :

• Cliquez n’importe où sur la page dans l’aperçu pour afficher uniquement les ajustements de style disponibles pour cette zone et masquer les autres.
• Si vous disposez de plusieurs pages Boutique, les personnalisations s'appliquent à l'ensemble du site à toutes les pages de la boutique afin de créer un aspect cohérent.
• Votre modèle peut comporter des fonctionnalités, telles que des images de bannière ou des en-têtes de page, qui affectent l’apparence de la page Boutique.

Disposition de la page Boutique

Les personnes qui visitent votre page Boutique trouvent toutes les images mises en avant de votre produit présentées dans une grille. Vous pouvez modifier le style de la grille avec ces ajustements dans la section des styles du site Produits : Disposition (pages Boutique avancées) ou dans la section Styles du site des Produits (pages Boutique classiques), selon le cas.

Personnaliser la description

• Modifier le nombre d'éléments par ligne
  • Avancé : articles par ligne
  • Classique : articles par ligne
• Modifier l'espace entre chaque élément de la ligne
  • Avancé : espacement des articles
• Modifiez la forme de l'image. Recadrer les images pour les adapter
  • Avancé : espacement des articles
• Définir la forme de l'emplacement de l'image
  • Classique : taille du produit
• Choisissez si l'image doit être recadrée pour remplir l'emplacement de l'image
  • Classique : recadrage automatique de l’image du produit
• Modifiez la couleur qui s'affiche derrière les images qui ne sont pas recadrées à la taille de l'emplacement
  • Classique : couleur d’arrière-plan du produit

Informations sur les produits de la page Boutique

Pour afficher les ajustements mobiles des pages Boutique avancées, sélectionnez Position : superposition. Vous pouvez modifier le style des informations sur le produit avec ces ajustements dans la section des styles du site Produits : Détails (pages Boutique avancées) ou dans la section Styles du site des Produits (pages Boutique classiques), selon le cas.

Personnaliser la description

• Définir le titre et le prix à afficher sous l'image ou au survol
  • Avancé : position : Sous, Superposition
  • Classique : titres de la liste de produits : dessous, superposition
• Aligner le texte lorsque Titres de la liste de produits : en-dessous est activé
  • Classique : alignement de la liste des produits : centre, gauche
• Définir la couleur de la superposition en cas de survol lorsque Titres de la liste de produits : superposition est sélectionné. Ajuster le curseur pour définir la transparence
  • Classique : couleur de superposition du produit
• Choisir l'endroit où le texte doit s'afficher sur les navigateurs mobiles
  • Avancé : position (mobile) : sous, superposition
• Choisir la façon dont le texte doit s'aligner
  • Avancé : alignement
• Définir la couleur de la superposition en cas de survol lorsque Position : superposition est sélectionné. Déplacer le curseur pour définir la transparence
  • Avancé : couleur de superposition
• Modification supplémentaire de l'alignement du texte lorsqu'il est configuré pour s'afficher au survol
  • Avancé : marge intérieure de la superposition
• Modifier l'espacement sous chaque ligne
  • Avancé : espacement
• Décochez cette option pour masquer le titre des éléments
  • Avancé : afficher le titre
• Définir la police du titre
  • Avancé : police du titre
• Définir la couleur du titre
  • Avancé : couleur du titre
• Définir la couleur du titre sur mobile
  • Avancé : couleur du titre (mobile)
• Définir l'espace entre le texte et l'image lorsque la Position est sélectionnée sur : en-dessous
  • Avancé : espacement du titre
• Décochez pour masquer les prix
  • Avancé : afficher le prix
  • Classique : afficher le prix du produit
• Définir la police du prix
  • Avancé : police des prix
• Définir la couleur du prix sur ordinateur
  • Avancé : couleur des prix
• Définir la couleur du prix sur mobile
  • Avancé : couleur des prix (mobile)
• Définir la couleur du prix de vente sur ordinateur
  • Avancé : couleur du prix promotionnel
• Définir la couleur du prix de vente sur mobile
  • Avancé : couleur du prix promotionnel (mobile)
• Définir l'espace entre le prix et le titre
  • Avancé : espacement des prix

Les modifications sont appliquées à toutes les pages Informations sur le produit sur la même page Boutique. Pour personnaliser la page Informations sur le produit :

1. Ouvrez la page Informations sur le produit que vous souhaitez modifier.
2. Cliquez sur Modifier, puis sur Modifier la section.

Dans l’onglet Mise en forme, choisissez l’une des options de disposition suivantes :

• Simple : l’image et la description du produit s’affichent côte à côte, entourées d’espaces blancs.
• Habillage : les images du produit entourent la description. Les images sont toujours alignées à gauche.
• Moitié : l’image du produit divise la page avec la description. L’image est toujours alignée à gauche.
• Pleine : les images du produit s’affichent dans un carrousel en pleine page au-dessus de la description.

Si vous sélectionnez la disposition Simple, vous pouvez personnaliser les options suivantes :

• Largeur du contenu.
• Présentation et espacement d’image : choisissez entre des présentations en diaporama, empilés ou en carrousel lorsque votre produit contient plusieurs images. Si vous sélectionnez une présentation en diaporama, les miniatures des autres images du produit s’affichent.
• Affichage des variantes.
• Alignement du texte.
• Alignement du contenu : choisissez entre haut et centre. Si vous sélectionnez l’alignement haut, une marge intérieure peut s’afficher entre le haut de l’image du produit et le texte. L’alignement du contenu est disponible pour les présentations en diaporama et carrousel, mais pas pour l’option empilé.
• Largeur du formulaire.
• Style de navigation pour le produit.
• Position de la description : là où s’affiche la description du produit.
• Bouton Ajouter au panier : l’option Inline place le bouton à côté du champ Quantité.
• Valeur de proportion de la galerie (design diaporama et carrousel uniquement) : dans le design carrousel, la valeur de proportion correspond à celle du conteneur d’image. Il est cependant possible que votre image ne soit pas recadrée en vue de remplir ce conteneur. Nous vous recommandons d’ajouter des images ayant la même valeur de proportion que celle que vous avez choisie dans vos paramètres.
• Emplacement et largeur de la galerie.
• Placement des miniatures de la galerie : positionne les images mises en avant du produit lorsque la présentation est définie sur Diaporama.
• Taille de la flèche du carrousel (design diaporama et carrousel uniquement).
• Action en cas de clic : choisissez entre aucune, zoom ou lightbox, en fonction de la présentation.
• Action de survol.

Dans l’onglet Couleurs :

• Sélectionnez un thème de section pour votre section de boutique.
• Cliquez sur l’icône crayon sur un thème pour le personnaliser. Notez que toutes les sections qui utilisent le thème seront affectées.

Personnaliser l’affichage des variantes de produits

Dans la disposition simple, vous pouvez afficher les variantes sous forme de boutons ou dans un menu déroulant. Toutes les autres dispositions affichent les variantes dans des menus déroulants.

• Boutons de variantes : suivez le style de formulaire de votre site. Ouvrez Styles du site, puis cliquez sur > à côté de Formulaires. Cliquez sur Options de sélection, puis sur Radio.
• Menu déroulant des variantes : suit la famille de polices des champs des variantes et sa couleur dépend du thème de couleurs de la section.

Remarque : l’option permettant de s’inscrire à la liste d’attente d’un produit n’apparaît que lorsque les variantes sont affichées dans des menus déroulants.

Personnaliser les boutons Ajouter au panier et Paiement sur la page Boutique

Le bouton Ajouter au panier peut s’afficher sous les miniatures des produits sur la page Boutique et sur les pages Informations relatives au produit.

Pour respecter la présentation et l’apparence des pages Informations relatives au produit, les ajustements de la marge intérieure horizontale n’affectent pas les boutons Ajouter au panier. Lorsqu’un produit est épuisé, le bouton Ajouter au panier est grisé.

Sur les pages Boutique, les couleurs des boutons suivent les couleurs du texte et de l’arrière-plan de votre produit. Le bouton Ajouter au panier des pages Informations relatives au produit et le bouton Paiement de la page du panier suivent tous deux les ajustements de style du bouton principal et les paramètres de couleur de votre site.

Gérer les couleurs du mini-panier

L’aperçu du panier utilise les thèmes de couleurs des sections pour garantir sa visibilité. La couleur de l’aperçu du panier contraste automatiquement avec l’arrière-plan de votre section. Pour modifier la couleur de l’aperçu du panier, changez la couleur d’arrière-plan de la section ou modifiez la palette de couleurs de votre site.

Puis-je masquer le bouton Ajouter au panier sur ma page Boutique ?

Vous ne pouvez pas masquer le bouton Ajouter au panier sans utiliser de code personnalisé. Ce sujet a été abordé sur le Squarespace Forum, mais ne relève pas de notre service d’assistance.

Pour promouvoir vos produits sans qu’il soit possible de les acheter, vous pouvez les afficher sur votre site dans une page de disposition avec des blocs Image et des blocs Texte.

Quand le champ quantité apparaît-il sur ma page Boutique ?

Le champ Quantité s’affiche sur la page Informations relatives au produit si :

• Le niveau des stocks du produit est supérieur à 1.
• Il existe des variantes, quels que soient les niveaux des stocks de chaque variante.

Pour afficher le niveau des stocks actuel de chaque variante sur la page Informations relatives au produit, activez les étiquettes de disponibilité limitée. Cela empêchera les clients d’essayer d’ajouter plus d’un produit à leur panier lorsque le niveau des stocks est de 1.

Vous ne pouvez pas modifier la taille du champ Quantité. Vous pouvez masquer le champ Quantité pour les produits physiques et les services dans vos paramètres de paiement.

Personnalisez les produits associés

La section Produits associés sur les pages Informations relatives au produit suit les ajustements des styles de la section de boutique et les ajustements de police de l’ensemble de votre site.

Si vous vendez des produits par abonnement, vous pouvez modifier les couleurs de la section Fréquence des abonnements de la page Informations relatives au produit. Ouvrez la palette de couleurs de votre site et modifiez les couleurs sous Page Informations relatives au produit : abonnements.

Les options de personnalisation disponibles dépendent de la famille de templates et du type de page Boutique de votre site.

Remarque : Galapagos et Supply suivent différents ajustements de style. Consultez le guide de votre modèle pour en savoir plus sur la personnalisation des produits.

Dispositions des pages Informations sur le produit

Personnalisez la disposition sous la section styles du site Produits : Disposition (pages Boutique avancées) ou dans la section styles du site des Produits (pages Boutique classiques), selon le cas.

Personnaliser la description

• Modifier l'espacement entre les éléments
  • Avancé : espacement
• Ajouter un espace vide en haut de la page
  • Avancé : marge intérieure supérieure
• Modifier l'affichage de la pagination
  • Avancé : affichage de la navigation : fil d’Ariane uniquement, pagination uniquement, fil d’Ariane et pagination, aucun
  • Classique : afficher la navigation du produit
• Modifier le texte de pagination
  • Avancé : style de pagination : Précédent/Suivant, Titres
• Modifier le texte de pagination
  • Avancé : alignement de la navigation : gauche, centre, droite, divisé
• Modifier la police de pagination
  • Avancé : police de navigation
• Modifier la couleur de pagination
  • Avancé : couleur de navigation
• Modifier la couleur de la flèche entre les titres de page dans la navigation
  • Avancé : couleur du séparateur de navigation

Remarque :

• L’ordre des produits est paramétré selon l’emplacement où ils apparaissent sur les pages Boutique. Ils sont classés de gauche à droite.
• La pagination affiche tous les produits. Vous ne pouvez pas la limiter à une catégorie en particulier.

Images des pages Informations sur le produit

Lorsque les clients regardent un article en particulier, ils voient les images du produit. Images de style sous la section styles du site Produits : galerie (pages Boutique avancées) ou dans la section styles des Produits (pages Boutique classiques), selon le cas.

Personnaliser la description

• Modifier l'alignement des images
  • Avancé : position : gauche, droite
• Modifier le style de galerie
  • Avancé : design : diaporama, empilé
• Modifier la largeur de l'image
  • Avancé : largeur
• Définir la forme de l'image
  • Avancé : rapport d’aspect
  • Classique : taille de la galerie de produits
• Choisissez si l'image produit doit être recadrée pour remplir l'emplacement de l'image. Dans le cas inverse, la couleur d'arrière-plan du produit s'affichera derrière l'image.
  • Classique : recadrage automatique de la galerie de produits
• Les réglages des miniatures affectent les miniatures de navigation qui s'affichent sous l'image lorsque sur Création : Diaporama est sélectionné.
  • Avancé : alignement des miniatures : gauche, centre, droite
• Modifier la largeur des miniatures
  • Avancé : largeur des miniatures
• Modifier l'espacement entre les miniatures
  • Avancé : espacement des miniatures
• Modifiez l'espace entre les images lorsque sur Création : empilé est sélectionné.
  • Avancé : espacement

Données des pages Informations sur le produit

Personnalisez les informations produit sous la section styles du site Produits : Détails (pages Boutique avancées) ou dans la section styles du site des Produits (pages Boutique classiques), selon le cas.

Personnaliser la description

• Modifier l'emplacement des détails sur la page
  • Avancé : alignement : gauche, centre, droite
• Modifier la hauteur de la ligne
  • Avancé : hauteur de ligne. L’ajustement de la hauteur de ligne dans la section Corps : police affecte également la hauteur de ligne
• Modifier l'espacement entre les lettres
  • Avancé : espacement
• Afficher ou masquer le titre du produit
  • Avancé : afficher le titre
• Modifier la police du titre du produit
  • Avancé : police du titre
• Modifier la couleur du titre du produit
  • Avancé : couleur du titre
• Afficher ou masquer le prix
  • Avancé : afficher le prix
• Modifier la police du prix
  • Avancé : police des prix
• Modifier la couleur du prix
  • Avancé : couleur des prix
• Modifier la couleur des articles en promotion
  • Avancé : couleur du prix promotionnel
• Sélectionner l’emplacement où s’affichera la description du produit
  • Avancé : position des extraits : au-dessus du prix, en dessous du prix, en dessous du bouton Ajouter au panier
• Modifier la police de description du produit
  • Avancé : police des extraits
• Modifier la couleur de la description du produit
  • Avancé : couleur des extraits
• Modifier la couleur du lien de description du produit
  • Avancé : couleur des liens des extraits
• Masquer ou afficher les boutons de partage
  • Avancé : afficher les boutons Partager
  • Classique : partage du produit sur les réseaux sociaux
• Utilisez les ajustements de la section des boutons de partage
  • Avancé : Personnaliser le bouton de partage
  • Classique : personnaliser les boutons de partage

Quantité et variantes des pages Informations sur le produit

Personnalisez la quantité et les variantes sous la section styles du site Produits : Options(pages Boutique avancées) ou dans la section styles du site du Contenu principal(pages Boutique classiques), selon le cas.

Personnaliser la description

• Afficher ou masquer les variantes
  • Avancé : afficher les variantes
• Afficher ou masquer la quantité. La quantité ne s'affiche que lorsque plusieurs articles sont disponibles.
  • Avancé : afficher la quantité
• Modifier l'affichage de la quantité
  • Avancé : style : texte uniquement, carré, arrondi, pilule
• Ajouter une couleur à la bordure de l'affichage de la quantité
  • Avancé : couleur des bordures
• Ajouter une couleur d'arrière-plan à l'affichage de la quantité
  • Avancé : couleur d’arrière-plan
• Modifier la police d'affichage de la quantité
  • Avancé : police des étiquettes
• Modifier la couleur d'affichage de la quantité
  • Avancé : couleur des étiquettes
• Définir la police de la quantité et des variantes
  • Avancé : police
  • Classique : applique les ajustements En-tête ou Titre 1 à l’échelle du site.
• Définir la couleur du texte de la quantité et des variantes
  • Avancé : couleur du texte
• Modifier la police de l’affichage des variantes. Il n’est pas possible de modifier la police de l’élément de menu.
  • Avancé : police

Quand le champ de quantité apparaît-il sur la page Informations sur le produit ?

Le champ Quantité s’affiche sur la page des détails du produit si :

• Le niveau des stocks du produit est supérieur à 1.
• Il existe des variantes, quels que soient les niveaux des stocks de chaque variante.

Astuce : pour afficher le niveau des stocks actuel de chaque variante sur la page Informations relatives au produit, activez les étiquettes de disponibilité limitée. Cela empêchera les clients d’essayer d’ajouter plus d’un produit à leur panier lorsque le niveau des stocks est de 1.

Puis-je masquer le menu déroulant indiquant la quantité ?

Vous pouvez masquer la quantité de produits dans la version 7.0 si le modèle de votre site fait partie des familles Brine, Farro, Skye, Tremont ou York. Dans ces modèles, pour masquer le menu déroulant indiquant la quantité sur les pages d'articles, procédez comme suit :

1. Accédez à votre page Boutique.
2. Ouvrez l'article.
3. Revenez dans le panneau Site web, puis cliquez sur Design et sur Styles du site.
4. Faites défiler jusqu’à la section Produits : Options.
5. Décochez l'option Afficher la quantité.

Astuce : l’option Quantité s’affichera toujours lors du paiement. Vous pouvez la désactiver lorsque vos articles correspondent à des services, quel que soit le template.

Bouton Ajouter au panier sur la page Informations sur le produit

Quantité et variantes de style sous la section styles du site Afficher les boutons (pages Boutique avancées) ou dans la section styles des Boutons (pages Boutique classiques), selon le cas.

Personnaliser la description

• Masquer le bouton
  • Avancé : décocher le bouton Afficher
• Modifier le style du bouton
  • Avancé : style : gras, contour, en relief
  • Classique : style : par défaut, gras, contour, en relief
• Modifier la forme du bouton
  • Avancé : forme : carré, arrondi, pilule
  • Classique : forme : carré, arrondi, pilule
• Ajouter ou supprimer une marge intérieure dans le bouton
  • Avancé : marge intérieure : petit, moyen, grand
• Modifier la couleur du bouton
  • Avancé : couleur
  • Classique : couleur des boutons
• Modifier la couleur du texte du bouton
  • Avancé : couleur du texte
  • Classique : couleur du texte
• Modifier la police du bouton
  • Avancé : police
  • Classique : police

Remarque : lorsqu’un produit est épuisé, le bouton Ajouter au panier apparaît grisé.

Bouton Paiement de la page Informations sur le produit

Le bouton Paiement qui s’affiche sur la page du panier suit les paramètres de couleur de votre site. Il n’est pas possible de personnaliser sa forme ni la police.

Produits associés sur la page Informations sur le produit

Les produits associés s’affichent dans une grille au bas de la page.