Aperçu

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.

Quand l’utiliser

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

Étape 1 : Ajouter le script

Allez dans Upcart > Cart Editor > Settings > Custom HTML
Dans le menu déroulant HTML Location, sélectionnez Scripts (Before Load)
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.

Étape 2 : Ajouter le CSS personnalisé

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

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

Résultat final

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

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

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

Aperçu

Quand l’utiliser

Étape 1 : Ajouter le script

Étape 2 : Ajouter le CSS personnalisé

Résultat final

​Aperçu

​Quand l’utiliser

​Étape 1 : Ajouter le script

​Étape 2 : Ajouter le CSS personnalisé

​Résultat final

Aperçu

Quand l’utiliser

Étape 1 : Ajouter le script

Étape 2 : Ajouter le CSS personnalisé

Résultat final