概述

如果你想营造更简洁的第一印象，或者主页布局与悬浮购物车按钮存在冲突，可以使用一段简单的代码片段专门在主页上隐藏该按钮。此设置会检查顾客当前所在的页面，如果他们在主页上，则移除悬浮购物车按钮。

何时使用

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

第 1 步：添加脚本

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

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

第 2 步：添加自定义 CSS

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

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

最终效果

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

开始使用

购物车模块

购物车设置

固定购物车按钮

Multicart

自定义

分析

集成与兼容性

计费与账户

故障排除

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

概述

何时使用

第 1 步：添加脚本

第 2 步：添加自定义 CSS

最终效果

​概述

​何时使用

​第 1 步：添加脚本

​第 2 步：添加自定义 CSS

​最终效果

概述

何时使用

第 1 步：添加脚本

第 2 步：添加自定义 CSS

最终效果