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

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

***

<div id="final-result">
  ## 最終結果
</div>

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