Skip to main content
Les paramètres de personnalisation vous permettent de personnaliser l’apparence de votre checkout, des couleurs et de la typographie aux boutons, champs de formulaire et mise en page. Ces outils facilitent l’alignement du design de votre checkout avec votre identité de marque.

​
Comment y accéder

Ouvrez le tableau de bord Checkout dans Aftersell et cliquez sur Edit branding en haut de la page.
La modification de la personnalisation ici nécessite un forfait Shopify Plus. Shopify ne permet aux applications de lire et d’écrire la personnalisation du checkout que sur Plus, donc sur les autres forfaits, ces paramètres ne peuvent pas être enregistrés. Si votre boutique n’est pas sur Plus, effectuez les mêmes modifications dans l’éditeur de checkout Shopify à la place : Settings → Checkout → Customize dans votre admin Shopify.
Tableau de bord Checkout d'Aftersell avec une flèche pointant vers le bouton Edit branding L’éditeur est organisé en trois groupes : Design system, Customizations et Advanced.

​
Système de design

Les paramètres du système de design constituent la fondation. Les composants de l’ensemble du checkout en héritent, sauf si un paramètre plus spécifique les remplace.

​
Couleurs globales

Vos couleurs de marque et système, utilisées dans votre boutique et vos expériences post-achat. Les composants utilisent ces couleurs lorsqu’aucun schéma de couleurs n’est défini. Brand colors
  • Brand – votre couleur de marque principale.
  • Accent – utilisée pour les éléments interactifs et mis en évidence.
  • Decorative – utilisée pour les éléments décoratifs d’appoint.
Status and system colors
  • Success – états de confirmation.
  • Warning – messages d’avertissement.
  • Critical – erreurs et alertes.
  • Info – messages informatifs.
Les couleurs de surface et de bouton ne se définissent pas ici. Elles se trouvent sous Advanced > Color schemes.

​
Typographie

  • Font size – définissez la Base size et le Scale ratio qui dérive le reste de l’échelle typographique.
  • Primary font – utilisée pour la plupart des composants tels que le texte courant, les boutons et les contrôles de formulaire. Choisissez une Font family, une Base weight et une Bold weight.
  • Secondary font – utilisée pour les composants de titre, avec les trois mêmes contrôles.

​
Rayon des coins

Définit les valeurs de rayon des coins partagées auxquelles se réfèrent les boutons, les champs de formulaire, les conteneurs et les autres composants. Vous définissez trois tailles : Small, Medium et Large.

​
Personnalisations

​
Boutons

Configurés séparément pour les Primary buttons (l’action principale d’une page) et les Secondary buttons (actions secondaires). Chacun dispose de :
  • Corner radius – Small, Medium, Large ou None (carré).
  • Background – Solid ou None.
  • Vertical padding et Horizontal padding.
  • Show border.
Les couleurs des boutons sont héritées des schémas de couleurs. Si aucune valeur de schéma n’est définie, les couleurs globales sont utilisées.

​
Champs de formulaire

S’applique à tous les types de champs pris en charge :
  • Corner radius
  • Label position – Inside ou Outside.
  • Show border
Les Field-specific overrides vous permettent de vous écarter de ces styles partagés pour des types de champs particuliers : Text field borders, Dropdown borders, Choice list group spacing et Checkbox corner radius.

​
Vignettes de produits

Contrôle l’apparence des images de produits sur la page :
  • Show border
  • Border radius
  • Fit
  • Badge background color – Accent (couleur d’accent du schéma) ou Base (couleur de base du schéma).
  • Layout – Placement (Top bar, Left section ou Right section) et Alignment (Left, Center ou Right).
  • Container – Padding, Color scheme et Show divider.
Page de checkout avec l'en-tête du nom de boutique mis en évidence en haut à gauche

​
Zone de contenu

Contrôle le Divider entre la zone principale et celle du récapitulatif de commande : Show divider, Border style et Border weight.

​
Zone principale

  • Section containers – l’habillage d’arrière-plan et de bordure autour de chaque section : Background, Show border, Border style, Border weight.
  • Section dividers – les lignes affichées entre les sections.

​
Récapitulatif de commande

  • Container – le Color scheme appliqué au conteneur global du récapitulatif de commande.
  • Section dividers – Show divider, Border style, Border weight.
  • Section containers – l’arrière-plan et la bordure autour de chaque section : Show border, Background, Border style, Border weight, Color scheme, Corner radius, Padding et Shadow.
Vignette de produit du récapitulatif de commande avec une bordure d'image mise en évidence
  • Layout – Placement et Alignment.
  • Container – Show footer content, Padding, Color scheme et Show divider.

​
Avancé

​
Schémas de couleurs

Les schémas de couleurs sont des ensembles réutilisables de couleurs de surface, de texte et de bouton auxquels les autres sections font référence. Deux schémas sont disponibles :
  • Scheme 1 - Main area
  • Scheme 2 - Supporting areas
Chaque schéma est divisé en trois groupes :
  • Buttons – utilisés pour le bouton de paiement principal et les actions secondaires. Primary button et Secondary button sont configurés séparément, chacun avec son propre état par défaut et son état au survol.
  • Form controls – utilisés pour les champs de texte, les menus déroulants et les listes de choix.
  • Base surfaces – l’arrière-plan de surface, le texte courant et les rôles d’appoint : bordure, accent (liens et focus), décoratif (mises en évidence subtiles) et couleur d’icône.
Partout où une section propose un contrôle Color scheme, vous pouvez le faire pointer vers Scheme 1, Scheme 2 ou Transparent.