Vous pouvez modifier les options de personnalisation de la page boutique et de la page de détails du produit à deux endroits :

• Pages Boutique : cliquez sur Modifier dans l’aperçu du site, puis sur l’icône pinceau dans la section de boutique que vous souhaitez modifier. Pour en savoir plus sur la personnalisation des pages Boutique, consultez l’article Sections de page de collection.
• Pages de détails du produit - Ouvrez la page de détails du produit que vous souhaitez modifier. Cliquez sur Modifier la conception, puis sur l'icône Pinceau. Ces paramètres de personnalisation s'appliquent à toutes les pages de détails du produit de votre site.

Pour personnaliser les pages Boutique :

1. Ouvrez la page boutique que vous souhaitez modifier.
2. Revenez dans le panneau Site web, puis cliquez sur Design et sur Styles du site.
3. Utilisez les réglages des sections Produits pour modifier le style de la page de destination.
4. 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.

Astuces :

• 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 template 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.

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.

Dans les styles de la section boutique, vous pouvez personnaliser les détails ci-dessous. N’oubliez pas que vos modifications s’appliquent à toutes les pages Boutique de votre site.

Format :

• Largeur des images
• Espacement entre les colonnes
• Espacement entre les lignes
• Nombre de colonnes (deux minimum)
• Valeur de proportion de l'image
• Alignement du texte
• Espacement entre le texte et l'image
• Bouton Ajouter au panier : affiche le bouton Ajouter au panier sur la page Boutique, en plus des pages Informations sur le produit, si celui-ci ne comporte pas plusieurs variantes, auquel cas un bouton Afficher les options s’affiche sur la page Boutique.
• Afficher ou masquer le prix
• Où s'affiche la navigation par catégorie. Il n'est pas possible de masquer la navigation par catégorie.
• Alignement du texte de l'en-tête
• Afficher le titre de la catégorie - Masque ou affiche le titre de la page en haut de la section boutique.
• Navigation dans les produits
  • Fil d'Ariane - Affiche 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. 
  • Aucun

Couleurs :

• Définissez les couleurs de votre site ou créez un look unique pour la section de votre boutique en choisissant un thème de section différent.

Utilisez le tableau ci-dessous pour trouver les options de style de ces familles de templates :

• Avancé - Brine, Farro, Skye, Tremont, York
• Classique - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wexley
• Unique - Galapagos et Supply respectent différents réglages de personnalisation. Consultez votre guide de templates pour plus d'informations sur la personnalisation des produits.

Disposition

Les personnes qui visitent votre page Boutique trouvent toutes les images mises en avant de votre produit présentées dans une grille. Personnalisez la grille avec ces ajustements.

Section Styles de site

• Avancé - Produit : Disposition
• Classique - Produits

Informations sur le produit

Pour afficher les réglages mobiles des Pages Boutique avancées, sélectionnez Position : superposition.

Section Styles de site

• Avancé - Produits : détails
• Classique - Produits

Les images affichées sont les images du produit. Pour modifier la page des détails du produit :

1. Ouvrez la page Informations sur le produit que vous souhaitez modifier.
2. Cliquez sur Modifier le design en haut à gauche. Sur certains sites, vous devrez peut-être survoler l’option Modifier, puis cliquer sur Modifier le design et sur l’icône en forme de pinceau.

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.
• Complet - 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 également personnaliser les options suivantes : 

• Affichage des variantes
• Largeur des images
• Valeur de proportion de l’image (design en diaporama et carrousel uniquement)
  • Dans le design en 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 le même format que celui que vous avez choisi dans vos paramètres.
• Alignement du texte
• 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é.
• Espacement entre les images
• Largeur de la galerie
• Alignement du contenu (haut, centre) : l’alignement supérieur peut afficher une marge intérieure entre le haut de l’image du produit et le texte. L’alignement du contenu est disponible pour le design de diaporamas et de carrousels, mais pas pour l’option empilé. 
• Design (diaporama, empilé, carrousel) - Si le design est défini sur Diaporama, les miniatures des autres images du produit s’affichent.
• Emplacement de la galerie
• Placement des miniatures de la galerie - Positionne les images mises en avant du produit lorsque le design est défini sur Diaporama.
• Largeur du formulaire
• Taille et couleur de la flèche du carrousel 
• Action du clic (zoom ou lightbox)
• Action au survol (Zoom ou aucun)
• Facteur de zoom d'image

La fréquence de l’abonnement

Si vous vendez des produits par abonnement, vous pouvez modifier les couleurs qui s’affichent dans la section Fréquence des abonnements de la page Informations sur le produit. Ouvrez les thèmes de couleurs de votre site et modifiez les couleurs sous la section abonnements de la page Informations sur le produit. 

Produits associés

La section Produits associés aux pages de détails du produit applique les réglages des styles de section boutique. Pour accéder à ces paramètres à partir d’une page de détails du produit, revenez sur la page Boutique et cliquez sur Modifier en haut à gauche. Les polices respectent les ajustements de police de votre site.

Boutons Ajouter au panier et Paiement

Le bouton Ajouter au panier peut s’afficher sous les vignettes des produits sur la page Boutique et sur les pages Informations sur le produit. Sur les pages Boutique, les couleurs des boutons respectent les couleurs du texte et de l’arrière-plan de votre produit. Le bouton Ajouter au panier des pages Informations sur le produit et le bouton Paiement de la page du panier respectent tous deux les ajustements de style de votre bouton principal et les paramètres de couleur de votre site. N’oubliez pas que les options de style des boutons s’appliquent à la plupart des boutons de votre site afin de garantir une présentation et une apparence cohérentes. Ces boutons redirigent toujours les clients vers votre panier et votre page Paiement Squarespace. Il nʼest pas possible dʼutiliser ces boutons pour créer des liens vers des sites externes.

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

Affichage des variantes

Dans la disposition simple, vous pouvez afficher les variantes sous forme de boutons ou dans un menu déroulant. Les boutons des variantes respectent les ajustements de style des boutons secondaires de votre site. Toutes les autres dispositions affichent les variantes dans des menus déroulants. La couleur du menu déroulant des variantes change en fonction du jeu de couleurs de la section. Elle suit la famille de polices des champs Variantes. N’oubliez pas que l’option permettant de s’inscrire à la liste d’attente d’un produit n’apparaît que lorsque les variantes s’affichent dans des menus déroulants.

Champ Quantité

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

• Le niveau de stock du produit est supérieur à 1
• Il dispose de variantes, quels que soient les niveaux de stock de chaque variante

Pour afficher le niveau de stock actuel de chaque variante sur la page des détails du 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 de stock est de 1. Vous ne pouvez pas modifier la taille du champ Quantité.

Utilisez le tableau ci-dessous pour trouver les options de style de ces familles de templates :

• Avancé - Brine, Farro, Skye, Tremont, York
• Classique - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wexley
• Unique - Galapagos et Supply respectent différents réglages de personnalisation. Consultez votre guide de templates pour plus d'informations sur la personnalisation des produits.

Disposition

Section Styles de site

• Avancé - Produits : Disposition
• Classique - Produits

Conseils de pagination :

• L'ordre des produits est paramétré selon l'emplacement où ils apparaissent sur les pages de la boutique. Ils sont ordonnés de gauche à droite.
• Il n'est pas possible de limiter la pagination à une catégorie spécifique. La pagination affiche tous les produits.

Images

Lorsqu'ils regardent un article en particulier, les clients voient les images du produit.

Section Styles de site

• Avancé - Produits : Galerie
• Classique - Produits

Informations sur le produit

Section Styles de site

• Avancé - Produits : détails
• Classique - Produits

Quantité et variantes

Section Styles de site

• Avancé - Produits : Options
• Classique - Contenu principal

Champ Quantité

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

• Le niveau de stock du produit est supérieur à 1
• Il dispose de variantes, quels que soient les niveaux de stock de chaque variante

Pour afficher le niveau de stock actuel de chaque variante sur la page des détails du 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 de stock est de 1.

Bouton Ajouter au panier

Section Styles de site

• Avancé - Afficher les boutons
• Classique - Boutons

Conseil : Lorsqu'un produit est épuisé, le bouton Ajouter au panier apparaît grisé.

Bouton de paiement

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

Produits associés

Les produits associés s'affichent dans une grille au bas de la page. Vous pouvez utiliser ces réglages pour modifier leur apparence.

Section Styles de site

• Avancé - Produits : produits associés
• Classique - Produits

L'icône s'affiche par défaut sous forme de panier dans l'en-tête du site. Si vous masquez l'icône du panier, elle apparaît en bas de la page lorsque les clients ajoutent des articles à leur panier. Pour en savoir plus, consultez l'article Affichage de l'icône du panier.

Tous les templates prennent en charge un bouton Panier qui affiche le nombre d'articles dans le panier d'un client et mène à la page de paiement. Si votre panier n'apparaît pas, consultez nos conseils de dépannage. Pour savoir comment modifier l'icône du panier de votre template, consultez Affichage de l'icône de panier.

La navigation par catégorie peut s’afficher en haut de votre page Boutique ou dans une barre latérale. Pour rappel, la navigation par catégorie s’affiche toujours en haut de la page sur les appareils mobiles.

La police de navigation de catégorie respecte le style de paragraphe. La couleur correspond à la modification de la navigation par catégorie sous Produits : Grille basique dans les styles du site.

Selon la position, les sous-catégories s'affichent dans un menu déroulant. Pour modifier la position, ouvrez les styles de section et cliquez sur Barre latérale ou Haut sous Type de catégories. Pour modifier l'ordre de navigation, cliquez et faites glisser les catégories dans le gestionnaire de catégories.

• Barre latérale - Les sous-catégories s'affichent dans un menu déroulant sur la page Boutique et sur les pages de catégories filtrées
• Haut - Les sous-catégories s'afficheront sur la page principale des catégories filtrées, mais pas sur les pages de sous-catégories filtrées.

Pour masquer la navigation par catégorie, ouvrez les paramètres de catégorie et basculer le bouton sur désactiver en regard de la visibilité du filtre. Répétez ceci pour chaque catégorie. Pour en savoir plus, consultez Organiser les produits.

La navigation par catégorie s'affiche par ordre alphabétique. Utilisez le tableau ci-dessous pour trouver les options de style de ces familles de templates :

• Avancé - Brine, Farro, Skye, Tremont, York
• Classique - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wexley
• Unique - Galapagos et Supply respectent différents réglages de style. Il n'est pas possible de masquer la navigation par catégorie dans ces templates. Consultez votre guide de templates pour plus d'informations sur le style de navigation par catégorie.

Section Styles de site

• Avancé - Produits : tri + filtre
• Classique - Produits

• Le badge d'état des articles épuisés s'affiche toujours sous l'image du produit sur la page Boutique et la page des détails du produit.
• Les étiquettes de Promotion et de disponibilité limitée respectent la couleur de votre site et les différents réglages de police.

Utilisez le tableau ci-dessous pour trouver les options de style de ces familles de templates :

• Avancé - Brine, Farro, Skye, Tremont, York
• Classique - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wexley
• Unique - Galapagos et Supply respectent différents réglages de personnalisation. Consultez votre guide de templates pour plus d'informations sur la personnalisation des produits.

Pour atteindre ces réglages de style, accédez à la page Boutique que vous souhaitez modifier avant d'ouvrir Styles de site.

Section Styles de site

• Avancé - Produits : Badges de statut
• Classique - Produits

Une autre image produit s'affiche toujours au survol sur les Pages de la Boutique lorsqu'un produit comporte plusieurs images. Les détails du produit s'affichent toujours sous l'image du produit. Vous pouvez activer l'aperçu rapide dans les paramètres de page ou de bloc. La couleur d'arrière-plan de la lightbox d'aperçu rapide respecte la couleur de la section boutique.

Le zoom de l'image n'est pas disponible sur les pages Boutique. Toutefois, vous pouvez activer les lightboxs et le zoom de l'image lors d'un clic ou du survol de la page des détails du produit. Activez ces effets dans le panneau des Produits :

• Lightbox - Ouvre l'image dans une fenêtre lightbox en cliquant dessus.
• Zoom - Agrandit les détails de l'image en cliquant dessous ou en la survolant.

Utilisez le tableau ci-dessous pour trouver les options de style de ces familles de templates :

• Avancé - Brine, Farro, Skye, Tremont, York
• Classique - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wexley
• Galapagos prend en charge les options d'images alternatives et de superposition d'informations produit.
• Supply prend en charge des options uniques de superposition d'informations produit.

Effets de Survol

Pour afficher le réglage du comportement au survol de l'élément dans les pages avancées Boutique, accédez à la section Produit : Détails et sélectionnez Position : En-dessous.

Section Styles de site

• Avancé - Produits : Disposition
• Classique - Produits

Autres conseils pour les images :

• Si la deuxième image du produit comporte des zones transparentes, c'est la première image qui sera visible dans les zones survolées.

Zoom sur l'image

Section Styles de site

• Avancé - Produits : zoom d’image
• Classique - non disponible

Conseils pour le zoom d'image :

• Les images dont l’arrière-plan est transparent (.png) affichent l’image d’origine derrière la version agrandie.

Aperçu rapide

Lorsque vous activez l’aperçu rapide, de nouvelles sections apparaissent dans le panneau Styles du site. Les paramètres de style sont appliqués sur l’ensemble du site afin de créer une présentation cohérente.

Les visiteurs utilisent l'aperçu rapide du produit pour afficher les détails de l'article dans une lightbox sans s'éloigner de la page Boutique. Cette fonctionnalité n'est pas disponible pour les pages Boutique Classiques, bien que les images de produit s'ouvrent dans une lightbox à partir des pages de détails du produit de ces templates.

Section Styles de site

• Avancé - Produits : Bouton d'aperçu rapide
• Classique - non disponible

Conseils pour l'Aperçu rapide :

• Si le texte de votre Aperçu rapide présente des problèmes de mise en forme, essayez d'ajouter les détails du produit en tant que texte brut à la place.
• L’aperçu rapide n’est pas disponible sur les appareils mobiles.
• Le texte du bouton « Aperçu rapide » ne peut pas être personnalisé.
• Les images de produits apparaissent sous forme de carré recadré dans l’aperçu rapide.
• Les descriptions de produits apparaissent dans l’aperçu rapide sans mise en forme spéciale (y compris le style d’en-tête, les caractères en gras ou en italique et les listes à puces).

Les couleurs et les polices de la page Boutique et des détails du produit respectent les réglages de police et de couleur à l'échelle du site. Vous pouvez également modifier la couleur des sections de boutiques spécifiques dans l'éditeur de style de section. Les pages de détails du produit respectent le thème de couleur de la section Boutique.

1. Dans la page Boutique, cliquez sur Modifier la conception, puis ouvrez Styles de site.
2. Cliquez sur Polices.
3. Choisissez une police, puis cliquez sur pour appliquer la police à des parties spécifiques de votre site.

Utilisez ces réglages pour modifier les polices sur votre page Boutique et les pages de détails du produit :

Utilisez le tableau ci-dessous pour trouver les options de style de ces familles de templates :

• Avancé - Brine, Farro, Skye, Tremont, York
• Classique - Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wexley

Pages Boutique classiques

Le texte de la page Boutique classique respecte les mêmes réglages de style que le texte du reste de votre site. Par exemple, pour modifier la police ou la couleur du titre de l'élément, utilisez le réglage En-tête ou Titre 1. Certains éléments, comme la navigation par catégorie, ont leurs propres réglages de police qui sont répertoriés dans ce guide en fonction de l'élément que vous modifiez.

Les menus déroulants des variantes constituent une exception, car ils utilisent la même police sur toutes les pages Boutique classiques. Cette police ne peut pas être modifiée dans Styles du site.

Pages Boutique avancées

Les polices des pages avancées de la boutique respectent les réglages de style sur le reste de votre site, mais elles comportent des réglages de police supplémentaires pour des éléments spécifiques de la page Boutique. Ces réglages sont répertoriés dans ce guide en fonction de l'élément que vous personnalisez.