Übersicht

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.

Wann du das verwenden solltest

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

Schritt 1: Füge das Skript hinzu

Gehe zu Upcart > Cart Editor > Settings > Custom HTML
Wähle im Dropdown HTML Location die Option Scripts (Before Load)
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.

Schritt 2: Füge benutzerdefiniertes CSS hinzu

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

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

Endergebnis

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

Erste Schritte

Warenkorb-Module

Warenkorb-Einstellungen

Sticky-Warenkorb-Button

Multicart

Anpassungen

Analytics

Integrationen & Kompatibilität

Abrechnung & Konto

Fehlerbehebung

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

Übersicht

Wann du das verwenden solltest

Schritt 1: Füge das Skript hinzu

Schritt 2: Füge benutzerdefiniertes CSS hinzu

Endergebnis

​Übersicht

​Wann du das verwenden solltest

​Schritt 1: Füge das Skript hinzu

​Schritt 2: Füge benutzerdefiniertes CSS hinzu

​Endergebnis

Übersicht

Wann du das verwenden solltest

Schritt 1: Füge das Skript hinzu

Schritt 2: Füge benutzerdefiniertes CSS hinzu

Endergebnis