Affichage de l'icône du panier

Étapes pour personnaliser ou masquer l’icône du panier de votre boutique.

Dernière mise à jour le 25 février 2024

Tous les sites sont dotés d’une icône de panier qui indique le nombre d’articles présents dans le panier du client et qui le redirige vers la page de paiement.

Personnaliser l'icône

La procédure à suivre pour personnaliser l’icône de panier dépend de la version de votre site.

Par défaut, l'icône de panier s'affiche sous la forme d'un panier dans l'en-tête du site.

Pour activer et personnaliser l’icône Panier :

  1. Cliquez sur Modifier en haut à gauche de l’aperçu de votre site.
  2. Survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
  3. Cliquez sur Ajouter des éléments.
  4. Activez le bouton Panier.
  5. Cliquez n’importe où en dehors de l’éditeur.
  6. Cliquez sur l’icône Panier dans votre en-tête, puis sur celle en forme de crayon.
  7. Sélectionnez le style.
    • Si vous choisissez Icône, sélectionnez une icône de panier, chariot ou sac à afficher dans votre en-tête, puis cliquez sur Retour pour définir la taille de l’icône.
    • Si vous choisissez Texte, du texte personnalisé de 10 caractères maximum apparaît à la place d'une icône, correspondant à vos styles de liens de navigation.
  8. Sous Bordure, vous pouvez ajouter une bordure qui entoure l’icône. Choisissez la forme de la bordure, puis sélectionnez Contour ou Plein(e) pour en modifier le design. Si vous choisissez Contour, définissez l’épaisseur du contour.
  9. Pour afficher 0 à côté du panier avant que les clients n’ajoutent un article, activez le bouton Afficher « 0 » dans le panier.
  10. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Icône de panier sous forme de texte sur les appareils mobiles

Lorsque l’icône de votre panier est définie sur Texte, elle affiche le nombre d’articles qui se trouvent dans le panier. Au départ, l’icône du panier sera représentée par « (0) » dans l’en-tête du site. La modification de l’option Afficher « 0 » dans le panier n’a aucune incidence sur la façon dont elle s’affiche sur les appareils mobiles.

L'affichage de l'icône de panier dépend de votre template. Gardez à l'esprit que :

  • Dans la plupart des templates, une fois qu'un client a ajouté un article à son panier, l'icône de panier apparaît automatiquement sur toutes les pages.
  • Dans certains templates, l'icône s'affiche de manière permanente dans l'en-tête.
  • Le panier ne s'affiche pas si l'option Paiement express est activée.
  • Si vous ne voyez pas le panier, consultez nos conseils de résolution des problèmes.

Affichage par template

Ces familles de templates sont dotées du bouton classique :

  • Adirondack
  • Avenue
  • Aviator
  • Bedford : mais il s’affiche sous les éléments d’en-tête
  • Five
  • Flatiron : mais il s’affiche sous l’en-tête
  • Forte : mais il s'affiche en haut à droite
  • Galapagos
  • Ishimoto
  • Momentum : mais il s'affiche en haut à gauche si la barre de navigation est située en bas, ou en bas à gauche si la barre de navigation est située en haut.
  • Montauk
  • Native
  • Pacific : mais il s'agit d'un rectangle dont vous pouvez définir les couleurs et la police. Le bouton est identique sur version mobile (pas de barre de navigation).
  • Supply : mais il s'agit d'un rectangle.
  • Wells : mais il s'agit d'un rectangle.
  • Wexley

Ces familles de templates proposent des options avancées :

  • Brine
  • Skye
  • Tremont
  • Farro
  • York

Astuce

vous pouvez personnaliser d’autres éléments, comme le bouton Ajouter au panier, la page Boutique et le bouton Poursuivre vos achats.

Bouton classique

La plupart des templates prennent en charge le bouton classique, qui affiche l’icône de panier dans un bouton noir en forme de pilule situé en haut à droite. Il apparaît automatiquement sur toutes les pages une fois que le client a ajouté un article à son panier. Il n’a pas d’options de style.

classic-button-desktop.png

Sur mobile, le bouton classique apparaît sous forme d'une barre de navigation en bas de l'écran :

classic-button-mobile.png

Options de style avancées

Vous pouvez personnaliser le style du panier dans le panneau Styles du site pour les familles de templates suivantes :

Famille de templates Affichage sur ordinateur Affichage mobile

Brine

S’affiche dans l’en-tête sous forme de panier, de texte ou de sac. Peut être masqué. En savoir plus.

Styles mobiles séparés. S’affiche dans la barre de navigation en haut ou en bas de l’écran, sous forme d’un panier, d’un texte ou d’un sac. Peut être masqué. En savoir plus.

Farro

S’affiche dans l’en-tête sous forme de panier, de texte ou de sac. Peut être masqué. En savoir plus.

Styles mobiles séparés. S'affiche dans la barre de navigation en haut ou en bas de l'écran, sous forme d'un panier, d'un texte ou d'un sac. Peut être masqué. Cliquez ici pour en savoir plus.

Pacific

S’affiche dans un bouton rectangulaire en haut à droite. Texte uniquement. Vous pouvez personnaliser les couleurs. Ne peut pas être masqué. En savoir plus.

Même apparence que pour la version ordinateur. S’affiche en bas à droite. Ne peut pas être masqué. En savoir plus.

Skye

S’affiche sous forme de sac en haut à droite une fois que vous avez ajouté une page Boutique à votre site. Ne peut être masqué. Cliquez ici pour en savoir plus.

Même apparence que pour la version ordinateur. S’affiche en bas de l’écran dans une barre de navigation. En savoir plus.

Tremont

S’affiche sous forme de texte avec la navigation, ou sous forme d’icône de sac ou de panier en haut à droite. Peut être masqué. En savoir plus.

Même apparence que pour la version ordinateur. S’affiche en haut à droite (icône) ou sous les liens de navigation lorsque vous appuyez sur l’icône de menu (texte). S’il est masqué sur la version ordinateur, il sera également masqué sur la version mobile. En savoir plus.

York

S’affiche dans l’en-tête sous forme de panier, de texte ou de sac. Peut être masqué. En savoir plus.

Styles mobiles séparés. S'affiche sous les liens de navigation lorsque vous appuyez sur l'icône de menu. Peut être masqué. Cliquez ici pour en savoir plus.

Masquer l'icône de panier

La procédure à suivre pour masquer l’icône de panier dépend de la version de votre site.

Pour masquer l'icône sur l'en-tête de votre site :

  1. Cliquez sur Modifier en haut à gauche de l’aperçu de votre site.
  2. Survolez l’en-tête et cliquez sur Modifier l’en-tête du site.
  3. Cliquez sur Ajouter des éléments.
  4. Désactivez le bouton Panier.
  5. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Si vous masquez l'icône du panier, une icône de panier apparaît en bas de la page lorsque quelqu'un ajoute un produit à son panier. Pour modifier la couleur de l'icône :

  1. Lorsque vous modifiez une page, ouvrez Styles du site, puis cliquez sur Couleurs.
  2. Sous Bouton, définissez les couleurs d’arrière-plan et de texte. Le panier suit le thème de couleurs par défaut de votre site.
  3. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Il n'est pas possible de désactiver l'icône ou de modifier sa taille et sa forme.

Sans l'icône de panier, les clients ne pourront pas trouver la page de paiement par leurs propres moyens. Vous ne devez la masquer que si vous utilisez l'option de paiement express ou que vous ne vendez que des produits par abonnement. Dans de tels cas de figure, les clients seront automatiquement redirigés vers la page de paiement après avoir sélectionné un produit.

Vous pouvez utiliser l’ajustement du panneau Styles du site mentionné ci-dessous pour masquer ou afficher le panier dans les familles de templates suivantes :

  • Brine : position du panier
  • Farro : position du panier
  • Tremont : affichage du lien de panier
  • York : position du panier
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é.