> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Este artículo explica cómo usar JavaScript y CSS para ocultar el botón flotante del carrito en la página de inicio de tu tienda.

<div id="overview">
  # Resumen
</div>

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.

***

<div id="when-to-use-this">
  ## Cuándo usar esto
</div>

* 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

***

<div id="step-1-add-the-script">
  ## Paso 1: Añade el script
</div>

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

***

<div id="step-2-add-custom-css">
  ## Paso 2: Añade CSS personalizado
</div>

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

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

***

<div id="final-result">
  ## Resultado final
</div>

* 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