> ## 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 が常に開いたままになっている原因を特定するためのトラブルシューティング手順を説明します。

Upcart でカートドロワーが表示されたままになる問題（画面の左側に表示される、またはストアのインターフェースの右側や下に表示されるなど）が発生している場合、翻訳アプリを使用しているかどうかに応じて、2 つの原因が考えられます。

<div id="the-cart-appears-on-the-right-side-or-overlays-the-product-page-interface">
  # カートが右側に表示される、または商品ページのインターフェースに重なって表示される。
</div>

この問題は通常、デスクトップでは次のように表示されます（右側にハイライト表示）。

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/always-open-storefront-product-cart-drawer.gif?s=de0cfb039a5110314e2bcc670570edce" alt="Upcart のカートドロワーが開いたまま右側に重なって表示されているストアフロントの商品ページ" width="1108" height="1080" data-path="images/upcart/always-open-storefront-product-cart-drawer.gif" />

この問題を解決するには、Upcart の HTML 設定に短いスクリプトを挿入する必要があります。

以下の手順に従ってください。

1. Shopify 管理画面で、**Upcart > Cart Editor > Settings** に移動します
2. Custom HTML の下で、**Select HTML Location ドロップダウン > Scripts (Before load)** を選択します <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/always-open-custom-html-location-dropdown.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=5fecf8bcf00491e70d62ced4d76a10d8" alt="Upcart の Custom HTML ロケーションドロップダウンで、下部の Scripts Before Load がハイライトされている" width="1099" height="766" data-path="images/upcart/always-open-custom-html-location-dropdown.png" />
3. 次のコードをコピーして貼り付けます。
   ```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   <script>  
       window.onload = () => {  
           const upcartHTML = document.getElementById("upCart");  
           document.body.append(upcartHTML);  
       }  
   </script>
   ```
   Upcart のカスタム HTML 設定は次のようになります。 <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/always-open-custom-html-editor-scripts.gif?s=90eee20f5741281f86afa26f06acbad0" alt="Upcart の Custom HTML エディターを Scripts Before Load に設定し、window.onload の append スクリプトを貼り付けた状態" width="2748" height="1080" data-path="images/upcart/always-open-custom-html-editor-scripts.gif" />
4. 上部までスクロールして **Save** をクリックします。Upcart の変更を保存してから反映されるまでに最大 1 分ほどかかります。

<div id="why-does-this-happen">
  ### なぜこれが起こるのか？
</div>

Upcart の読み込み時には、ストアページの右側の画面外に配置されることを想定しています。しかし、特定のストアテーマやサードパーティの Shopify アプリが、Upcart の配置を含むページレイアウトを変更してしまうことがあります。その結果、Upcart が異なる位置で読み込まれ、常に表示されてしまうという表示上の不具合が発生します。上記のコード変更を実装すると Upcart の位置が修正され、本来の挙動に戻ります。

<div id="additional-steps">
  ## **追加の手順**
</div>

Upcart によるページ読み込み時にちらつきが発生する場合は、カートドロワーを非表示にする CSS の変更を試すこともできます。ただし、**これはプレビューページでも Upcart が非表示になる**点にご注意ください。

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.upcartPopupShow [class*="styles_CartPreview__right__"] {  
    width: 100%;  
    max-width: 440px;  
}  
  
[class*="styles_CartPreview__right__"] {  
    width: 0px;  
    max-width: 440px;  
}
```

エディターは **Settings** の **Custom CSS** タブにあります（タブ行に収まらない場合は **More settings** の中にあります）。上記のコードをそこに貼り付けてください。

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/always-open-custom-css-editor-rules.gif?s=a982b2ed16933ade7b8b47d2e1671fcc" alt="CartPreview の右パネルの幅を設定してドロワーを非表示にするルールが入力された Upcart の Custom CSS エディター" width="2552" height="1080" data-path="images/upcart/always-open-custom-css-editor-rules.gif" />

<div id="cart-is-stuck-on-the-left">
  # カートが左側に固定されている
</div>

これは通常、英語のままにしておくべき Upcart の設定を翻訳アプリが翻訳してしまうことが原因です。

Upcart は、特定の設定を英単語として Shopify のメタフィールドに保存しています。たとえば、カートの位置設定は「right」または「left」として保存されます。翻訳アプリが「right」をフランス語の「droite」に変更してしまうと、Upcart はその指示を理解できず、画面の左上をデフォルト位置として常に開いたままになります。

**すべてのメタフィールドを翻訳すべきではありません**

Upcart のメタフィールドには 2 種類あります。

* ボタンラベルやリワードメッセージなどの**テキストフィールド**は翻訳しても安全です
* カートの位置やアップセルの方向などの**挙動設定**は英語のままにする必要があります

挙動設定を翻訳すると、Upcart が正常に動作しなくなります。

**解決方法**

1. 翻訳アプリを開き、**ストアメタデータ**または**メタフィールド**のセクションを見つけます
2. Upcart のメタフィールドを確認し、`cartPosition` や `upsellsDirection` などの挙動関連フィールドの翻訳を削除します
3. ストアフロントを更新すると、カートが正しい位置に戻るはずです

**注:** Upcart には現在、翻訳機能が組み込まれており、この問題を完全に回避できます。まだ翻訳を設定していない場合は、そちらの使用をおすすめします。詳細は[カートの翻訳](/ja/upcart/cart_translations)をご覧ください。
