カートページへの設置
Shopify のテーマに、あんしんプラスのチェックボックスを表示し、文言や見た目を調整します。設置はテーマの「埋め込みアプリ」を有効にするだけで、テーマのコードを編集する必要はありません。
テスト用テーマでの確認をおすすめします
テスト用に複製したテーマで設置・確認し、4. 公開設定 でライブテーマに反映する流れをおすすめします。埋め込みアプリの設定はテーマごとに保持されるため、ライブテーマでも同じ設定を行う必要があります。
1. 埋め込みアプリを有効にする
Shopify 管理画面 > オンラインストア > テーマ > 対象テーマの「カスタマイズ」を開きます
左サイドバーの「埋め込みアプリ」を開き、Checkout+ Cart Watcher のトグルをオンにして「保存」をクリックします
2. 表示を確認する
テーマエディタのプレビューで商品をカートに入れ、カートページにあんしんプラスのカードが表示されることを確認します。
表示されない場合
テーマの構成によっては表示されない場合があります。その場合は 4. 上級者向け設定 のセレクタ設定を行うと表示されます。設定が難しい場合は、対象テーマのプレビュー URL を添えて担当者までお問い合わせください。
3. 表示をカスタマイズする
Checkout+ Cart Watcher の設定から、カードとモーダルの文言・見た目を調整します。必要な項目を変更し、「保存」をクリックします。
テキスト設定
| 設定項目 | 説明 |
|---|---|
| ① バナータイトル | カードのタイトルです。デフォルトは「あんしんプラス」 |
| ② バナー説明文 | カード内の説明文です。{cashback} または {cashback_tax_include} を入れると、キャッシュバックの還元額が自動で反映されます。商品価格を税抜で登録しているストアは {cashback}、税込で登録しているストアは {cashback_tax_include} を使ってください |
| ③ アラートテキスト | カートに対象外商品があるときにカード内へ表示する注記です。{excludedItem} が対象外商品名に置き換わります。デフォルトは「※{excludedItem}は対象外商品です。」で、非表示にする場合はカスタム CSS で .rcmr-checkout-plus .rcmr-checkout-plus__exclusion-notice { display: none; } を指定します |
| ④ チェックボックスデフォルト状態 | カードを表示したときにチェックボックスをオンにしておくか、オフにしておくかを設定します |
モーダル画像設定
「詳細をみる」から開くモーダルに表示する画像を設定します。いずれも空欄の場合、そのエリアは表示されません。
| 設定項目 | 説明 |
|---|---|
| ① モーダル ヒーロー画像 URL | モーダル上部に表示する画像の URL です。推奨サイズは横 960px × 縦 416px（実表示 480×208px の Retina2 倍、PNG / JPEG） |
| ② モーダル ロゴ画像 URL | モーダル中央に表示するストアのロゴ画像の URL です。推奨サイズは高さ 100px 以上で、実表示は高さ最大 50px・横幅はモーダル幅の 60%以内に縦横比を保って自動で縮小されます。背景透過の PNG を推奨します |
モーダル コンテンツ HTML
モーダルのタイトル・特典エリアを HTML で自由に編集できます。空欄にするとタイトル・特典エリアが非表示になります。
元の HTML に戻したいとき
編集後に元の内容へ戻す場合は、テーマエディタで「モーダル コンテンツ HTML」の「初期値に戻す」を使います。初期値はアプリの更新で変わることがあるため、以下の HTML を貼り付けるのではなく「初期値に戻す」を使ってください。
初期値の HTML は、次の骨格でできています（アイコンの SVG や文言は省略。実際の初期値はテーマエディタで確認できます）。
<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 をご覧ください。
4. 上級者向け設定（セレクタ・カスタム CSS・挙動フラグ）
表示位置や見た目の細かな調整が必要な場合の設定です。いずれも Checkout+ Cart Watcher の設定内の「上級者向け」の欄にあります。
表示に問題がなければ設定は不要です。
セレクタ設定
バナーの挿入位置や、カート内の行・削除ボタンの検出先を CSS セレクタで指定します。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" は引き継がず、毎ページ「チェックボックスデフォルト状態」の値から始まります |
設定例）ページを開くたびにチェックをオフに戻したい場合
{"checkboxStatePersistence":"none"}