SScale Themedocs
EN

Le panier latéral coulissant avec toutes ses options - type, position, code promo, notes, trust badges et blocs personnalisables.

Cart Drawer

Le Cart Drawer est le panier latéral qui s'ouvre depuis le côté de l'écran. C'est le mode de panier par défaut de Scale Theme, offrant une expérience d'achat fluide sans quitter la page en cours.

Modes du panier

Scale Theme propose deux modes pour le panier :

ModeDescription
Drawer (défaut)Panneau latéral coulissant
PagePage dédiée /cart classique
SettingOptionsDéfaut
Type de panierDrawer / PageDrawer
Ouvrir à l'ajoutOuvre automatiquement le drawer quand un produit est ajoutéOui
💡Le mode Drawer est recommandé pour la conversion. Il permet au client de voir son panier sans quitter la page, ce qui réduit les frictions et facilite le retour à la navigation.

Position

SettingOptionsDéfaut
PositionDroite / GaucheDroite

Structure du drawer

Le Cart Drawer est organisé en 3 zones :

  • Titre "Panier" avec le nombre d'articles
  • Bouton de fermeture (X)

Body (scrollable)

  • Timer (optionnel)
  • Barre de progression (optionnel)
  • Custom Liquid (position: au-dessus des articles)
  • Liste des articles du panier
  • Upsells (position: scroll, optionnel)
  • Custom Liquid (position: en dessous des articles)
  • Upsells (position: fixed, optionnel)
  • Quick Add Products (optionnel)
  • Champ code promo (optionnel)
  • Custom Liquid (position: au-dessus des totaux)
  • Décompte des prix (sous-total, économies, total)
  • Note de taxes/livraison (optionnel)
  • Note de panier (optionnel)
  • Custom Liquid (position: au-dessus du checkout)
  • Bouton Checkout
  • Checkout accéléré (Apple Pay, Google Pay, Shop Pay)
  • Trust badges (optionnel)
  • Custom Liquid (position: en dessous du checkout)

Barre de progression

La barre de progression affiche l'avancement vers les paliers de livraison gratuite et de cadeaux. Elle se compose de blocs Cart Tier (voir Barre de livraison gratuite).

SettingDescriptionDéfaut
Activer la barreAffiche la barre de progressionNon
Palette de couleursCouleurs de la barre (hérité d'une palette du thème)Background 1
Message de complétionMessage affiché quand tous les paliers sont atteints"🎉 You've unlocked all rewards!"
💡Personnalisez le message de complétion en français : "🎉 Bravo, vous avez débloqué toutes les récompenses !" pour maintenir la cohérence linguistique de votre boutique.

Animation Fly to Cart

L'animation Fly to Cart donne un feedback visuel quand un produit est ajouté au panier. Elle se configure dans les settings du Cart Drawer :

SettingOptionsDéfaut
ActiverOn / OffOn
Type d'animationImage / Dot / LineDot
TypeDescriptionRecommandé pour
ImageL'image du produit vole vers l'icône panierBoutiques visuelles (mode, déco)
DotUn point animé se déplace vers le panierLa plupart des boutiques (discret et rapide)
LineUne ligne animée trace le chemin vers le panierBoutiques minimalistes

Pour plus de détails sur l'animation, voir Fly to Cart.

Timer

Un compte à rebours qui crée un sentiment d'urgence :

SettingDescriptionDéfaut
Activer timerActive le compte à reboursNon
DuréeDurée du timer (5-30 min)15 min
MessageTexte avec placeholder $time"You have $time to complete your order!"
Palette de couleursCouleur de fond du timerBackground 1
💡Pensez à traduire le message du timer en français : "Votre panier expire dans $time" ou "Finalisez votre commande dans $time !". Le message par défaut est en anglais.
ℹ️Le placeholder $time dans le message est remplacé dynamiquement par le temps restant. Exemple : "Vous avez 14:32 pour finaliser votre commande !"

Champ code promo

SettingDescriptionDéfaut
Activer champ de réductionAffiche un champ pour saisir un code promoOui

Le champ code promo permet au client d'appliquer un code directement dans le drawer. Un message de succès ou d'erreur s'affiche après application. Les codes appliques apparaissent avec un bouton de suppression dans le récapitulatif des prix.

Bouton Checkout

SettingDescriptionDéfaut
Texte du boutonTexte personnalisé du bouton checkout"Check out"

Note de panier

SettingDescriptionDéfaut
Activer noteChamp textarea pour message du clientOui

Note taxes/livraison

SettingDescriptionDéfaut
Afficher note taxesMention "Taxes incluses" et lien politique de livraisonOui

Trust Badges

Les trust badges renforcent la confiance au moment critique du checkout :

SettingDescriptionDéfaut
Activer trust badgesAffiche les badges de confianceNon
Afficher badges paiementIcônes des moyens de paiement actifs (Visa, MC, etc.)Oui
Image personnaliséeUpload d'une image (badges custom, certifications)-
Largeur imageLargeur de l'image personnalisée (50-400px)200px
EspacementGap entre les badges (0-40px)16px
💡Combinez les icônes de paiement automatiques (détectées depuis vos passerelles Shopify) avec une image personnalisée contenant vos certifications, garanties ou badges de sécurité.

Blocs

Le Cart Drawer supporte les blocs suivants :

Cart Tier

Palier de la barre de progression. Voir Barre de progression livraison gratuite.

SettingDescription
TypeShipping (livraison) / Gift (cadeau)
SeuilMontant à atteindre
MessageTexte avec placeholder $amount
Message de succèsTexte quand le palier est atteint
IcôneTruck / Package / Gift / Star / None
Produit cadeauProduit offert (si type Gift)

Custom Liquid

Bloc de code Liquid personnalisé injectable a différentes positions dans le drawer.

App

Bloc d'application Shopify.

Quick Add Products

Produits rapides ajoutables en un clic dans le panier :

SettingDescriptionDéfaut
Activer Quick AddActive les produits rapidesNon
ProduitsListe de produits (max 5)-
Label 1-5Label personnalisé pour chaque produit-
ℹ️Les Quick Add sont différents des Upsells. Les Quick Add sont des petits boutons rapides (comme des "add-ons"), tandis que les Upsells sont des recommandations de produits avec image et prix. Voir Cart Upsells.

Interactions

  • Ouverture : clic sur l'icône panier, ajout au panier, événement cart:open
  • Fermeture : bouton X, clic sur l'overlay, touche Escape
  • Quantité : boutons +/- et champ de saisie directe
  • Suppression : bouton poubelle par article
  • Accessibilité : role="dialog", aria-modal="true", focus trap

Prochaines étapes

PrécédentCadeaux progressifsSuivantBarre livraison gratuite