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

# Ajouter une ligne de sous-total à Upcart

> Pour ceux qui préfèrent qu'une ligne de sous-total soit également affichée au-dessus du bouton de paiement

<div id="introduction">
  ## Introduction
</div>

Si le paramètre de sous-total *(illustré ci-dessous)* ne fonctionne pas pour vous, voici un document expliquant comment insérer manuellement une ligne de sous-total.

<div id="enabling-subtotal-line">
  ## Activer la ligne de sous-total
</div>

Vous pouvez facilement activer la ligne de sous-total dans les paramètres Design du panier.

Voici où trouver le paramètre :

**Cart Editor > Design > General > Enable subtotal line**

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/subtotal-line-cart-editor-design-settings.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=a1c15c581fe49f32c8144e25c23f5d5b" alt="Paramètres Design du Cart Editor avec la case à cocher Enable Subtotal Line mise en évidence" width="505" height="380" data-path="images/upcart/subtotal-line-cart-editor-design-settings.png" />

<div id="inserting-subtotal-via-code">
  # Insérer le sous-total via du code
</div>

<div id="accessing-custom-css-and-html-settings">
  ## Accéder aux paramètres Custom CSS et HTML
</div>

Pour commencer à personnaliser le CSS de votre Upcart, suivez ces étapes :

1. Ouvrez l'application Upcart dans votre tableau de bord.
2. Accédez au Cart Editor.
3. Ouvrez **Settings**. Il s'agit d'une rangée d'onglets — choisissez **Custom HTML** ou **Custom CSS** (ils se trouvent derrière **More settings** si la rangée déborde).

<div id="html">
  ## HTML
</div>

Assurez-vous de sélectionner un emplacement HTML pour cibler les modifications que vous souhaitez voir dans Upcart. Dans notre cas, nous voudrions que la ligne de sous-total soit « au-dessus du bouton de paiement ». N'hésitez pas à modifier le texte « Subtotal » ci-dessous pour l'adapter à la langue de votre choix.

```
<div   
  class="cart-subtotal-section"   
  style="display: flex; justify-content: space-between;"  
>  
  <span class="cart-subtotal-title">Subtotal</span>  
  <span class="cart-subtotal-value">{{UPCART_SUBTOTAL}}</span>  
</div>
```

Voici à quoi devraient ressembler vos paramètres de HTML personnalisé dans Upcart :

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/subtotal-line-custom-html-settings-above.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=28c3da390eca8817499ed35864f7f381" alt="Paramètres Custom HTML définis sur Above checkout button avec le code de la ligne de sous-total" width="1470" height="966" data-path="images/upcart/subtotal-line-custom-html-settings-above.png" />

<div id="css">
  ## CSS
</div>

Dans **Settings =>Custom CSS**, modifiez la taille de police et les couleurs dans le CSS personnalisé selon vos besoins. N'oubliez pas de cliquer sur « Save » lorsque vous avez terminé !

```
.cart-subtotal-section {  
  margin-bottom: 4px;  
}  
  
.cart-subtotal-title {  
  font-size: 24px;  
  color: red;  
}  
  
.cart-subtotal-value {  
  font-size: 18px;  
  color: green  
}
```

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/subtotal-line-custom-css-settings-cart.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=2b4bd1b5ee98bc6eb5bb8f507a91ba31" alt="Paramètres Custom CSS montrant les règles de style du sous-total du panier" width="1452" height="1032" data-path="images/upcart/subtotal-line-custom-css-settings-cart.png" />

***

<div id="support-for-customizations">
  ## 🚧 Assistance pour les personnalisations
</div>

L'équipe d'assistance d'Upcart ne peut pas vous aider à mettre en œuvre des solutions CSS ou HTML personnalisées dans votre panier.

Si vous avez besoin d'aide pour concevoir ou styliser quelque chose de personnalisé, nous vous recommandons de [consulter un Shopify Expert](https://www.shopify.com/partners/directory) ou de discuter avec un LLM [en utilisant nos directives de prompts d'IA](https://docs.aftersell.com/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings#ai-prompt-suggestions-for-adding-custom-code-to-your-upcart-settings).