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

# CSS で Upcart によってトリガーされるまでモバイルカートの幅をゼロに設定する

> CSS を使用して、Upcart によってトリガーされない限りモバイルカートの幅をゼロに設定し、よりすっきりとした洗練されたショッピング体験を実現する方法を学びます。

⚠️ **重要なお知らせ**

このカスタマイズは、Upcart のカートモジュールの Version 1 でのみ機能します。最近カートを Version 2 にアップグレードした場合、これらのカスタマイズは機能しない可能性があります。[移行ガイド](/ja/upcart/upcart_v20_migration_guide)で提供されている Version 2 用の新しいセレクターを使用する必要があります。

カスタマイズが期待どおりに機能しない場合は、自分でカートを Version 1 に戻すことができます: Cart Editor で、左側メニューの上部にある **Cart version** ドロップダウンを使用し、**V1.0 (Legacy)** を選択します。このドロップダウンは、カートのすべてのモジュールが V2 になると表示されます。

現在、モジュールの Version 2 用の新しいカスタマイズテンプレートを準備しており、まもなく利用可能になります。

<div id="introduction">
  # **はじめに**
</div>

この CSS チュートリアルへようこそ。ここでは、Upcart によってトリガーされない限り、モバイルカートの幅をゼロに設定する方法を紹介します。これは、顧客がカートを表示する準備ができるまでカートを非表示にし、モバイルのショッピング体験を効率化する便利な方法です。

このガイドは、基本的な CSS の知識を持つストアオーナーや開発者向けに設計されています。このカスタマイズを使用すると、カートを視界の外に置いてページレイアウトを改善し、気を散らす要素を減らして、顧客が買い物に集中できるようにします。ストアのモバイル体験に大きな違いをもたらす小さな調整です。

さっそく始めて、モバイルカートをよりスマートに機能させましょう!

<div id="accessing-custom-css-settings">
  ## **Custom CSS 設定へのアクセス**
</div>

Upcart の CSS のカスタマイズを始めるには、次の手順に従ってください:

1. ダッシュボード内で **Upcart アプリ**を開きます。
2. **Cart Editor** に移動します。
3. **Settings** を開き、**Custom CSS** タブ(タブの行に収まらない場合は **More settings** の中)を選択します。
4. 次に、コードをコピーして CSS 入力エリアに貼り付けます
5. 完了したら「Save をクリック」し、ストアフロントのページを更新して結果をライブで確認します。

<div id="here-is-the-css-code-to-copy-and-paste-into-the-css-section">
  ## CSS セクションにコピーして貼り付ける CSS コードはこちらです:
</div>

```
@media (max-width: 440px) {  
    .upcartPopupShow [class*="styles_CartPreview__right__"] {  
        width: 100%;  
        max-width: 440px;  
    }  
  
    [class*="styles_CartPreview__right__"] {  
        width: 0px;  
	max-width: 440px;  
    }  
}
```

<div id="conclusion">
  # **まとめ**
</div>

以上です! これで、Upcart によってトリガーされるまでモバイルカートの幅をゼロに変更し、よりすっきりとした、集中できるショッピング体験を作る方法を学びました。

<div id="support-for-customizations">
  ## 🚧 カスタマイズのサポートについて
</div>

Upcart のサポートチームは、カート内のカスタム CSS や HTML ソリューションの実装に関するサポートは提供できません。

カスタムのデザインやスタイリングのサポートが必要な場合は、Shopify エキスパートへの相談をおすすめします:

[Shopify エキスパートを見る](https://www.shopify.com/partners/directory)