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

> この記事では、Upcart バージョン 2 で利用可能な CSS セレクターを紹介します。更新されたカートドロワーとモジュール構造のカスタムスタイリングをサポートするように設計されています。

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

これらのセレクターは、Upcart カートモジュールの**バージョン 2(V2)のみ**に適用されます。\*\*バージョン 1(V1)\*\*を使用している場合、これらのセレクターは機能しません。

V1 のカートについては、レガシーのモジュール構造とセレクターを扱う \*\*[バージョン 1 CSS セレクターのドキュメント](/ja/upcart/upcart_css_selector_library_v1)\*\*を参照してください。

使用中のバージョンを確認するには、カートエディターを開き、左側メニューの上部を確認します。カート内のすべてのモジュールが V2 になると、そこに **Cart version** ドロップダウンが表示されます。表示されない場合、カートにはまだ V1 モジュールが含まれています。V1 から V2 への移行の詳細については、[V2.0 移行ガイド](/ja/upcart/upcart_v20_migration_guide)を参照してください。

<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** フィールドを使用してください。

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

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

以下のセレクターは、Upcart カートモジュールのバージョン 2 で機能します。V2 では、**public** と **internal** のクラスプレフィックスによる構造化された命名システムが導入されています。

<div id="important-guidelines-for-v2-selectors">
  ## **V2 セレクターに関する重要なガイドライン**
</div>

⚠️ **カスタマイズには public セレクターのみを使用してください**

* **Public セレクター**(プレフィックスが `upcart-public-`)は安定した API の一部であり、カスタムスタイリングに安全に使用できます
* **Internal セレクター**(プレフィックスが `upcart-internal-`)は内部使用のために予約されており、予告なく変更される可能性があります

✅ **推奨:** スタイリングには public クラス名を使用する

```
/* ✅ Correct usage */   
.upcart-public-header {     
    font-size: 18px;     
    font-weight: bold;   
}
```

❌ **非推奨:** internal クラス名の上書きや、深い階層のセレクターの使用

```
/* ❌ Avoid this */   
.upcart-internal-header {     
    font-size: 18px;     
    font-weight: bold;   
}    
  
/* ❌ Avoid this */   
.upcart-public-upsell div a {     
   font-size: 18px;     
   font-weight: bold;   
}
```

#

<div id="css-selectors">
  # CSS セレクター
</div>

<div id="general-components">
  ### **汎用コンポーネント**
</div>

|                                                          |                             |
| -------------------------------------------------------- | --------------------------- |
| **CSS セレクター**                                            | **説明**                      |
| `.upcart-public-skeleton`                                | カートの汎用スケルトンローダーラッパー。        |
| `.upcart-public-component__button`                       | モジュール全体で使用される汎用ボタンコンポーネント。  |
| `.upcart-public-component-loader`                        | 読み込み中のスピナーコンポーネント。          |
| `.upcart-public-component-tag`                           | タグコンポーネントのラッパー。             |
| `.upcart-public-component-tag__icon`                     | タグ内のアイコン。                   |
| `.upcart-public-component-tag__text`                     | タグのテキストコンテンツ。               |
| `.upcart-public-component-tag__remove-button`            | 削除可能なタグ内の削除(「x」)ボタン。        |
| `.upcart-public-component-collapse__dropdown-container`  | 折りたたみ可能なドロップダウンセクションのコンテナ。  |
| `.upcart-public-component-collapse__expand-icon`         | 展開/折りたたみ状態を示すアイコン。          |
| `.upcart-public-component-carousel__container`           | カルーセルの外側のラッパー。              |
| `.upcart-public-component-carousel__window`              | スライドがスクロールするクリッピングウィンドウ。    |
| `.upcart-public-component-carousel__track`               | スライドを保持する可動トラック。            |
| `.upcart-public-component-carousel__slide`               | 単一のカルーセルスライド。               |
| `.upcart-public-component-carousel__button`              | 前へ/次へ矢印ボタン。                 |
| `.upcart-public-component-progress-bar`                  | プレーン(非分割)プログレスバーコンポーネント。    |
| `.upcart-public-component-progress-bar__track`           | プレーンプログレスバーのトラック。           |
| `.upcart-public-component-progress-bar__fill`            | プレーンプログレスバーの塗りつぶし部分。        |
| `.upcart-public-component-progress-bar__milestone`       | プレーンプログレスバー上のマイルストーンマーカー。   |
| `.upcart-public-component-progress-bar__milestone-icon`  | プレーンプログレスバーのマイルストーンにあるアイコン。 |
| `.upcart-public-component-progress-bar__milestone-label` | プレーンプログレスバーのマイルストーンにあるラベル。  |

#

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

|                                            |                    |
| ------------------------------------------ | ------------------ |
| **CSS セレクター**                              | **説明**             |
| `.upcart-public-header`                    | カートヘッダーのメインコンテナ。   |
| `.upcart-public-header__logo`              | カートヘッダーのロゴ画像。      |
| `.upcart-public-header__close-button`      | カートドロワーを閉じるためのボタン。 |
| `.upcart-public-header__close-button-icon` | 閉じるボタン内に表示されるアイコン。 |

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

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

<div id="recommendation-and-upsell-modules">
  ### **レコメンデーションおよびアップセルモジュール**
</div>

|                                                          |                              |
| -------------------------------------------------------- | ---------------------------- |
| **CSS セレクター**                                            | **説明**                       |
| `.upcart-public-upsell`                                  | アップセルモジュールのメインラッパー。          |
| `.upcart-public-upsell__header`                          | アップセルセクションのヘッダー。             |
| `.upcart-public-upsell__title`                           | アップセルセクションのタイトルテキスト。         |
| `.upcart-public-upsell__shop-now-button`                 | アップセルアイテムの Shop Now ボタン。     |
| `.upcart-public-upsell__vertical-layout-wrapper`         | 縦型アップセルレイアウトのラッパー。           |
| `.upcart-public-component-upsell-tile`                   | 各アップセル/レコメンデーション商品のカードレイアウト。 |
| `.upcart-public-component-upsell-tile__image-container`  | アップセル商品画像のコンテナ。              |
| `.upcart-public-component-upsell-tile__image`            | アップセル商品の画像。                  |
| `.upcart-public-component-upsell-tile__info`             | アップセルタイルの情報セクション。            |
| `.upcart-public-component-upsell-tile__title-link`       | 商品タイトルのリンクラッパー。              |
| `.upcart-public-component-upsell-tile__title`            | アップセル商品のタイトル。                |
| `.upcart-public-component-upsell-tile__rating-row`       | 商品評価を含む行。                    |
| `.upcart-public-component-upsell-tile__stars`            | 星評価の表示。                      |
| `.upcart-public-component-upsell-tile__star--partial`    | 小数点評価用の部分的な星。                |
| `.upcart-public-component-upsell-tile__reviews`          | レビュー数の表示。                    |
| `.upcart-public-component-upsell-tile__price-row`        | 価格情報を含む行。                    |
| `.upcart-public-component-upsell-tile__price-compare-at` | アップセルの元の価格(取り消し線)。           |
| `.upcart-public-component-upsell-tile__price`            | アップセルアイテムの現在の価格。             |
| `.upcart-public-component-upsell-tile__variant-row`      | バリエーション選択を含む行。               |
| `.upcart-public-upsell__skeleton`                        | アップセルモジュールのスケルトンプレースホルダー。    |
| `.upcart-public-upsell__skeleton-title`                  | アップセルセクションタイトルのスケルトン。        |
| `.upcart-public-upsell__skeleton-image`                  | アップセル商品画像のスケルトン。             |
| `.upcart-public-upsell__skeleton-product-title`          | アップセル商品タイトルのスケルトン。           |
| `.upcart-public-upsell__skeleton-product-price`          | アップセル商品価格のスケルトン。             |

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

|                                        |                              |
| -------------------------------------- | ---------------------------- |
| **CSS セレクター**                          | **説明**                       |
| `.upcart-public-notes`                 | メモセクションのメインコンテナ。             |
| `.upcart-public-notes__text-container` | メモのテキストエリアのコンテナ。             |
| `.upcart-public-notes__textarea`       | カートにカスタムメモを追加するためのテキスト入力エリア。 |

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

|                                                 |                                |
| ----------------------------------------------- | ------------------------------ |
| **CSS セレクター**                                   | **説明**                         |
| `.upcart-public-discount-code`                  | ディスカウントコードセクションのメインコンテナ。       |
| `.upcart-public-discount-code__form`            | ディスカウントコード入力のフォームラッパー。         |
| `.upcart-public-discount-code__input-wrapper`   | ディスカウントコード入力フィールドのラッパー。        |
| `.upcart-public-discount-code__input`           | ディスカウントコードを入力するための入力フィールド。     |
| `.upcart-public-discount-code__suffix`          | 入力フィールドのサフィックス要素。              |
| `.upcart-public-discount-code__error`           | 無効なコードのエラーメッセージ表示。             |
| `.upcart-public-discount-code__button`          | ディスカウントコードを適用するボタン。            |
| `.upcart-public-discount-code__skeleton`        | ディスカウントコードモジュールのスケルトンプレースホルダー。 |
| `.upcart-public-discount-code__skeleton-input`  | ディスカウントコード入力フィールドのスケルトン。       |
| `.upcart-public-discount-code__skeleton-button` | ディスカウントコード適用ボタンのスケルトン。         |

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

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

<div id="tiered-rewards-module">
  ### **階層型リワードモジュール**
</div>

|                                                                                  |                         |
| -------------------------------------------------------------------------------- | ----------------------- |
| **CSS セレクター**                                                                    | **説明**                  |
| `.upcart-public-rewards`                                                         | リワードセクションのメインコンテナ。      |
| `.upcart-public-rewards__message`                                                | リワードに関連する進捗メッセージを表示します。 |
| `.upcart-public-rewards__bar`                                                    | リワードプログレスバーのコンテナ。       |
| `.upcart-public-component-segmented-progress-bar`                                | 分割型プログレスバーコンポーネント。      |
| `.upcart-public-component-segmented-progress-bar__segments-container`            | すべてのプログレスバーセグメントのコンテナ。  |
| `.upcart-public-component-segmented-progress-bar__segment`                       | プログレスバーの個々のセグメント。       |
| `.upcart-public-component-segmented-progress-bar__segment-fill`                  | プログレスバーセグメントの塗りつぶし部分。   |
| `.upcart-public-component-segmented-progress-bar__milestone`                     | プログレスバー上のマイルストーンマーカー。   |
| `.upcart-public-component-segmented-progress-bar__milestone--bottom`             | 下部に配置されたマイルストーン。        |
| `.upcart-public-component-segmented-progress-bar__milestone--top`                | 上部に配置されたマイルストーン。        |
| `.upcart-public-component-segmented-progress-bar__milestone--middle`             | 中央に配置されたマイルストーン。        |
| `.upcart-public-component-segmented-progress-bar__milestone-icon`                | マイルストーンに表示されるアイコン。      |
| `.upcart-public-component-segmented-progress-bar__milestone-label`               | マイルストーンのラベルテキスト。        |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-right`  | 右揃えのマイルストーンラベル。         |
| `.upcart-public-component-segmented-progress-bar__milestone-label--align-center` | 中央揃えのマイルストーンラベル。        |
| `.upcart-public-rewards__skeleton`                                               | リワードセクションのスケルトンコンテナ。    |
| `.upcart-public-rewards__skeleton-message`                                       | リワード進捗メッセージのスケルトン。      |
| `.upcart-public-rewards__skeleton-bar`                                           | リワードプログレスバーのスケルトン。      |

<div id="cart-items-module">
  ### **カートアイテムモジュール**
</div>

|                                                                   |                           |
| ----------------------------------------------------------------- | ------------------------- |
| **CSS セレクター**                                                     | **説明**                    |
| `.upcart-public-cart-items`                                       | カートアイテム一覧のメインラッパー。        |
| `.upcart-public-cart-item`                                        | 個々のカートアイテムのラッパー。          |
| `.upcart-public-cart-items-skeleton__content`                     | カートアイテムのスケルトンローダー。        |
| `.upcart-public-component-product-tile`                           | カート内の個々の商品アイテムのラッパー。      |
| `.upcart-public-component-product-tile__content`                  | 商品タイルのコンテンツエリア。           |
| `.upcart-public-component-product-tile__image-wrapper`            | 商品画像のラッパー。                |
| `.upcart-public-component-product-tile__image`                    | カート内の商品の画像。               |
| `.upcart-public-component-product-tile__info`                     | 商品タイルの情報セクション。            |
| `.upcart-public-component-product-tile__header`                   | 商品タイルのヘッダーセクション。          |
| `.upcart-public-component-product-tile__product-title`            | カート内の商品名。                 |
| `.upcart-public-component-product-tile__title-link`               | 商品タイトルを囲むリンク。             |
| `.upcart-public-component-product-tile__remove-button`            | 商品をカートから削除するボタン。          |
| `.upcart-public-component-product-tile__variant`                  | バリエーション情報の表示。             |
| `.upcart-public-component-product-tile__properties`               | 追加の商品メタデータのラッパー。          |
| `.upcart-public-component-product-tile__bundle`                   | バンドル情報セクション。              |
| `.upcart-public-component-product-tile__product-pricing`          | 商品タイルの価格セクション。            |
| `.upcart-public-component-product-tile__price-compare-at`         | 元の価格(取り消し線)。              |
| `.upcart-public-component-product-tile__price`                    | 顧客に表示される最終価格。             |
| `.upcart-public-component-product-tile__price-group`              | 価格と比較価格を囲むラッパー。           |
| `.upcart-public-component-product-tile__savings`                  | カートアイテムごとの節約額。            |
| `.upcart-public-component-product-tile__controls`                 | コントロールセクション(数量など)。        |
| `.upcart-public-component-product-tile__quantity-selector`        | 数量セレクターのラッパー。             |
| `.upcart-public-component-product-tile__quantity-minus`           | 数量を減らすボタン。                |
| `.upcart-public-component-product-tile__quantity-plus`            | 数量を増やすボタン。                |
| `.upcart-public-component-product-tile__discount-codes`           | アイテムに適用されたディスカウントコード。     |
| `.upcart-public-component-product-tile__subscription-upgrade`     | サブスクリプションアップグレードセクション。    |
| `.upcart-public-component-product-tile__subscription-upgrade-btn` | サブスクリプションアップグレードを適用するボタン。 |
| `.upcart-public-component-product-tile__select-wrapper`           | 選択ドロップダウンのラッパー。           |
| `.upcart-public-component-product-tile__select`                   | 選択ドロップダウン要素。              |
| `.upcart-public-product-properties__subscription`                 | アイテムのサブスクリプション詳細を表示します。   |
| `.upcart-public-product-properties__item`                         | 個々の商品プロパティ。               |
| `.upcart-public-product-properties__link`                         | 商品プロパティ内のリンク。             |
| `.upcart-public-cart-items__key-value-pair`                       | アイテムプロパティのキーと値のペア表示。      |
| `.upcart-public-bundle-properties`                                | バンドルプロパティのコンテナ。           |
| `.upcart-public-bundle-properties__variant-title`                 | バンドルアイテムのバリエーションタイトル。     |
| `.upcart-public-bundle-properties__header`                        | バンドルプロパティセクションのヘッダー。      |
| `.upcart-public-bundle-properties__item-components`               | バンドルアイテムコンポーネントのコンテナ。     |
| `.upcart-public-bundle-properties__item-component-row`            | 各バンドルアイテムコンポーネントの行。       |
| `.upcart-public-bundle-properties__image-wrapper`                 | バンドルアイテム画像のラッパー。          |
| `.upcart-public-bundle-properties__content`                       | バンドルアイテムのコンテンツエリア。        |
| `.upcart-public-bundle-properties__product-title`                 | バンドルアイテムの商品タイトル。          |

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

|                                                |                          |
| ---------------------------------------------- | ------------------------ |
| **CSS セレクター**                                  | **説明**                   |
| `.upcart-public-addons`                        | アドオンセクションのメインコンテナ。       |
| `.upcart-public-addons__image-wrapper`         | アドオン画像のラッパー。             |
| `.upcart-public-addons__content-wrapper`       | アドオン情報のコンテンツラッパー。        |
| `.upcart-public-addons__content-title-wrapper` | アドオンタイトルのラッパー。           |
| `.upcart-public-addons__content-title`         | アドオン商品のタイトル。             |
| `.upcart-public-addons__content-price`         | アドオンの価格セクション。            |
| `.upcart-public-addons__compare-at-price`      | アドオンの元の価格(取り消し線)。        |
| `.upcart-public-addons__price`                 | アドオン商品の現在の価格。            |
| `.upcart-public-addons__content-description`   | アドオン商品の説明。               |
| `.upcart-public-addons__toggle-wrapper`        | アドオントグルのラッパー。            |
| `.upcart-public-addons__toggle`                | アドオンを追加/削除するトグルスイッチ。     |
| `.upcart-public-addons__toggle-switch`         | トグルのスイッチ要素。              |
| `.upcart-public-addons__toggle-slider`         | トグルのスライダー要素。             |
| `.upcart-public-addons__skeleton`              | アドオンセクションのスケルトンプレースホルダー。 |
| `.upcart-public-addons__skeleton-image`        | アドオン商品画像のスケルトン。          |
| `.upcart-public-addons__skeleton-text`         | アドオン内のテキストコンテンツのスケルトン。   |

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

|                                              |                   |
| -------------------------------------------- | ----------------- |
| **CSS セレクター**                                | **説明**            |
| `.upcart-public-express-payments__container` | エクスプレス決済ボタンのコンテナ。 |

<div id="cart-summary-module">
  ### **カートサマリーモジュール**
</div>

|                                               |                        |
| --------------------------------------------- | ---------------------- |
| **CSS セレクター**                                 | **説明**                 |
| `.upcart-public-cart-summary`                 | カートサマリーのメインコンテナ。       |
| `.upcart-public-cart-summary__discount-codes` | サマリー内のディスカウントコードのコンテナ。 |
| `.upcart-public-cart-summary__discount-label` | ディスカウントセクションのラベル。      |
| `.upcart-public-cart-summary__slide-codes`    | ディスカウントコードのスライドコンテナ。   |
| `.upcart-public-cart-summary__total-discount` | 合計ディスカウント額の表示。         |

<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):** 実証済みのヒントでカートデザインを最適化します。

##

##