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

# Die Sticky-Cart-Schaltfläche auf der Startseite ausblenden

> Dieser Artikel erklärt, wie du mit JavaScript und CSS die schwebende Warenkorb-Schaltfläche auf der Startseite deines Shops ausblendest.

<div id="overview">
  # Übersicht
</div>

Wenn du einen aufgeräumteren ersten Eindruck möchtest oder das Layout deiner Startseite mit der Sticky-Cart-Schaltfläche in Konflikt gerät, kannst du die Schaltfläche gezielt auf der Startseite mit einem einfachen Code-Snippet ausblenden.

Diese Einrichtung prüft die aktuelle Seite der Kundin oder des Kunden und entfernt die Sticky-Cart-Schaltfläche, wenn sie sich auf der Startseite befinden.

***

<div id="when-to-use-this">
  ## Wann du das verwenden solltest
</div>

* Um visuelle Überladung auf deiner Startseite zu vermeiden
* Wenn du einen benutzerdefinierten Hero-Bereich oder ein Layout verwendest, das sich mit dem Sticky Cart überschneidet
* Um die Warenkorb-Schaltfläche auf Produktseiten oder Kollektionen zu fokussieren

***

<div id="step-1-add-the-script">
  ## Schritt 1: Füge das Skript hinzu
</div>

1. Gehe zu **Upcart > Cart Editor > Settings > Custom HTML**
2. Wähle im Dropdown **HTML Location** die Option **Scripts (Before Load)**
3. Füge das folgende JavaScript ein:

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

Dieses Skript prüft den Pfad der aktuellen Seite und wendet eine Klasse an, die die Sticky-Schaltfläche ausblendet, wenn sich die Kundin oder der Kunde auf der Startseite befindet.

***

<div id="step-2-add-custom-css">
  ## Schritt 2: Füge benutzerdefiniertes CSS hinzu
</div>

1. Gehe zu **Upcart > Sticky Cart > Custom CSS (beachte, dass dies Sticky Cart ist, nicht Cart Editor)**
2. Füge das folgende CSS ein:

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

***

<div id="final-result">
  ## Endergebnis
</div>

* Die Sticky-Cart-Schaltfläche wird ausgeblendet, wenn eine Kundin oder ein Kunde die Startseite besucht (`/` oder `/[locale]`)
* Auf allen anderen Seiten bleibt die Schaltfläche sichtbar