概要

第一印象をよりすっきりさせたい場合や、ホームページのレイアウトがスティッキーカートボタンと干渉する場合は、簡単なコードスニペットを使用して、ホームページ上でのみボタンを非表示にできます。このセットアップでは、お客様の現在のページを確認し、ホームページにいる場合はスティッキーカートボタンを削除します。

使いどころ

ホームページの視覚的なごちゃつきを避けたい場合
スティッキーカートと重なるカスタムのヒーローセクションやレイアウトを使用している場合
カートボタンを商品ページやコレクションに集中させたい場合

ステップ 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（Cart Editor ではなく Sticky Cart であることに注意してください）**に移動します
以下の CSS を貼り付けます：

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

最終結果

お客様がホームページ（/ または /[locale]）にアクセスすると、スティッキーカートボタンは非表示になります
その他すべてのページでは、ボタンは表示されたままです

はじめに

カートモジュール

カート設定

スティッキーカートボタン

Multicart

カスタマイズ

アナリティクス

連携と互換性

請求とアカウント

トラブルシューティング

ホームページでスティッキーカートボタンを非表示にする

概要

使いどころ

ステップ 1：スクリプトを追加する

ステップ 2：カスタム CSS を追加する

最終結果

​概要

​使いどころ

​ステップ 1：スクリプトを追加する

​ステップ 2：カスタム CSS を追加する

​最終結果

概要

使いどころ

ステップ 1：スクリプトを追加する

ステップ 2：カスタム CSS を追加する

最終結果