# カートページへの設置

> STEP 2-3

Shopifyのテーマに、あんしんプラスのチェックボックスを表示し、文言や見た目を調整します。設置はテーマの「埋め込みアプリ」を有効にするだけで、テーマのコードを編集する必要はありません。

1. [埋め込みアプリを有効にする](#1-埋め込みアプリを有効にする)

2. [表示を確認する](#2-表示を確認する)

3. [表示をカスタマイズする](#3-表示をカスタマイズする)

4. [上級者向け設定（セレクタ・カスタムCSS・挙動フラグ）](#4-上級者向け設定セレクタカスタムcss挙動フラグ)

> **ヒント: テスト用テーマでの確認をおすすめします**
>
> テスト用に複製したテーマで設置・確認し、[4. 公開設定](./placement.html) でライブテーマに反映する流れをおすすめします。埋め込みアプリの設定はテーマごとに保持されるため、ライブテーマでも同じ設定を行う必要があります。

## 1. 埋め込みアプリを有効にする

1. Shopify管理画面 > オンラインストア > テーマ > 対象テーマの「カスタマイズ」を開きます
2. 左サイドバーの「埋め込みアプリ」を開き、**Checkout+ Cart Watcher** のトグルをオンにして「保存」をクリックします

    ![テーマエディタの左サイドバー。「埋め込みアプリ」の一覧に「Checkout+ Cart Watcher（購入体験プラットフォーム Recustomer）」があり、右側のトグルがオンになっている（赤枠）](images/checkout-plus_02d_app-embed.png)

## 2. 表示を確認する

テーマエディタのプレビューで商品をカートに入れ、カートページにあんしんプラスのカードが表示されることを確認します。

![テーマエディタでカートページを開いたプレビュー。右側のサマリーの「見積もり合計」の下、「チェックアウト」ボタンの直前に「あんしんプラス by Recustomer +¥700」のカードが表示されている（赤枠）](images/checkout-plus_02d_cart-preview.png)

> **注意: 表示されない場合**
>
> テーマの構成によっては表示されない場合があります。その場合は [4. 上級者向け設定](#セレクタ設定) のセレクタ設定を行うと表示されます。設定が難しい場合は、対象テーマのプレビューURLを添えて担当者までお問い合わせください。

## 3. 表示をカスタマイズする

Checkout+ Cart Watcher の設定から、カードとモーダルの文言・見た目を調整します。必要な項目を変更し、「保存」をクリックします。

### テキスト設定

![あんしんプラスのカード。①タイトル「あんしんプラス」、②説明文「返品送料無料＋¥1,500還元」、③対象外商品の注記「※「FLASH RUNNER Neon Yellow - 30.5」は対象外商品です。」、④チェックボックスの位置が赤枠と番号で示されている](images/checkout-plus_02e_text-settings.png)

| 設定項目 | 説明 |
|---|---|
| ① バナータイトル | カードのタイトルです。デフォルトは「あんしんプラス」 |
| ② バナー説明文 | カード内の説明文です。`{cashback}` または `{cashback_tax_include}` を入れると、キャッシュバックの還元額が自動で反映されます。商品価格を税抜で登録しているストアは `{cashback}`、税込で登録しているストアは `{cashback_tax_include}` を使ってください |
| ③ アラートテキスト | カートに対象外商品があるときにカード内へ表示する注記です。`{excludedItem}` が対象外商品名に置き換わります。デフォルトは「※{excludedItem}は対象外商品です。」で、非表示にする場合はカスタムCSSで `.rcmr-checkout-plus .rcmr-checkout-plus__exclusion-notice { display: none; }` を指定します |
| ④ チェックボックスデフォルト状態 | カードを表示したときにチェックボックスをオンにしておくか、オフにしておくかを設定します |

### モーダル画像設定

「詳細をみる」から開くモーダルに表示する画像を設定します。いずれも空欄の場合、そのエリアは表示されません。

![「詳細をみる」から開いたモーダル。①上部のヒーロー画像、②中央のストアロゴ（SLIPSTREAM TOKYO）の位置が赤枠と番号で示されている。その下に見出し・特典2件の説明・注記・「Powered by Recustomer」が続く](images/checkout-plus_02e_modal.png)

| 設定項目 | 説明 |
|---|---|
| ① モーダル ヒーロー画像 URL | モーダル上部に表示する画像のURLです。推奨サイズは横960px × 縦416px（実表示480×208pxのRetina2倍、PNG / JPEG） |
| ② モーダル ロゴ画像 URL | モーダル中央に表示するストアのロゴ画像のURLです。推奨サイズは高さ100px以上で、実表示は高さ最大50px・横幅はモーダル幅の60%以内に縦横比を保って自動で縮小されます。背景透過のPNGを推奨します |

### モーダル コンテンツ HTML

モーダルのタイトル・特典エリアをHTMLで自由に編集できます。空欄にするとタイトル・特典エリアが非表示になります。

> **ヒント: 元のHTMLに戻したいとき**
>
> 編集後に元の内容へ戻す場合は、テーマエディタで「モーダル コンテンツ HTML」の「初期値に戻す」を使います。初期値はアプリの更新で変わることがあるため、以下のHTMLを貼り付けるのではなく「初期値に戻す」を使ってください。

初期値のHTMLは、次の骨格でできています（アイコンのSVGや文言は省略。実際の初期値はテーマエディタで確認できます）。

```html
<div class="rcmr-checkout-plus-modal__title-section">
  <h2 class="rcmr-checkout-plus-modal__title">タイトル</h2>
  <p class="rcmr-checkout-plus-modal__subtitle">サブタイトル</p>
</div>
<div class="rcmr-checkout-plus-modal__benefits">
  <div class="rcmr-checkout-plus-modal__benefits-connector" aria-hidden="true"></div>
  <div class="rcmr-checkout-plus-modal__benefit-item">
    <div class="rcmr-checkout-plus-modal__icon"><!-- SVG アイコン --></div>
    <div class="rcmr-checkout-plus-modal__item-content">
      <div class="rcmr-checkout-plus-modal__item-title">特典のタイトル</div>
      <div class="rcmr-checkout-plus-modal__item-description">特典の説明</div>
    </div>
  </div>
  <!-- 特典の数だけ benefit-item を繰り返す -->
</div>
<hr class="rcmr-checkout-plus-modal__divider">
<div class="rcmr-checkout-plus-modal__disclaimer">
  <p class="rcmr-checkout-plus-modal__disclaimer-note">注記</p>
  <p class="rcmr-checkout-plus-modal__disclaimer-terms">利用規約・プライバシーポリシーへの同意文</p>
</div>
```

編集の際は、`rcmr-checkout-plus-modal__title` など `rcmr-checkout-plus-modal__` で始まるクラス名をそのまま使うと、既存のデザインが自動で適用されます。クラス名の一覧は [カスタムCSS](#カスタムcss) をご覧ください。

## 4. 上級者向け設定（セレクタ・カスタムCSS・挙動フラグ）

表示位置や見た目の細かな調整が必要な場合の設定です。いずれも Checkout+ Cart Watcher の設定内の「上級者向け」の欄にあります。

表示に問題がなければ設定は不要です。

### セレクタ設定

バナーの挿入位置や、カート内の行・削除ボタンの検出先をCSSセレクタで指定します。[2. 表示を確認する](#2-表示を確認する) の段階でカードが表示されない場合、すべての項目を正しく入れると表示されます。

| 設定項目 | 説明 |
|---|---|
| チェックボックスブロック アンカー セレクタ | バナーを挿入する基準要素のセレクタです。指定した要素の直前にバナーが挿入されます。空欄の場合はチェックアウトボタンの直前に自動挿入 |
| チェックアウトボタン セレクタ（カスタム） | テーマ固有のチェックアウトボタンを指定したい場合のみ入力します |
| カート行 セレクタ（カスタム） | カート内の Checkout+ 商品（あんしんプラス）の行（line item 行）を特定するためのセレクタです。カンマ区切りで複数指定できます |
| カート削除ボタン セレクタ（カスタム） | カート行内の削除ボタンを特定するためのセレクタです。カンマ区切りで複数指定できます |

※セレクタの特定が難しい場合は、対象テーマのプレビューURLを添えて担当者までお問い合わせください

### カスタムCSS

バナー・モーダルの見た目をCSSで調整できます。テーマのCSSと干渉して崩れる場合は、以下の安定クラス（バージョンアップしても変わらないクラス名）を使って上書きしてください。`<head>` 内の最後に読み込まれるため、同じ詳細度ならテーマのCSSに後勝ちします。

**バナー（チェックボックスカード）**

| クラス名 | 役割 |
|---|---|
| `rcmr-checkout-plus` | バナー全体のコンテナ |
| `rcmr-checkout-plus__card` | クリッカブルなカード全体 |
| `rcmr-checkout-plus__checkbox` | チェックボックス本体 |
| `rcmr-checkout-plus__header` | タイトルと料金が横並びになるヘッダー行 |
| `rcmr-checkout-plus__title` | タイトルグループ（タイトルテキスト＋ロゴ） |
| `rcmr-checkout-plus__title-text` | タイトルテキスト |
| `rcmr-checkout-plus__byline` | "by Recustomer" エリア |
| `rcmr-checkout-plus__fee` | あんしんプラスの料金の表示 |
| `rcmr-checkout-plus__description` | 説明文 |
| `rcmr-checkout-plus__badges` | バッジ群のコンテナ |
| `rcmr-checkout-plus__badge` | 個々のバッジ（返品送料無料・クーポンバック） |
| `rcmr-checkout-plus__exclusion-notice` | 対象外商品の注記（赤字） |
| `rcmr-checkout-plus__exclusion-item` | 注記内の対象外商品名 |
| `rcmr-checkout-plus__details-link` | 「詳細をみる」リンクテキスト |
| `rcmr-checkout-plus__details-icon` | 「?」アイコン |

**モーダル**

| クラス名 | 役割 |
|---|---|
| `rcmr-checkout-plus-modal` | モーダル全体 |
| `rcmr-checkout-plus-modal__body` | モーダルの内容エリア |
| `rcmr-checkout-plus-modal__content` | ロゴ・カスタムHTML・フッターのコンテナ |
| `rcmr-checkout-plus-modal__hero` | ヒーロー画像のコンテナ |
| `rcmr-checkout-plus-modal__hero-image` | ヒーロー画像（img要素） |
| `rcmr-checkout-plus-modal__merchant-logo` | ストアのロゴ画像 |
| `rcmr-checkout-plus-modal__title-section` | タイトルセクション全体のラッパー |
| `rcmr-checkout-plus-modal__title` | タイトルテキスト |
| `rcmr-checkout-plus-modal__subtitle` | サブタイトルテキスト |
| `rcmr-checkout-plus-modal__benefits` | 特典リスト全体のラッパー |
| `rcmr-checkout-plus-modal__benefits-connector` | 特典アイコンを縦につなぐ点線 |
| `rcmr-checkout-plus-modal__benefit-item` | 特典1件のラッパー |
| `rcmr-checkout-plus-modal__icon` | 特典アイコンのコンテナ |
| `rcmr-checkout-plus-modal__item-content` | 特典タイトル＋説明のラッパー |
| `rcmr-checkout-plus-modal__item-title` | 特典タイトル |
| `rcmr-checkout-plus-modal__item-description` | 特典説明テキスト |
| `rcmr-checkout-plus-modal__divider` | 区切り線 |
| `rcmr-checkout-plus-modal__disclaimer` | 免責事項エリア全体 |
| `rcmr-checkout-plus-modal__disclaimer-note` | 注記テキスト（例：クーポン配信日） |
| `rcmr-checkout-plus-modal__disclaimer-terms` | 利用規約・プライバシーポリシー文 |
| `rcmr-checkout-plus-modal__link` | 規約リンク |
| `rcmr-checkout-plus-modal__close` | 右上の閉じるボタン |
| `rcmr-checkout-plus-modal__footer` | "Powered by Recustomer" のフッター |

> **注意: ハッシュ付きのクラス名は指定しないでください**
>
> カード直下の列要素（チェックボックス列・コンテンツ列）には安定クラスがありません。ハッシュ付きのクラス名（`_content_xxxxx` など）はビルドごとに変わるため、CSSで指定しないでください。

### 挙動フラグ

チェックボックスなどの挙動を、JSON形式の「挙動フラグ（上級者向け）」欄でまとめて指定します。空欄はすべてデフォルト挙動です。不正な値や壊れたJSONは無視され、デフォルト挙動で動き続けます。

| フラグキー | 設定値 | 説明 |
|---|---|---|
| `checkboxStatePersistence` | `"session"` / `"none"` | チェックボックスのオン／オフをページ遷移間で引き継ぐかどうか。`"session"`（デフォルト）は同じタブ内で引き継ぎます。`"none"` は引き継がず、毎ページ「チェックボックスデフォルト状態」の値から始まります |

設定例）ページを開くたびにチェックをオフに戻したい場合

```json
{"checkboxStatePersistence":"none"}
```