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

Personnaliser les pages Boutique

Vous pouvez personnaliser la façon dont les produits apparaissent sur votre site pour correspondre au design et à la présentation de votre marque. Utilisez ce guide pour trouver les options de style pour les pages de votre boutique et les pages détaillées des produits selon la version de votre site.

Page Boutique et page Informations sur le produit

Avant de personnaliser vos produits, il est bon de comprendre comment Squarespace les structure sur tous les sites. Les produits sont organisés en deux parties : les pages boutique, qui créent une page de destination consultable, puis les pages individuelles de détails du produit. Ces zones partagent quelques réglages de personnalisation et ont leurs propres options de style. Pour en savoir plus, consultez la page Ajout de produits à votre boutique.

Ouvrir les options de personnalisation

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 surModifier dans l'aperçu du site, puis sur l'icône Crayon dans la section boutique que vous souhaitez modifier. Pour en savoir plus sur les personnalisations d'ouverture de boutique, consultez les sections de la page Collection dans la version 7.1.
  • 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. Dans le Menu principal, cliquez sur Designs, puis 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 de 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.

Page Boutique

Les visiteurs de votre Page boutique voient toutes les images miniatures de votre article de produit disposées dans une grille. Dans les styles de section boutique, vous pouvez personnaliser ces détails, 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
  • 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 :

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

  • 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 modèles pour plus d'informations sur la personnalisation des produits.

Disposition

Les visiteurs de votre Page boutique voient toutes les images miniatures de votre produit disposées dans une grille. Personnalisez la grille avec ces réglages.

Section Styles de site

  • Avancé - Produit : Disposition
  • Classique - Produits
Description Avancé Classique
Modifier le nombre d'éléments par ligne Articles par ligne Produits par ligne
Modifier l'espace entre chaque élément de la ligne Espacement entre les articles n/a
Modifiez la forme de l'image. Recadrer les images pour les adapter Valeur de proportion de l'image n/a
Définir la forme de l'emplacement de l'image n/a Taille du produit
Choisissez si l'image doit être recadrée pour remplir l'emplacement de l'image n/a 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 n/a Couleur d’arrière-plan du produit

Informations sur le produit

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

Section Styles de site

  • Avancé - Produits : détails
  • Classique - Produits
Description Avancé Classique
Définir le titre et le prix à afficher sous l'image ou au survol Position : Sous, Superposition Titres de la liste de produits : Dessous, Superposition
Aligner le texte lorsque Titres de la liste de produits : en-dessous est activé n/a Alignement de la liste de produits : Centre, Gauche
Définissez la couleur de la superposition au survol lorsque sur les Titres de liste de produits : superposition est sélectionnée. Ajuster le curseur pour définir la transparence n/a Couleur de superposition du produit
Choisir l'endroit où le texte doit s'afficher sur les navigateurs mobiles Position (mobile) : Sous, Superposition n/a
Choisir la façon dont le texte doit s'aligner Alignement n/a
Définissez la couleur de la superposition au survol lorsque sur Position : superposition est sélectionnée. Ajustez le curseur pour définir la transparence Couleur de superposition n/a
Modification supplémentaire de l'alignement du texte lorsqu'il est configuré pour s'afficher au survol Marge intérieure de la superposition n/a
Modifier l'espacement sous chaque ligne Espacement n/a
Décochez cette option pour masquer le titre des éléments Afficher le titre n/a
Définir la police du titre Police du titre n/a
Définir la couleur du titre Couleur du titre n/a
Définir la couleur du titre sur mobile Couleur du titre (mobile) n/a
Définir l'espace entre le texte et l'image lorsque la Position est sélectionnée sur : en-dessous Espacement du titre n/a
Décochez pour masquer les prix Afficher le prix Afficher le prix du produit
Définir la police du prix Police des prix n/a
Définir la couleur du prix sur ordinateur Couleur des prix n/a
Définir la couleur du prix sur mobile Couleur des prix (mobile) n/a
Définir la couleur du prix de vente sur ordinateur Couleur Prix Solde n/a
Définir la couleur du prix de vente sur mobile Couleur des prix promo (mobile) n/a
Définir l'espace entre le prix et le titre Espacement des prix n/a

Page Informations sur le produit

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 la conception dans le coin supérieur gauche. Sur certains sites, vous devrez peut-être passer la souris sur Modifier, cliquer sur Modifier la conception, puis sur l'icône Crayon.

Vous pouvez personnaliser les options suivantes :

  • Largeur des images
  • Valeurs de proportion de l'image (conception de la galerie de diaporama uniquement)
  • Alignement du texte
  • Style de navigation pour le produit
  • 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
  • Création de la galerie (Diaporama, Empilement, Carrousel) - Si la conception de la galerie est sur Diaporama, les miniatures des autres images du produit s'affichent.
  • Emplacement de la galerie
  • Placement des miniatures de la galerie - Positionne les images miniatures du produit lorsque la conception de la galerie est sur Diaporama.
  • Largeur du formulaire
  • Taille de la flèche du carrousel
  • Action du clic (zoom ou lightbox)
  • Action au survol (Zoom ou aucun)
  • Facteur de zoom d'image

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 dans le coin supérieur gauche. Les polices respectent les réglages de police de votre site.

Bouton Ajouter au panier

Ce bouton respecte les réglages de style de bouton de votre site. 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 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.

Menus déroulants de Variantes

La couleur du menu déroulant de variantes change en fonction du thème de couleur de la section.

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.

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

  • 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 modèles pour plus d'informations sur la personnalisation des produits.

Disposition

Section Styles de site

  • Avancé - Produits : Disposition
  • Classique - Produits
Description Avancé Classique
Modifier l'espacement entre les éléments Espacement n/a
Ajouter un espace vide en haut de la page Marge intérieure supérieure n/a

Modifier l'affichage de la pagination

Affichage de la navigation : Fil d’Ariane uniquement, Pagination uniquement, Fil d’Ariane et pagination, Aucun Afficher la navigation du produit
Modifier le texte de pagination Style de pagination : Précédent/Suivant, Titres n/a
Modifier le texte de pagination Alignement de la navigation : Gauche, Centre, Droite, Divisé n/a
Modifier la police de pagination Police de la navigation n/a
Modifier la couleur de pagination Couleur de la navigation n/a
Modifier la couleur de la flèche entre les titres de page dans la navigation Couleur du séparateur de navigation n/a

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
Description Avancé Classique
Modifier l'alignement des images Position : Gauche, Droite n/a
Modifier le style de galerie Design : Diaporama, Empilé n/a
Modifier la largeur de l'image Largeur n/a
Définir la forme de l'image Valeur de proportion Taille de la galerie 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. n/a 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é. Alignement des miniatures : Gauche, Centre, Droite n/a
Modifier la largeur des miniatures Largeur des miniatures n/a
Modifier l'espacement entre les miniatures Espacement des miniatures n/a
Modifiez l'espace entre les images lorsque sur Création : empilé est sélectionné. Espacement n/a

Informations sur le produit

Section Styles de site

  • Avancé - Produits : détails
  • Classique - Produits
Description Avancé Classique
Modifier l'emplacement des détails sur la page Alignement : Gauche, Centre, Droite n/a
Modifier la hauteur de la ligne

Hauteur de ligne

L'ajustement de la hauteur de ligne dans la section Corps : police affecte également la hauteur de ligne ici.

n/a
Modifier l'espacement entre les lettres Espacement n/a
Afficher ou masquer le titre du produit Afficher le titre n/a
Modifier la police du titre du produit Police du titre n/a
Modifier la couleur du titre du produit Couleur du titre n/a
Afficher ou masquer le prix Afficher le prix n/a
Modifier la police du prix Police des prix n/a
Modifier la couleur du prix Couleur des prix n/a
Modifier la couleur des articles en promotion Couleur Prix Solde n/a
Sélectionner l'emplacement où afficher la description du produit Position de l’extrait : Au-dessus du prix, En dessous du prix, En dessous du bouton Ajouter au panier n/a
Modifier la police de description du produit Police des extraits n/a
Modifier la couleur de la description du produit Couleur des extraits n/a
Modifier la couleur du lien de description du produit Couleur du lien Extrait n/a
Masquer ou afficher les boutons de Partage Afficher les boutons Partager Partage du produit sur les réseaux sociaux
Utilisez les réglages de la section boutons de Partage Personnaliser le bouton de partage Personnaliser le bouton de partage

Quantité et variantes

Section Styles de site

  • Avancé - Produits : Options
  • Classique - Contenu principal
Description Avancé Classique
Afficher ou masquer les variantes Afficher les variantes n/a
Afficher ou masquer la quantité. La quantité ne s'affiche que lorsque plusieurs articles sont disponibles. Afficher la quantité n/a
Modifier l'affichage de la quantité Style : Texte uniquement, Carré, Arrondi, Pilule n/a
Ajouter une couleur à la bordure de l'affichage de la quantité Couleur des bordures n/a
Ajouter une couleur d'arrière-plan à l'affichage de la quantité Couleur d'arrière-plan n/a
Modifier la police d'affichage de la quantité Police des étiquettes n/a
Modifier la couleur d'affichage de la quantité Couleur des étiquettes n/a
Définir la police de la quantité et des variantes Police Applique les réglages d'en-tête ou de titre 1 à l'échelle du site.
Définir la couleur du texte de la quantité et des variantes Couleur du texte n/a
Modifier la police du menu déroulant des variantes. Il n'est pas possible de modifier la police de l'élément de menu. Police n/a

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
Description Avancé Classique
Masquer le bouton Décochez le bouton Afficher n/a
Modifier le style du bouton Style : Gras, Contour, En relief Style : par défaut, gras, contour, en relief
Modifier la forme du bouton Forme : Carré, Arrondi, Pilule Forme : Carré, Arrondi, Pilule
Ajouter ou supprimer une marge intérieure dans le bouton Marge intérieure : Petit, Moyen, Grand n/a
Modifier la couleur du bouton Couleur Couleur des boutons
Modifier la couleur du texte du bouton Couleur du texte Couleur du texte
Modifier la police du bouton Police Police
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
Description Avancé Classique
Modifier les éléments par ligne Articles par ligne Articles par ligne
Ajouter ou supprimer un espacement entre les éléments Espacement entre les articles Espacement entre les articles
Définir la valeur de proportion de l'image Valeur de proportion de l'image Valeur de proportion de l'image
Modifier l'alignement du texte Détails d'alignement : Centre, Gauche Détails d'alignement : Centre, Gauche
Modifier l'espacement entre les titres Espacement du titre Espacement du titre

Panier

L'icône s'affiche sous la forme d'un panier dans l'en-tête du site. Pour en savoir plus, consultez l'affichage de l'icône du panier.

Tous les modèles 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 modèle, consultez Affichage de l'icône de panier.

Navigation par catégorie

Après avoir ajouté des catégories à vos produits, un menu de navigation apparaît en haut de la page de destination. Les clients peuvent utiliser ces liens pour filtrer les produits qui les intéressent. Gardez à l'esprit que dans les deux versions, la navigation par catégorie :

  • S'affiche uniquement après avoir ajouté au moins une catégorie
  • Ne s'affiche pas sur les pages de détails
  • Affiche toutes les catégories, même celles liées aux produits cachés

La navigation par catégorie peut s'afficher en haut de la page de votre boutique ou dans une barre latérale.

La police de navigation de catégorie respecte le style de paragraphe.

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 modèles :

  • 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 modèles. Consultez votre guide de modèles pour plus d'informations sur le style de navigation par catégorie.

Section Styles de site

  • Avancé - Produits : tri + filtre
  • Classique - Produits
Description Avancé Classique
Masquer la navigation par catégorie Affichage : masquer Décochez Afficher la navigation par catégorie
Activer, désactiver et aligner la navigation par catégorie Affichage : en haut, à gauche, à droite, masquer n/a
Définissez la largeur si la navigation par catégorie se trouve à gauche ou à droite. Largeur n/a
Changez l'espace sous la navigation. Marge n/a
Modifier l'espace entre chaque élément de la ligne Espacement entre les articles n/a
Définir l'alignement du texte Alignement : Gauche, Centre, Droite n/a
Définir la police de navigation Police

Police de la navigation par catégorie

(Non disponible pour Bedford, Five, Ishimoto, Montauk et Native)

Définir la couleur de navigation Couleur

Couleur Catégorie Nav

(Non disponible pour Bedford, Five, Ishimoto, Montauk et Native)

Choisissez la couleur de l'affichage des liens au survol Couleur active

Couleur active de la navigation par catégorie

(Non disponible pour Bedford, Five, Ishimoto, Montauk et Native)

Étiquettes en promotion, épuisé et à disponibilité limitée

Sur les articles épuisés, il est toujours affiché une étiquette personnalisable indiquant ce statut. Dans les deux versions, vous pouvez modifier le texte de l'étiquette, sa police et sa couleur. Dans la version 7.0, vous pouvez modifier la forme et l'emplacement de l'étiquette.

Les étiquettes de Promotion et de Disponibilité limitée s'affichent également si vous les avez activées. Les modifications possibles dépendent de la version de votre site. Vous pouvez modifier le texte de l'étiquette de disponibilité limitée dans le panneau Disponibilité limitée, mais il n'est pas possible de modifier le texte de l'étiquette de promotion.

  • 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 modèles :

  • 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 modèles 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
Description Avancé Classique
Masquer le badge Style : Aucun n/a
Définir le style du badge Style : Rectangle, Carré, Cercle, Aucun n/a
Définir la couleur du badge de promotion Couleur Promo n/a
Définir la couleur du badge de stock épuisé Couleur Épuisé n/a
Définir la police du badge Police n/a
Ajouter ou supprimer une marge intérieure Marge intérieure n/a
Définir la position du badge Position : En haut à gauche, En haut au centre, En haut à droite, Centre-gauche, Centre-centre, Centre-droite, En bas à gauche, En bas au centre, En bas à droite n/a
Chevaucher le badge et l'image du produit Insertion : Flottant, Aligné, Ancrage vertical, Ancrage horizontal n/a
Modifier la taille du badge Taille de l’insertion n/a
Couleur Prix Solde Utiliser la couleur du Prix de vente dans la section Produits : Détails n/a
Couleur du badge de statut Peut être uniquement en noir ou blanc, en fonction de la couleur d'arrière-plan du badge n/a
Couleur de l'étiquette de Disponibilité limitée Couleur de l'étiquette de Disponibilité limitée Couleur de l'étiquette de Disponibilité limitée
Police de l'étiquette de Disponibilité limitée Police de l'étiquette de Disponibilité limitée Police de l'étiquette de Disponibilité limitée

Effets de zoom d'image, d'aperçu rapide et au survol

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 modèles :

  • 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
Description Avancé Classique
Définir l'action au survol

Comportement au survol de l'article (s'affiche lorsque la position Produit : Détails est définie sur En-dessous )

n/a
Afficher la deuxième image dans l’éditeur de produit au survol Comportement au survol de l'article : Afficher une autre image n/a
Applique un effet de fondu sur les détails visibles du produit au survol

Comportement au survol de l'article : effet de fondu

n/a
Aucun effet au survol

Dans la section Produit : Détails, sélectionnez Position : En-dessous, puis dans la section Produit : Disposition, choisissez Comportement au survol de l'article : Aucun

Titres de la liste des produits : En-dessous
Afficher les détails du produit au survol au lieu d’une autre image ou d’un effet de fondu

Dans la section Produit : Détails, sélectionnez Position : Superposition

Titres de la liste des produits : Superposition
Afficher les titres de produits sous l'image du produit n/a Titres de la liste des produits : En-dessous
Modifier la couleur de superposition au survol n/a Couleur de superposition du produit
Afficher ou masquer le prix du produit au survol n/a Afficher le prix du produit

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
  • Classique - non disponible
Description Avancé Classique
Activer l'Aperçu de produit Action au survol : Zoom n/a
Définir le facteur de zoom de l'image Facteur de zoom d'image n/a

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 modèles.

Section Styles de site

  • Avancé - Produits : Bouton d'aperçu rapide
  • Classique - non disponible
Description Avancé Classique
Personnaliser le style, la couleur, la police, la marge intérieure, la position et la taille du bouton Aperçu rapide Position n/a
Personnaliser l'apparence de la lightbox Produits : Lightbox de l’aperçu rapide n/a
Afficher la description du produit Affichage d'extrait : Tronquer n/a
Ajouter un filtre de couleur à la page Boutique derrière la lightbox Couleur de superposition n/a
Modifier le bouton de navigation et de fermeture qui apparaît en dehors de la lightbox Commandes n/a
Modifier la police du titre de l'Aperçu rapide Dans la section Produits : Détails, sélectionnez Police de titre n/a

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).

Polices et couleurs

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 :

Section Éléments de page Boutique
Titres Titres des pages, titre de section des Produits associés et titres de produits
Paragraphes Description du produit, prix et navigation entre les pages
Boutons Boutons
Métadonnées Styles divers, comme les balises et les prix
Avancé : produits : liste Titre de la liste, prix catalogue, statut de la liste
Avancé : page de détails du Produit Titre de l'article, prix de l'article, description de l'article, champs de variante

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

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

Pages de boutiques 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 de Variantes constituent une exception, car ils utilisent la même police sur toutes les pages Boutique classique. Cette police ne peut pas être modifiée dans Styles de 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.

Mobile

Les produits et les informations sont empilés verticalement sur les smartphones, les tablettes et les navigateurs étroits.

  • Actuellement, l'Aperçu rapide et le zoom d'image ne sont pas disponibles sur mobile.
  • Les titres et les prix s'affichent toujours sous les images de produit sur les pages Boutique.
  • Les effets de couleur de superposition, d'image alternative et de fondu ne s'affichent pas.
  • Lorsque la navigation par catégorie ne peut pas tenir sur une ligne, elle s'affiche sous la forme d'une liste de défilement horizontale que les visiteurs peuvent balayer.

Sur la version 7.1 :

  • Les images de la page des détails du produit s'affichent toujours dans un diaporama pour que les clients puissent les balayer. Les images miniatures ne s'affichent pas sous le diaporama.
  • La navigation par catégorie s'affiche horizontalement pour permettre aux acheteurs de les balayer.
  • Les produits sʼaffichent dans une seule colonne.
  • La navigation en fil d'Ariane ne s'affiche pas.

Sur la version 7.0 :

  • Les pages de Boutique avancées ont des couleurs mobiles uniques pour les titres, les prix et les prix en promotion des articles.
  • Les produits sʼaffichent dans deux colonnes ou plus.

Visitez les styles mobiles avancés de la version 7.0 pour en savoir plus sur les autres options mobiles de votre modèle. La version 7.1 n'a pas de styles mobiles distincts.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 32 sur 119
Personnaliser les pages Boutique