Overzicht

Als je een strakkere eerste indruk wilt of als je homepage-lay-out botst met de sticky cart-knop, kun je de knop specifiek op de homepage verbergen met een eenvoudig codefragment. Deze opzet controleert op welke pagina de klant zich bevindt en verwijdert de sticky cart-knop als die op de homepage is.

Wanneer gebruik je dit

Om visuele rommel op je homepage te voorkomen
Bij gebruik van een aangepaste hero-sectie of lay-out die overlapt met de sticky cart
Om de cart-knop te richten op productpagina’s of collecties

Stap 1: Voeg het script toe

Ga naar Upcart > Cart Editor > Settings > Custom HTML
Selecteer in de dropdown HTML Location de optie Scripts (Before Load)
Plak de volgende JavaScript:

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

Dit script controleert het pad van de huidige pagina en past een class toe om de sticky knop te verbergen als de klant op de homepage is.

Stap 2: Voeg aangepaste CSS toe

Ga naar Upcart > Sticky Cart > Custom CSS (let op: dit is Sticky Cart, niet Cart Editor)
Plak de volgende CSS:

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

Eindresultaat

De sticky cart-knop wordt verborgen wanneer een klant de homepage bezoekt (/ of /[locale])
De knop blijft zichtbaar op alle andere pagina’s

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

De sticky cart-knop op de homepage verbergen

Overzicht

Wanneer gebruik je dit

Stap 1: Voeg het script toe

Stap 2: Voeg aangepaste CSS toe

Eindresultaat

​Overzicht

​Wanneer gebruik je dit

​Stap 1: Voeg het script toe

​Stap 2: Voeg aangepaste CSS toe

​Eindresultaat

Overzicht

Wanneer gebruik je dit

Stap 1: Voeg het script toe

Stap 2: Voeg aangepaste CSS toe

Eindresultaat