サイトヘッダーが Upcart に重なる - Aftersell & Upcart Docs

発生する理由

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

解決方法

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

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

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

必要なコード:

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

⌘I