Skip to main content

Shopify移动端固定加购按钮及隐藏“立即购买”按钮

Last updated: Sep 15 2025

Shopify Mobile

warning

以下内容为早期教程，可能不适用于当前版本的 Shopify 主题。现在，您可以通过 Shopify 增强版主题 中的悬浮加购功能实现类似效果。

固定移动端加购按钮​

将以下 CSS 代码添加到您的主题样式文件中：

@media screen and (max-width: 450px){
    #your-button-id { /* 请将 #your-button-id 替换为您的加购按钮的实际ID */
        position: fixed;
        bottom: 0px;
        left: 0;
        z-index: 99;
        /* height: auto; */ /* 可选，根据需要设置高度 */
    }
}

点击加购按钮后隐藏​

将 onclick 事件添加到您的加购按钮的 HTML 中：

<button onclick="this.style.display = 'none'">添加到购物车</button>

隐藏“立即购买”按钮​

将以下 CSS 代码添加到您的主题样式文件中：

.shopify-payment-button {
  display: none;
}