Resumen

Si quieres una primera impresión más limpia o el diseño de tu página de inicio entra en conflicto con el botón fijo del carrito, puedes ocultar el botón específicamente en la página de inicio usando un fragmento de código sencillo. Esta configuración comprueba la página actual del cliente y elimina el botón fijo del carrito si está en la página de inicio.

Cuándo usar esto

Para evitar el desorden visual en tu página de inicio
Cuando usas una sección hero o un diseño personalizado que se superpone con el carrito fijo
Para mantener el botón del carrito enfocado en las páginas de producto o colecciones

Paso 1: Añade el script

Ve a Upcart > Cart Editor > Settings > Custom HTML
En el menú desplegable HTML Location, selecciona Scripts (Before Load)
Pega el siguiente 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>

Este script comprueba la ruta de la página actual y aplica una clase para ocultar el botón fijo si el cliente está en la página de inicio.

Paso 2: Añade CSS personalizado

Ve a Upcart > Sticky Cart > Custom CSS (ten en cuenta que esto es Sticky Cart, no Cart Editor)
Pega el siguiente CSS:

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

Resultado final

El botón fijo del carrito se ocultará cuando un cliente visite la página de inicio (/ o /[locale])
El botón permanece visible en todas las demás páginas

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Ocultar el botón fijo del carrito en la página de inicio

Resumen

Cuándo usar esto

Paso 1: Añade el script

Paso 2: Añade CSS personalizado

Resultado final

​Resumen

​Cuándo usar esto

​Paso 1: Añade el script

​Paso 2: Añade CSS personalizado

​Resultado final

Resumen

Cuándo usar esto

Paso 1: Añade el script

Paso 2: Añade CSS personalizado

Resultado final