Skip to main content
カートのレイアウトは、カートエディタで追加、並べ替え、スタイリング、カスタマイズできる構成パーツであるブロックの積み重ねです。どのブロックをどの順序で含めるかが、購入者が目にするカートになります。 ブロックが**状態（states）とセクション（sections）**の中でどのように配置されるかは、カートの仕組みをご覧ください。

​
ブロックとサブブロック

ブロックには2種類あります。
  • ブロックは、Header、Body、Footer の3つのセクションのいずれかで、カートに直接配置されます。セクションごとに利用できるブロックのセットが異なります。
  • サブブロックは、別のブロックの中にネストされます。現在サブブロックをホストするのはCart itemsのみで、Product 行（ラインアイテムの行そのもの）、Subscription upgrade、Custom codeがあります。

​
ブロックの追加、並べ替え、削除

  • ブロックの追加は Add block ピッカーで行います。追加しようとしている場所に配置できない場合、または上限に達している場合、ブロックはグレーアウトされます（ピッカーには count/max バッジが表示されます）。
  • 並べ替えは、セクション内でブロックをドラッグして行います。
  • 削除はゴミ箱アイコンで行います。ただし、ロックされたブロック（下記）は削除できません。
  • ほとんどのブロックは目のトグルで表示/非表示を切り替えられ、削除せずに購入者から見えなくできます。一部の構造的なブロックは非表示にできません: Cart items、Checkout button、Product 行。

​
ロックされたブロック

一部のブロックは並べ替えはできますが削除できません。これにより、カートの中核的な動作（たとえばチェックアウト）が誤って削除されることを防ぎます。
  • Cart items
  • Checkout button

​
デフォルトのブロック

新しいカートは、動作するデフォルトレイアウトで始まります。
  • 商品が入ったカート: Header、Banner、Cart items、Summary、Checkout button
  • 空のカート: Header、Empty cartブロック
空のカート状態は、空の状態のレイアウト全体を指します。Empty cartブロックは、その中の1つのブロックです。違いについてはカートの仕組みをご覧ください。

​
各ブロックを追加できる数

制限は、カート単位ではなくカート状態ごとにカウントされます。商品が入ったカートと空のカートはそれぞれ別枠になるため、1つのカートは、商品が入ったレイアウトに3つ、空のレイアウトにさらに3つのBannerを持つことができます。 ほとんどのブロックは状態ごとに1つに制限されます。例外は次のとおりです。

​
Content、Design、Code

各ブロックは、エディタ内の最大3つの画面から設定します。
  • Content: ブロックの設定（テキスト、商品の選択、しきい値など）。Custom code ブロックは唯一の例外で、ブロック自体がコードであるため、Contentパネルがありません。
  • Design: グローバルのデザイン設定の上に重なるブロックごとのスタイリング。設定パネル自体がない Custom code を除き、すべてのブロックにあります。
  • Code: ブロックの組み込みレンダリングをカスタムテンプレートでオーバーライドします。ほとんどのブロックが対応していますが、一部非対応のものもあります。

​
マーケット、国、通貨による表示/非表示

一部のブロックは、購入者が誰かに応じて異なる設定を表示したり、完全に非表示にしたりできます。これは、全員に対してブロックのオン/オフを切り替えるサイドバーの目のトグルとは別の仕組みです。 現在対応している条件タイプ: Shopifyマーケット、顧客の国、顧客の通貨（それぞれ In または Not in）。カートの合計金額やカートの内容は条件タイプではありません。金額/数量の進捗にはRewardsの階層しきい値を、エディタで表現できないルールが必要な場合はCart SDKを使用してください。 条件は順序付きリストで、最初に一致した条件が優先されます。具体的なルールを All buyers のキャッチオールより上に置いてください。何も一致しない場合、そのブロックはその購入者には何もレンダリングしません。 現在のエディタでは、完全なConditions UIはRewardsブロックに搭載されています。マーケット、国、通貨ごとに異なる階層セットを設定できます。他のブロックは、単一の「all buyers」設定を使用するか、まだこのシステムに参加していません。 エディタのプレビューは、実際の購入者を評価しません。パネルで条件を選択すると、そのバリアントをプレビューできます。

​
すべてのブロック

構造
  • Header: タイトル、アイテム数、ロゴ、閉じるボタン。上部に固定。
  • Cart items: 顧客がカートに追加したアイテム。行ごとに繰り返し表示。
  • Subscription upgrade: ラインアイテムのサブスクリプションへの変換を提案するサブブロック。
  • Summary: 合計、節約額、適用された割引。
  • Checkout button: チェックアウトへの主要なCTA。
  • Empty cart: カートが空のときに表示されるコンテンツ。
  • Express payments: カート内の高速チェックアウトボタン（Shop Pay、PayPalなど）。
マーチャンダイジング
  • Upsells: ストラテジーが選んだ商品レコメンデーション。
  • Product add-on: アドオンとして提案される特定の1商品。
  • Rewards: 送料無料やギフトなどの段階的なリワード。
  • Shipping protection: オプトイン式の配送保護アドオン。
購入者の入力
  • Discount code: 割引コードを適用するフィールド。
  • Notes: 注文メモのフィールド。
コンテンツ
  • Banner: メッセージバナー。オプションのカウントダウンタイマー付き。
  • Image: 単一の画像、または支払いアイコンなどのホスト済みプリセット。
  • Custom code: カート内の任意の場所に配置できるカスタムHTMLまたはReact。
拡張

​
各セクションで利用可能なブロック

セクションごとに利用できるブロックのセットが異なります。これによりレイアウトの焦点が保たれ、散らかりを防ぎます。 これらのブロックの一部は状態固有です（たとえばEmpty cartは空の状態のみ）。カートの仕組みをご覧ください。

​
ブロックのバリデーションエラー

ブロックの設定に無効な値が含まれている場合、サイドバーのそのブロック名の横に小さな赤い点が表示されます。この点は問題を修正するまで残ります。閉じられる通知ではありません。 いずれかのブロックにエラーがある間、保存はブロックされます。Save ボタンはクリック可能なままですが、選択するとエラートースト（「Fix the errors in your cart blocks before saving」）が表示され、問題のある最初のブロックにジャンプし、その設定が開いてハイライトされたフィールドを修正できるようになります。Publish はさらに未保存の変更がないことを必要とするため、正常な保存が完了するまで利用できないままになります。 無効なフィールドを修正すると、赤い点は自動的に消え、保存は通常どおり進みます。
非表示のブロックもバリデーションの対象です。非表示にしたブロックも無効な設定を持ち、エラーの点を表示し、表示中のブロックとまったく同じように保存をブロックすることがあります。保存がブロックされているのに表示中のブロックがすべて問題なさそうな場合は、非表示のブロックを確認してください。