基本操作
- テンプレート切替: テーマエディタ上部で「カート」を選択。プレビューがカートページに切り替わるのを確認。
- テストデータ: テスト購入用の商品をカートに追加してからエディタを開くと、商品行やサマリーが表示され設定が分かりやすい。
- ブロック整理: カートのメインセクション内でタイトル/商品リスト/サマリーの順序を固定しつつ、追加ブロック（テキストや動画など）は「続きのブロック」領域に追加して告知を差し込む。
- 空カート確認: カートが空の状態でプレビューすると、タイトルのみ中央寄せで表示され、追加ブロックは下部にまとまります。空状態の文言は翻訳ファイルで管理。
セクション共通の見た目調整
- ここを触る:
main-cartセクションの設定パネル。 - 主な項目: セクション幅（ページ幅/全幅）、配色、上下余白。
- ヒント: 配色をサマリーと同じものにすると余白のつなぎ目が自然になります。ヒーローの直後に配置する場合は上余白を小さめに調整してください。
テンプレート
カート
- 目的: カートタイトル、商品リスト、注文サマリー、任意の追加ブロックを1つのセクションで管理。
- 含まれるブロック: タイトル、商品リスト、サマリー（固定）＋テキスト/画像/ボタン/グループ/アプリ等の追加ブロック。
- 使う場面: 既定のカートページ。追加ブロックにクーポン説明、FAQ、配送案内、決済ロゴ等を配置してコンバージョンを補強。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| セクション幅 | Select | ページ幅はコンテンツを中央に収め、全幅は背景を端まで広げる。サマリーの固定幅を保ちたい場合はページ幅がおすすめ。 |
| 配色 | 配色 | 背景・テキスト・リンク色。サマリーブロックで別配色を使う場合でも、外枠色はこちらが基準。 |
| 上下余白 | Range(px) | セクション外周。フッター直上では下余白を少し広めに取ると呼吸感が出る。 |
タイトル
このブロックは、カートページの「見出しになる文字」を決める場所です。空のときにも表示されるので、短く分かりやすい言葉にすると安心です。
| 設定 | 種別 | 説明 |
|---|---|---|
| タイトル | Inline richtext | タイトルの文言を設定。翻訳キーも使用可能。 |
| 点数表示 | Checkbox | 商品点数をタイトル横のバッジで表示するかを切り替える。 |
| フォントプリセット | Select | タイトルの文字スタイルを選択。 |
| テキストの寄せ | Text alignment | タイトルの左右寄せを設定。 |
カート内の商品
このブロックは、カートに入った商品の「一覧の見え方」を整える場所です。商品名が長くても見やすいように、余白や画像の大きさを調整します。
| 設定 | 種別 | 説明 |
|---|---|---|
| ギャップ | Range(px) | 商品行の上下余白。デフォルト24px。 |
| 画像比率 | Select | 縦長・正方形・元画像に合わせるのいずれかで、商品画像の比率を統一。 |
| 罫線（dividers） | Checkbox | 各行の境界線の有無。ONでリスト感、OFFでカード風に。 |
| ベンダー表示 | Checkbox | Vendor名をサブテキストに出すかを切替。 |
| 上余白 | Range(px) | 商品リスト上側の余白を調整。 |
| 下余白 | Range(px) | 商品リスト下側の余白を調整。 |
| 左余白 | Range(px) | 商品リスト左側の余白を調整。 |
| 右余白 | Range(px) | 商品リスト右側の余白を調整。 |
サマリー
このブロックは、合計金額や購入ボタンがまとまる「お会計エリア」です。目立ちすぎないけれど見落とされないように、色や枠の印象を整えます。
| 設定 | 種別 | 説明 |
|---|---|---|
| 画面の端まで拡張する | Checkbox | ONでサマリーの背景ブロックをページ幅まで伸ばし、右カラムを大きく見せる。 |
| 配色を継承する | Checkbox | ONでセクションの配色を引き継ぐ。OFFのときは配色を個別指定。 |
| 配色 | 配色 | サマリーの背景/文字色を設定。配色の継承をOFFにしたときのみ変更できる。 |
| 枠線スタイル | Select | 枠線の有無とスタイルを指定。 |
| 枠線の太さ | Range(px) | 枠線の太さ。枠線を表示する場合に有効。 |
| 枠線の不透明度 | Range(%) | 枠線の透明度。枠線を表示する場合に有効。 |
| 角丸 | Range(px) | カード型にしたい場合に指定。 |
連携・注意事項
- カートの入力項目（メモ欄・クーポン・分割払い表示など）は「テーマ設定 > カート」で集中管理。ページマニュアルと合わせて確認。
- サマリーブロックの色や角丸は、ギフトラップやアプリブロックが追加された場合にも適用されます。背景に半透明を使う場合、サマリー拡張をONにして高さを確保してください。
- Cartページとドロワーカートは同じJavaScriptロジックを共有します。片方だけをCSSで非表示にするより、テーマ設定で挙動を切り替える方が安全です。
Tips（運用のコツ）
- カラーリング: サマリーを淡色、商品リストを白背景にすると、支払い部分への視線が自然に誘導されます。
- 信頼性強化: 追加ブロックに「配送目安」「返品ポリシー」「セキュリティバッジ」を入れると離脱抑止に効果的。
- クーポン表示: クーポンコードを案内する場合はテキストブロックをサマリー直下に設置し、テキストの折り返し設定を有効にして崩れを防ぐ。
- 空状態CTA: 空カート時に誘導したいページ（例: 新着コレクション）へのボタンを追加ブロックで設置しておくと回遊が途切れません。
公開前チェックリスト
- 配色: タイトル/商品行/サマリーで文字色・リンク色が十分なコントラストか。
- メモ/割引欄: テーマ設定でONにした項目が実際に表示され、フォーム送信時に正しく渡るかテスト。
- モバイル: 商品行のボタンや数量調整がタップしやすいか、サマリーが縦積みで読みやすいかを確認。
- 空カート: 翻訳文言やCTAが想定どおり表示されるか。余白が過度に大きくなっていないか。
- レコメンド:
product-listセクションを有効化した場合、在庫切れ/非公開商品が含まれていないか、カルーセルが滑らかに動くか。