> ## 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 CSS セレクターライブラリ(V1)

> この記事では、Upcart バージョン 1 で利用可能な CSS セレクターを紹介し、レガシーのカートドロワーにカスタムスタイルを適用できるようにします。

📝 **注**

V1 セレクターはレガシーのカートドロワーモジュールを対象としています。V2 にアップグレード済みの場合、このページのモジュールセレクターは一致しなくなります。最新のセレクターについては、[V2 CSS セレクターライブラリ](/ja/upcart/upcart_css_selector_library_v2)を参照してください。

例外として知っておくべきものが 2 つあります。`.upcart-cart` と `.upcart-cart-body` はモジュールではなくドロワーのシェルに付いているため、V2 でも引き続き適用されます。ドロワー全体を対象とするレイアウト修正(幅の制限、水平方向のオーバーフローの防止)は、アップグレード後も機能し続けます。

<div id="overview">
  # 概要
</div>

価格の非表示、テキストサイズの調整、ボタンの再配置など、カートの外観を変更したい場合は、ここから始めましょう。この CSS セレクターライブラリは、独自のカスタムコードでこうした変更を行うために必要なツールを提供します。

この記事では、利用可能なすべての CSS セレクターをグループごとにまとめ、スタイルの作成とテストに役立つリソースへのリンクも掲載しています。

<div id="note">
  ## **注**
</div>

このライブラリは便宜のために提供していますが、Upcart サポートチームは\*\*カスタムコードの作成や修正のお手伝いはできません。\*\*これは当社の[カスタマイズポリシー](/ja/upcart/upcart_customization_policy)の一部です。

カスタムコードのソリューションについては、Shopify エキスパートへの相談をおすすめします。

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

<div id="how-to-use-upcart-css-selectors">
  # Upcart CSS セレクターの使い方
</div>

この記事は、Upcart のカートドロワーのスタイリングやカスタマイズに使える **CSS セレクターのライブラリ**です。各セレクターは、ヘッダー、商品行、アップセル、リワードモジュールなど、カートの特定の部分を対象としています。

これらのセレクターを使用して、次のことができます:

* 要素の非表示や再スタイリング
* 余白、フォント、色の変更
* ストアのブランディングに合わせたレイアウトの調整

CSS を適用するには、カートエディターを開き、**Settings** に移動して **Custom CSS** タブを選択し、エディターにスタイルを貼り付けます。

<div id="what-to-know-before-adding-css">
  # CSS を追加する前に知っておくべきこと
</div>

カスタムスタイルの作成に取りかかる前に、スムーズに進めるためのヒントをいくつか紹介します。これらを参考にすると、変更のテストが容易になり、予期しない事態を避け、カートを壊すことなく望みどおりの見た目を実現できます。

<div id="css-customization-checklist">
  ## CSS カスタマイズのチェックリスト:
</div>

* **安全な環境でテストする:** 本番公開する前に、可能であればプレビューまたは未公開のテーマを使用してください。

* **小さく始める:** 一度に 1 つの変更を行うことで、何がうまくいったか(あるいはいかなかったか)を追跡しやすくなります。

* **正しい場所にスタイルを貼り付ける:** コードの追加には **Upcart Editor > Settings > Custom CSS** フィールドを使用してください。

* **検証ツールを使う:** ブラウザで要素を右クリックして**検証**を選択し、セレクターをその場で見つけてテストします。

* **思い込みを避ける:** すべての要素がすべてのカートに表示されるわけではありません。さまざまなカート(リワードあり/なし、アップセルあり/なしなど)でテストしてください。

<div id="css-selectors-library">
  # CSS セレクターライブラリ
</div>

以下は、Upcart で利用可能なすべての CSS セレクターの一覧です。カスタマイズしたい対象を見つけやすいように、**モジュール**ごと(ヘッダー、商品、アップセルなど)にグループ化しています。独自のスタイルを書くときのリファレンスとしてご活用ください。

<div id="general-settings">
  ## 一般設定
</div>

<div id="design-module">
  ### デザインモジュール
</div>

|                     |                       |
| ------------------- | --------------------- |
| **CSS セレクター**       | **説明**                |
| `.upcart-cart`      | カートドロワーのメインコンテナ。      |
| `.upcart-cart-body` | カートの主要コンテンツを保持します。    |
| `.upcart-backdrop`  | カートの背後に表示される暗いオーバーレイ。 |

<div id="header-module">
  ### ヘッダーモジュール
</div>

|                                    |                           |
| ---------------------------------- | ------------------------- |
| **CSS セレクター**                      | **説明**                    |
| `.upcart-header`                   | ロゴと閉じるボタンを含むカートヘッダーのコンテナ。 |
| `.upcart-header-close-button`      | カートドロワーを閉じるためのボタン。        |
| `.upcart-header-close-button-icon` | 閉じるボタン内に表示されるアイコン。        |
| `.upcart-header-logo`              | カートヘッダーにロゴ画像を表示します。       |
| `.upcart-header-text`              | カートヘッダーに表示されるタイトルテキスト。    |

<div id="body-settings">
  ## ボディ設定
</div>

<div id="announcements-module">
  ### アナウンスメントモジュール
</div>

|                                 |                           |
| ------------------------------- | ------------------------- |
| **CSS セレクター**                   | **説明**                    |
| `.upcart-announcement`          | カート内のバナーまたはアナウンスセクション。    |
| `.upcart-announcement-skeleton` | アナウンスセクションのスケルトンプレースホルダー。 |

<div id="rewards-module">
  ### リワードモジュール
</div>

|                                    |                         |
| ---------------------------------- | ----------------------- |
| **CSS セレクター**                      | **説明**                  |
| `.upcart-rewards`                  | リワードセクションのメインコンテナ。      |
| `.upcart-rewards-message`          | リワードに関連する進捗メッセージを表示します。 |
| `.upcart-rewards-bar-background`   | リワードプログレスバーの背景レイヤー。     |
| `.upcart-rewards-bar-foreground`   | リワードバーの前景/進捗の塗り部分。      |
| `.upcart-rewards-tier`             | リワードシステムの特定のティアを表します。   |
| `.upcart-rewards-tier-circle`      | リワードティアの視覚的な円形インジケーター。  |
| `.upcart-rewards-tier-icon`        | リワードティアの円内のアイコン。        |
| `.upcart-rewards-tier-description` | 各リワードティアの下の説明テキスト。      |
| `.upcart-rewards-skeleton`         | リワードセクションのスケルトンコンテナ。    |
| `.upcart-rewards-message-skeleton` | リワード進捗メッセージのスケルトン。      |
| `.upcart-rewards-bar-skeleton`     | リワードプログレスバーのスケルトン。      |

<div id="recommendations-module">
  ### レコメンデーションモジュール
</div>

|                                           |                           |
| ----------------------------------------- | ------------------------- |
| **CSS セレクター**                             | **説明**                    |
| `.upcart-recommendation-module`           | 商品レコメンデーションモジュール全体のラッパー。  |
| `.upcart-recommendations-title`           | レコメンデーションセクションのタイトルテキスト。  |
| `.upcart-recommendations-shop-now-button` | カートから直接おすすめ商品を購入するためのボタン。 |

<div id="subscription-upgrades-module">
  ### サブスクリプションアップグレードモジュール
</div>

|                                         |                                         |
| --------------------------------------- | --------------------------------------- |
| **CSS セレクター**                           | **説明**                                  |
| `.upcart-subscription-upgrade-section`  | カート内でサブスクリプションのアップグレードを促進するセクション。       |
| `.upcart-subscription-upgrade-button`   | サブスクリプションのアップグレードをトリガーするボタン。            |
| `.upcart-subscription-upgrade-dropdown` | 利用可能なサブスクリプションアップグレードオプションを選択するドロップダウン。 |

<div id="upsells-module">
  ### アップセルモジュール
</div>

|                                        |                         |
| -------------------------------------- | ----------------------- |
| **CSS セレクター**                          | **説明**                  |
| `.upcart-upsells`                      | アップセルセクションのメインコンテナ。     |
| `.upcart-upsells-module`               | アップセルモジュールのラッパー。        |
| `.upcart-upsells-title`                | アップセルセクションのタイトル。        |
| `.upcart-upsells-button`               | アップセル商品をカートに追加するボタン。    |
| `.upcart-upsell-item-card`             | 各アップセル商品のカードレイアウト。      |
| `.upcart-upsell-item-title`            | アップセル商品のタイトル。           |
| `.upcart-upsell-item-image-wrapper`    | アップセル商品画像のラッパー。         |
| `.upcart-upsell-item-image`            | アップセル商品の画像。             |
| `.upcart-upsell-item-price`            | アップセル商品の価格。             |
| `.upcart-upsell-item-price-row`        | 価格と比較価格を含む行。            |
| `.upcart-upsell-item-compare-price`    | アップセルの元の価格(取り消し線)。      |
| `.upcart-upsell-item-variant-selector` | アップセル商品のバリエーションドロップダウン。 |

<div id="product-settings">
  ### 商品設定
</div>

|                                      |                         |
| ------------------------------------ | ----------------------- |
| **CSS セレクター**                        | **説明**                  |
| `.upcart-products-section`           | カート内のすべての商品のコンテナ。       |
| `.upcart-product-item`               | 個々の商品アイテムのラッパー。         |
| `.upcart-product-title`              | カート内の商品名。               |
| `.upcart-product-title-link`         | 商品タイトルを囲むリンク。           |
| `.upcart-item-prices-row`            | 価格情報を含む行。               |
| `.upcart-item-price`                 | 顧客に表示される最終価格。           |
| `.upcart-item-compare-price`         | 元の価格(取り消し線)。            |
| `.upcart-product-savings`            | カートアイテムごとの節約額。          |
| `.upcart-item-option`                | サイズや色などの商品オプションのコンテナ。   |
| `.upcart-item-option-category`       | 商品オプションカテゴリのラベル。        |
| `.upcart-item-option-value`          | 選択された商品オプションの値。         |
| `.upcart-item-properties`            | 追加の商品メタデータのラッパー。        |
| `.upcart-item-property`              | 個々の商品プロパティ。             |
| `.upcart-item-property-subscription` | アイテムのサブスクリプション詳細を表示します。 |
| `.upcart-product-quantity-input`     | 商品の数量入力フィールド。           |
| `.upcart-product-quantity-minus`     | 数量を減らすボタン。              |
| `.upcart-product-quantity-plus`      | 数量を増やすボタン。              |
| `.upcart-product-image-wrapper`      | 商品画像のラッパー。              |
| `.upcart-quantity-warning`           | 数量制限メッセージのコンテナ。         |
| `.upcart-quantity-warning-text`      | ユーザーに表示される数量警告のテキスト。    |

<div id="footer-settings">
  ## フッター設定
</div>

<div id="add-ons-module">
  ### アドオンモジュール
</div>

|                                      |                      |
| ------------------------------------ | -------------------- |
| **CSS セレクター**                        | **説明**               |
| `.upcart-addons`                     | アドオンセクションのメインコンテナ。   |
| `.upcart-addons-title`               | アドオンセクションのタイトル。      |
| `.upcart-addons-product-description` | アドオン商品の説明。           |
| `.upcart-addons-price`               | アドオン商品の価格。           |
| `.upcart-addons-compare-price`       | アドオンの元の価格(取り消し線)。    |
| `.upcart-addons-toggle`              | アドオンを追加/削除するトグルスイッチ。 |
| `.upcart-addons-image-wrapper`       | アドオン画像のラッパー。         |

<div id="discount-codes-module">
  ### ディスカウントコードモジュール
</div>

<div id="savings-row">
  ### 節約額の行
</div>

|                                  |                                       |
| -------------------------------- | ------------------------------------- |
| **CSS セレクター**                    | **説明**                                |
| `.upcart-savings-row`            | カート内のディスカウント/節約額セクション全体のラッパー。         |
| `.styles_Footer__savingsCodes__` | ラベル(「Discounts」)と関連するディスカウントコードのコンテナ。 |
| `.upcart-discount-code-badge`    | UI に表示される各ディスカウントコードバッジのラッパー。         |
| `.upcart-discount-code-icon`     | ディスカウントアイコン(SVG のチケット記号など)のコンテナ。      |
| `.upcart-discount-code-text`     | ディスカウントコードのテキスト表現(例:「AUTO 5」)。        |
| `.upcart-savings-amount`         | ディスカウントによる実際の節約額を表示します。               |

<div id="express-payments-module">
  ### エクスプレス決済モジュール
</div>

<div id="note-2">
  ## 注
</div>

Upcart のエクスプレス決済ボタンは視覚的なコンテナとして機能し、その中のコンテンツと機能は完全に Shopify によって制御されています。そのため、その動作や外観を変更することはできません。詳細については、[**エクスプレス決済モジュール**](/ja/upcart/express_payments_module)ガイドを参照してください。

|                                         |                       |
| --------------------------------------- | --------------------- |
| **CSS セレクター**                           | **説明**                |
| `.upcart-express-pay-buttons-container` | すべてのエクスプレス決済ボタンのコンテナ。 |
| `.upcart-express-pay-buttons-row`       | エクスプレス決済ボタンの行レイアウト。   |
| `.upcart-express-pay-button`            | エクスプレス決済ボタンの汎用セレクター。  |
| `.upcart-express-pay-button-shop-pay`   | Shop Pay 専用のボタン。      |
| `.upcart-express-pay-button-google-pay` | Google Pay 専用のボタン。    |
| `.upcart-express-pay-button-paypal`     | PayPal 専用のボタン。        |
| `.upcart-express-pay-button-apple-pay`  | Apple Pay 専用のボタン。     |
| `.upcart-express-pay-button-amazon-pay` | Amazon Pay 専用のボタン。    |
| `.upcart-express-pay-button-meta-pay`   | Meta Pay 専用のボタン。      |

<div id="trust-badges-module">
  ### トラストバッジモジュール
</div>

|                             |                    |
| --------------------------- | ------------------ |
| **CSS セレクター**               | **説明**             |
| `.upcart-trust-badge`       | トラストバッジのコンテナ。      |
| `.upcart-trust-badge-image` | トラストバッジで使用される画像要素。 |

<div id="additional-notes-module">
  ### 追加メモモジュール
</div>

|                                                   |                          |
| ------------------------------------------------- | ------------------------ |
| **CSS セレクター**                                     | **説明**                   |
| `.NotesModule_NotesModule__`                      | 追加メモのコンテナ。               |
| `.NotesModule_NotesModule__titleContainer__`      | メモセクションのタイトルコンテナ         |
| `.NotesModule_NotesModule__dropdownContainer__`   | メモセクションのドロップダウンのタイトル     |
| `.NotesModule_NotesModule__textModule__ textarea` | カートにカスタムメモを追加するための入力エリア。 |

<div id="upcart-settings-module">
  ## Upcart 設定モジュール
</div>

<div id="skeleton-selectors">
  ### スケルトンセレクター
</div>

|                                                  |                        |
| ------------------------------------------------ | ---------------------- |
| **CSS セレクター**                                    | **説明**                 |
| `.upcart-skeleton`                               | カートの汎用スケルトンローダーラッパー。   |
| `.upcart-product-item-skeleton`                  | 商品の読み込み中のプレースホルダー。     |
| `.upcart-product-image-skeleton`                 | 商品画像のプレースホルダー。         |
| `.upcart-product-title-skeleton`                 | 商品タイトルテキストのプレースホルダー。   |
| `.upcart-product-price-container-skeleton`       | 価格エリアのプレースホルダー。        |
| `.upcart-product-quantity-skeleton`              | 数量コントロールのプレースホルダー。     |
| `.upcart-item-option-skeleton`                   | アイテムオプションのプレースホルダー。    |
| `.upcart-upsells-module-skeleton`                | アップセルモジュールのスケルトン。      |
| `.upcart-upsells-title-skeleton`                 | アップセルセクションタイトルのスケルトン。  |
| `.upcart-upsell-item-image-skeleton`             | アップセル商品画像のスケルトン。       |
| `.upcart-upsell-item-title-skeleton`             | アップセル商品タイトルのスケルトン。     |
| `.upcart-upsell-item-price-skeleton`             | アップセル商品価格のスケルトン。       |
| `.upcart-upsells-button-skeleton`                | アップセルアクションボタンのスケルトン。   |
| `.upcart-trust-badge-skeleton`                   | トラストバッジコンテナのスケルトン。     |
| `.upcart-trust-badge-image-skeleton`             | トラストバッジ画像のスケルトン。       |
| `.upcart-announcement-skeleton`                  | アナウンスのスケルトンプレースホルダー。   |
| `.upcart-rewards-skeleton`                       | リワードセクションのスケルトン。       |
| `.upcart-rewards-message-skeleton`               | リワードメッセージのスケルトン。       |
| `.upcart-rewards-bar-skeleton`                   | リワードプログレスバーのスケルトン。     |
| `.upcart-addons-skeleton`                        | アドオンセクションのスケルトン。       |
| `.upcart-addons-image-wrapper-skeleton`          | アドオン商品画像のスケルトン。        |
| `.upcart-addons-skeleton-text-container`         | アドオン内のテキストコンテンツのスケルトン。 |
| `.upcart-discount-code-module-skeleton`          | ディスカウントコードモジュールのスケルトン。 |
| `.upcart-discount-code-input-skeleton`           | ディスカウントコード入力欄のスケルトン。   |
| `.upcart-discount-code-button-skeleton`          | ディスカウントコード適用ボタンのスケルトン。 |
| `.upcart-checkout-button-container-skeleton`     | チェックアウトボタンラッパーのスケルトン。  |
| `.upcart-checkout-button-skeleton`               | チェックアウトボタンのスケルトン。      |
| `.upcart-express-pay-buttons-container-skeleton` | エクスプレス決済コンテナのスケルトン。    |
| `.upcart-express-pay-button-skeleton`            | 個々のエクスプレス決済ボタンのスケルトン。  |

<div id="helpful-resources-to-get-started">
  ## **はじめるのに役立つリソース:**
</div>

* **[カスタム CSS 入門](/ja/upcart/custom_css):** Upcart でカスタム CSS を安全に追加する方法を学びます。
* **[Upcart のカスタマイズ入門](/ja/upcart/getting_started_with_upcart_customizations):** カスタマイズの仕組みと、どこから始めるべきかを理解します。
* **[AI を使って Upcart 用のカスタムコードを書く](/ja/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings):** シンプルなプロンプトで CSS や JavaScript の作成を支援します。
* **[カートのコンバージョンを高めるベストプラクティス](/ja/upcart/best_practices_to_increase_upcart_conversions):** 実証済みのヒントでカートデザインを最適化します。