Fonctionnalités spéciales de la page Boutique

Améliorez l’expérience d’achat en activant l’aperçu rapide des produits, le zoom sur l’image, les effets de survol et les listes d’attente.

Dernière mise à jour le 3 janvier 2025

Chaque site Squarespace prend en charge les pages Boutique que vous pouvez utiliser pour montrer et vendre des produits. Certains sites disposent de fonctionnalités supplémentaires, telles que lʼaperçu rapide, le zoom dʼimage et les effets de survol, qui sʼaffichent lorsque les clients passent la souris sur les images du produit. Ce guide présente ces fonctionnalités et explique où les trouver.

Astuce

inscrivez-vous à notre webinaire Design tips to increase your store’s sales webinar (Conseils de design pour augmenter les ventes de votre boutique, en anglais uniquement), au cours duquel nous présenterons des outils et des conseils pour faire ressortir vos produits sur votre site et générer plus de ventes.

Fonctionnalités pour chaque version

Les fonctionnalités disponibles dépendent de la version de Squarespace quʼutilise votre site.

Pour la version 7.0, ces options sont disponibles dans les familles de templates Brine, Farro, Galapagos, Skye, Tremont et York. Pour plus dʼinformations sur tous les templates, consultez lʼarticle Types de pages Boutique.

Dans la version 7.1, l’aperçu rapide, le zoom de l’image et les effets de survol sont disponibles sur les pages Informations sur le produit avec la disposition Simple.

  Version 7.1
Version 7.0
Aperçu rapide
  • Blocs Produit
  • Blocs Sommaire
  • Page Boutique
  • Blocs Produit
  • Page Boutique
  • Blocs Sommaire
Zoom sur l'image
  • Pages Informations sur le produit
  • Lightbox de l’aperçu rapide
  • Pages Informations sur le produit
  • Lightbox de l’aperçu rapide
Effets de Survol
  • Image de remplacement sur les Pages de la boutique
Listes d’attente
  • Oui 
  • Oui (non disponible avec Galapagos)

Zoom sur l'image

Avec le zoom d'image, les clients peuvent agrandir les images de produit pour se faire une meilleure idée de la matière, de la texture et des petits détails. Vous pouvez configurer le zoom de sorte à ce qu'il s'active lorsque les clients survolent l'image ou lorsqu'ils cliquent dessus.

Le zoom d'image est disponible sur :

  • Les pages Informations sur le produit 
  • Les lightbox d’aperçu rapide
image-zoom.gif

Activer le zoom d’image

La façon dont vous activez le zoom d'image dépend de la version de votre site.

Pour activer le zoom d’image : 

  1. Sur la page Informations sur le produit, cliquez sur Modifier, puis sur l’icône en forme de crayon.
  2. Cliquez sur le menu déroulant Action en cas de survol.
  3. Sélectionnez Zoom.

Pour activer le zoom d'image :

  1. Sur la page Informations sur le produit, revenez au panneau Site web, cliquez sur Design, puis sur Styles du site.
  2. Faites défiler l’écran jusqu’à la section Produits : Zoom d’image. (Pour le template Galapagos, faites défiler l’écran jusqu’à la section Produits.)
  3. Cochez l’option Activer le zoom d’image.
  4. Pour définir le niveau d’agrandissement, placez le curseur Facteur de zoom sur une valeur entre 1 et 5. (Dans le template Galapagos, ce curseur s’appelle Facteur du zoom d’image.)
  5. Pour déclencher le zoom dès que le curseur est placé sur une image, configurez l'option Activer le zoom : sur Clic ou Survol. (Pour la disposition Galapagos, le zoom est toujours activé en cas de survol.)

Remarques concernant le zoom d’image

  • Le zoom d’image affiche une version agrandie de l’image. Il ne s’agit pas réellement d’un zoom sur un fichier image.
  • Le zoom d’image n’est pas disponible sur les appareils mobiles.
  • Pour de meilleurs résultats, formatez votre image de produit en vue d'un affichage sur Internet avant de la télécharger.
  • Les images dont l’arrière-plan est transparent (.png) affichent l’image d’origine derrière la version agrandie.
  • Dans la version 7.1, le zoom d’image n’est pas disponible pour les galeries de produits avec le design Carrousel.

Aperçu rapide

Avec l’aperçu rapide, les clients peuvent cliquer sur un bouton pour afficher les détails du produit avec un effet lightbox, cela sans quitter la page actuelle. L’aperçu rapide incite les clients à interagir avec votre boutique et à découvrir d’autres produits que vous proposez.

Le bouton Aperçu rapide peut être affiché dans les emplacements suivants :

  • Blocs Sommaire
  • Blocs Produit
  • Pages Boutique

Le bouton s’affiche lorsque le visiteur survole le produit. La lightbox de l’aperçu rapide inclut les détails du produit, les images et un lien Afficher l’article complet qui permet d’accéder à la page de l’article.

Product_Block_with_Quick_View.png

Si du code indésirable s’affiche dans l’aperçu rapide, cela est sûrement dû à la mise en forme du texte externe dans la description du produit. Pour supprimer la mise en forme, saisissez à nouveau la description du produit manuellement ou collez-la sous forme de texte brut

Ajouter des boutons Aperçu rapide

Vous pouvez activer l’aperçu rapide pour chaque page Boutique et chaque bloc. Si vous avez plusieurs pages Boutique ou plusieurs blocs, vous devez ajouter le bouton à chacun d’entre eux.

Pour ajouter un aperçu rapide à un bloc Produit, procédez comme suit :

  1. Dans l’éditeur de blocs Produit, choisissez un produit à afficher.
  2. Dans l’onglet Design, activez le bouton Aperçu rapide des produits.
  3. Enregistrez les modifications que vous avez apportées à la page. 

Pour ajouter l'aperçu rapide à un bloc Sommaire :

  1. Dans l’éditeur de bloc Sommaire, vérifiez d’avoir bien sélectionné une page Boutique depuis l’onglet Contenu.
  2. Cliquez sur l'onglet Design.
  3. Activez le bouton Activer l’aperçu rapide du produit. Le bouton Aperçu rapide s’affichera au-dessus de l’image mise en avant du produit dans le bloc.
  4. Enregistrez les modifications que vous avez apportées à la page.

Pour ajouter l’aperçu rapide à une page Boutique :

  1. Ouvrez les paramètres de la page.
  2. Cliquez sur Avancé, puis sur Aperçu rapide avant d'activer l'option Activer l'aperçu rapide.
  3. Si vous avez plusieurs pages Boutique, répétez ces étapes pour chacune d’entre elles.

Personnaliser le bouton et la lightbox (version 7.0 uniquement)

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.

  1. Dans le menu principal, cliquez sur Site web, sur Design, puis sur Styles du site.
  2. Dans la section Produits : Bouton Aperçu rapide, personnalisez le style, la couleur, la police, la marge intérieure, la position et la taille du bouton Aperçu rapide. 
  3. Dans la section Produits : Lightbox de l’aperçu rapide, personnalisez l’aspect de l’effet lightbox. 

Astuce

si le texte de votre aperçu rapide présente des problèmes de mise en forme, essayez dʼajouter les informations du produit en texte brut.

Remarques concernant l’aperçu rapide

  • L’aperçu rapide n’est pas disponible sur les appareils mobiles.
  • Vous ne pouvez pas changer le texte du bouton Aperçu rapide.
  • Les images de produits apparaissent sous forme de carré recadré dans l’aperçu rapide.
  • Dans la version 7.0, 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, les listes à puces et les sauts de ligne).

Effets de Survol

Les effets de survol affichent des informations ou créent un mouvement lorsque vous déplacez votre curseur sur une image de produit, ajoutant une interaction et une animation à votre boutique. Les options de survol disponibles sur votre site dépendent de la version de votre site.

Toutes les pages Boutique affichent la deuxième image de produit alternative en survol lorsqu’un produit possède plusieurs images.

Les familles de templates Brine, Farro, Skye, Tremont et York (avec les pages Boutique avancées) proposent les trois options suivantes :

  • Image alternative
  • Fondu
  • Superposition des informations du produit

Vous pouvez afficher le nom et le prix des produits dans une superposition en couleur en cas de survol dans les familles de templates suivantes (avec les pages Boutique classiques) :

  • Adirondack, Avenue, Aviator, Bedford, Five, Flatiron, Forte, Ishimoto, Momentum, Montauk, Native, Pacific, Wells, Wexley

Deux templates disposent d’options de survol uniques :

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

Fonctionnalités spéciales de la page Boutique