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

# Masquer le bouton de panier flottant sur la page d'accueil

> Cet article explique comment utiliser JavaScript et CSS pour masquer le bouton de panier flottant sur la page d'accueil de votre boutique.

<div id="overview">
  # Aperçu
</div>

Si vous souhaitez une première impression plus épurée ou si la mise en page de votre page d'accueil entre en conflit avec le bouton de panier flottant, vous pouvez masquer le bouton spécifiquement sur la page d'accueil à l'aide d'un simple extrait de code.

Cette configuration vérifie la page actuelle du client et supprime le bouton de panier flottant s'il se trouve sur la page d'accueil.

***

<div id="when-to-use-this">
  ## Quand l'utiliser
</div>

* Pour éviter l'encombrement visuel sur votre page d'accueil
* Lorsque vous utilisez une section « hero » ou une mise en page personnalisée qui chevauche le panier flottant
* Pour concentrer le bouton de panier sur les pages de produits ou de collections

***

<div id="step-1-add-the-script">
  ## Étape 1 : Ajouter le script
</div>

1. Allez dans **Upcart > Cart Editor > Settings > Custom HTML**
2. Dans le menu déroulant **HTML Location**, sélectionnez **Scripts (Before Load)**
3. Collez le JavaScript suivant :

```
<script>  
  var stickyCartButton = document.querySelector("#upCartStickyButton");  
  
  if (  
    stickyCartButton &&  
    (document.location.pathname === "/" + Shopify.locale ||  
     document.location.pathname === "/")  
  ) {  
    stickyCartButton.classList.add("hide-sticky-cart-button");  
  }  
</script>
```

Ce script vérifie le chemin de la page actuelle et applique une classe pour masquer le bouton flottant si le client se trouve sur la page d'accueil.

***

<div id="step-2-add-custom-css">
  ## Étape 2 : Ajouter le CSS personnalisé
</div>

1. Allez dans **Upcart > Sticky Cart > Custom CSS (notez qu'il s'agit de Sticky Cart, et non de Cart Editor)**
2. Collez le CSS suivant :

```
.hide-sticky-cart-button {     
  display: none;   
}
```

***

<div id="final-result">
  ## Résultat final
</div>

* Le bouton de panier flottant sera masqué lorsqu'un client visite la page d'accueil (`/` ou `/[locale]`)
* Le bouton reste visible sur toutes les autres pages