> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Paramètres de personnalisation du checkout

> Cet article vous guide à travers les paramètres de personnalisation du checkout et l'utilisation de chaque fonctionnalité pour personnaliser votre checkout.

Les paramètres de personnalisation vous permettent de personnaliser l'apparence de votre expérience de checkout, des couleurs et boutons aux en-têtes et dispositions de champs. Ces outils facilitent l'alignement du design de votre checkout avec votre identité de marque.

<div id="how-to-access-it">
  # Comment y accéder
</div>

Vous pouvez accéder aux paramètres en cliquant sur « Edit Branding » en haut de votre éditeur de checkout :

<Note>
  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.
</Note>

/

<img src="https://mintcdn.com/aftersell/YlZ1q43-dCG5ignq/images/checkout-branding-dashboard-arrow-edit-button-1.gif?s=a6cf34d429205a46f8c78d987442ff9a" alt="En-tête du nom de boutique de la personnalisation du checkout" title="Checkout Branding Store Name Header" lightAlt="En-tête du nom de boutique de la personnalisation du checkout" darkAlt="En-tête du nom de boutique de la personnalisation du checkout" className="dark:hidden" width="1432" height="1080" data-path="images/checkout-branding-dashboard-arrow-edit-button-1.gif" />

<img src="https://mintcdn.com/aftersell/YlZ1q43-dCG5ignq/images/checkout-branding-dashboard-arrow-edit-button-2.gif?s=b5db486ea8dab31563b64af7d38fc190" alt="En-tête du nom de boutique de la personnalisation du checkout" title="Checkout Branding Store Name Header" lightAlt="En-tête du nom de boutique de la personnalisation du checkout" darkAlt="En-tête du nom de boutique de la personnalisation du checkout" className="hidden dark:block" width="1432" height="1080" data-path="images/checkout-branding-dashboard-arrow-edit-button-2.gif" />

***

<div id="design-system">
  # Système de design
</div>

<div id="color-palette">
  ## Palette de couleurs
</div>

Cette section vous permet d'ajuster les couleurs utilisées dans votre checkout, y compris les arrière-plans, les boutons et le texte. Vous pouvez modifier les zones suivantes :

* **Primary Buttons** - Contrôle la couleur des boutons d'action principaux (par ex. « Pay Now » ou « Add »).

* **Interactive** - Contrôle les éléments avec lesquels les clients peuvent interagir, comme les liens et les champs de saisie.

* **Main Body** - Définit la couleur du **côté gauche** de la page de checkout.

* **Secondary Body** - Définit la couleur du **côté droit** (section du récapitulatif de commande).

* **Loading Screens** – Définit la couleur affichée lorsque les clients effectuent une action déclenchant un écran de chargement.

* **Critical** – Contrôle la couleur des messages d'erreur ou des alertes affichés pendant le checkout.

<div id="variables">
  ## Variables
</div>

Cette section vous permet de contrôler le **rayon des coins** des éléments dans tout votre checkout. Le rayon des coins correspond essentiellement au degré d'arrondi des coins.

Vous pouvez ajuster le rayon pour :

* **Petits éléments** (ex. cases à cocher)
* **Éléments moyens** (ex. champs de texte ou de saisie)
* **Grands éléments** (ex. boutons ou cartes)

***

<div id="customizations">
  # Personnalisations
</div>

<div id="buttons">
  ## Boutons
</div>

Cette section vous permet de personnaliser des options de style supplémentaires pour vos boutons principaux et secondaires au-delà de la couleur :

* **Variables** – Définissez si le bouton utilise le réglage de rayon small, medium ou large de la section Variables
* **Background** – Choisissez entre un arrière-plan de couleur unie ou transparent.
* **Border** – Activez ou désactivez une bordure autour du bouton.
* **Horizontal & Vertical Padding** – Ajustez l'espacement autour des boutons.
  * *Horizontal* = espacement gauche et droit
  * *Vertical* = espacement haut et bas

<div id="fields">
  ## Champs
</div>

Cette section vous permet de contrôler le style de tous les champs de formulaire, y compris les champs de texte, les menus déroulants et les cases à cocher :

* **Variables** – Attribuez la taille du champ (small, medium ou large) dans la section Variables.
* **Border** – Activez ou désactivez les bordures.
* **Label Position** – Choisissez si l'étiquette du champ apparaît à l'intérieur ou au-dessus de la saisie.
* **Corner Radius** – Ajustez le degré d'arrondi des coins du champ.

<div id="header">
  ## **En-tête**
</div>

Dans cette section, vous pouvez personnaliser la position et l'alignement de l'en-tête de votre checkout :

* Positionnez l'en-tête à gauche ou à droite de la page.
* Alignez le texte de l'en-tête à gauche, au centre ou à droite.

<img src="https://mintcdn.com/aftersell/YlZ1q43-dCG5ignq/images/checkout-branding-store-name-header-1.gif?s=ca0a308a994bdd36ad77b6ed4feab68e" alt="En-tête du nom de boutique de la personnalisation du checkout 1" width="1872" height="1080" data-path="images/checkout-branding-store-name-header-1.gif" />

<div id="order-summary">
  ## Récapitulatif de commande
</div>

Cette section vous donne le contrôle sur l'apparence des images de produits dans le récapitulatif de commande :

* Ajoutez ou retirez une **bordure** d'image.
* Ajustez le **rayon des coins** pour rendre les coins des images plus arrondis ou plus carrés.

<img src="https://mintcdn.com/aftersell/YlZ1q43-dCG5ignq/images/checkout-branding-order-summary-product-thumbnail.gif?s=6f27bbf3a0dff0cc83bf07b39eeae36b" alt="Vignette de produit du récapitulatif de commande de la personnalisation du checkout" width="1264" height="1080" data-path="images/checkout-branding-order-summary-product-thumbnail.gif" />

***

<div id="coming-soon">
  # Bientôt disponible
</div>

Nous avons des options de personnalisation supplémentaires à venir, notamment :

* **Typography** – Contrôlez les styles et graisses de police.
* **Main & Global Settings** – Options étendues pour la cohérence globale du design.

Plus de détails seront disponibles au lancement de ces fonctionnalités.
