Panoramica

Se vuoi una prima impressione più pulita o il layout della tua homepage entra in conflitto con il pulsante sticky del carrello, puoi nascondere il pulsante specificamente nella homepage usando un semplice snippet di codice. Questa configurazione controlla la pagina corrente del cliente e rimuove il pulsante sticky del carrello se si trova nella homepage.

Quando usarla

Per evitare disordine visivo nella tua homepage
Quando usi una hero section o un layout personalizzato che si sovrappone al carrello sticky
Per mantenere il pulsante del carrello focalizzato sulle pagine prodotto o sulle collezioni

Passaggio 1: Aggiungi lo script

Vai su Upcart > Cart Editor > Settings > Custom HTML
Dal menu a tendina HTML Location, seleziona Scripts (Before Load)
Incolla il seguente 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>

Questo script controlla il percorso della pagina corrente e applica una classe per nascondere il pulsante sticky se il cliente si trova nella homepage.

Passaggio 2: Aggiungi CSS personalizzato

Vai su Upcart > Sticky Cart > Custom CSS (nota che questo è Sticky Cart, non Cart Editor)
Incolla il seguente CSS:

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

Risultato finale

Il pulsante sticky del carrello verrà nascosto quando un cliente visita la homepage (/ o /[locale])
Il pulsante resta visibile su tutte le altre pagine

Per iniziare

Moduli del carrello

Impostazioni del carrello

Pulsante carrello fisso

Multicart

Personalizzazioni

Analisi

Integrazioni e compatibilità

Fatturazione e account

Risoluzione dei problemi

Nascondere il pulsante sticky del carrello nella homepage

Panoramica

Quando usarla

Passaggio 1: Aggiungi lo script

Passaggio 2: Aggiungi CSS personalizzato

Risultato finale

​Panoramica

​Quando usarla

​Passaggio 1: Aggiungi lo script

​Passaggio 2: Aggiungi CSS personalizzato

​Risultato finale

Panoramica

Quando usarla

Passaggio 1: Aggiungi lo script

Passaggio 2: Aggiungi CSS personalizzato

Risultato finale