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

# サイトヘッダーが Upcart に重なる

> この記事では、カートを開いたときに Upcart ウィジェットがサイトヘッダーの後ろに隠れてしまう問題の解決方法を説明します。

<div id="why-this-happens">
  ### 発生する理由
</div>

一部の Shopify テーマでは、ヘッダーの **z-index** が Upcart よりも高く設定されているため、カートがヘッダーの下に表示されてしまいます。その結果、顧客がカートを開いたときに Upcart が一部隠れて見えたり、操作できなくなったりすることがあります。

***

<div id="how-to-fix">
  ## 解決方法
</div>

以下の手順に従って、Upcart をサイトヘッダーの前面に表示させます:

1. この記事の下部に記載されている**コードをコピー**します。
2. Shopify 管理画面で Upcart の **Cart Editor** を開き、**Settings** に移動して **Custom HTML** タブを選択します。Settings はタブが横に並んだ形になっています。Custom HTML が見当たらない場合は、**More settings** の中にあります。
3. **HTML ドロップダウン**をクリックし、**Scripts (Before Load)** を選択します。
4. フィールドに**コードを貼り付け**ます。
5. **Save changes** をクリックします。
6. **ストアフロントを再読み込み**して、カートをテストします。

これらの手順を完了すると、カートがサイトヘッダーの上に正しく表示されるはずです。

***

<div id="code-required">
  ## 必要なコード:
</div>

```
<script>  
	// Find UpCart  
	let upcart = document.querySelector("#upCart");  
  
	// Find the site's body  
	let body = document.body;  
	  
	// If we found both  
	if(upcart && body)  
			// Move upcart to the top of the body's children so it takes priority over site header  
	    body.firstChild.before(upcart)  
</script>
```