> ## 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.

# 在主页上隐藏悬浮购物车按钮

> 本文介绍如何使用 JavaScript 和 CSS 在商店主页上隐藏浮动购物车按钮。

<div id="overview">
  # 概述
</div>

如果你想营造更简洁的第一印象，或者主页布局与悬浮购物车按钮存在冲突，可以使用一段简单的代码片段专门在主页上隐藏该按钮。

此设置会检查顾客当前所在的页面，如果他们在主页上，则移除悬浮购物车按钮。

***

<div id="when-to-use-this">
  ## 何时使用
</div>

* 避免主页上的视觉杂乱
* 当使用与悬浮购物车重叠的自定义主视觉区域或布局时
* 让购物车按钮聚焦于商品页面或系列页面

***

<div id="step-1-add-the-script">
  ## 第 1 步：添加脚本
</div>

1. 前往 **Upcart > Cart Editor > Settings > Custom HTML**
2. 从 **HTML Location** 下拉菜单中选择 **Scripts (Before Load)**
3. 粘贴以下 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>
```

此脚本会检查当前页面的路径，如果顾客在主页上，则应用一个类来隐藏悬浮按钮。

***

<div id="step-2-add-custom-css">
  ## 第 2 步：添加自定义 CSS
</div>

1. 前往 **Upcart > Sticky Cart > Custom CSS（注意这是 Sticky Cart，而不是 Cart Editor）**
2. 粘贴以下 CSS：

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

***

<div id="final-result">
  ## 最终效果
</div>

* 当顾客访问主页（`/` 或 `/[locale]`）时，悬浮购物车按钮将被隐藏
* 该按钮在所有其他页面上保持可见