Skip to main content
カートは 2 つの方法でプレビューできます。作成しながらエディタ内でライブに確認する方法と、公開前にストアフロントのテーマ上で確認する方法です。

エディタのキャンバス

カートエディタの中央は、実際のカートをレンダリングするライブプレビューです。両方のカート状態が並んで表示されます。Filled cart のカードと Empty cart のカードが表示されるため、作業しながら両方を確認できます。
  • 編集する状態の選択は、サイドバーの Filled / Empty トグル、またはカードの上のタイトルをクリックして行います。カードの内側をクリックしても状態は切り替わらず、カーソルの下にあるブロックが選択されます。アクティブなカードには枠線が表示され、編集中のブロックには独自のハイライトが付きます。
  • ズームはキャンバス上のズームピルで行います(25%–200%)。+ は 10% 刻みで、パーセンテージをクリックすると 75% にリセットされます。Ctrl/Cmd + スクロールでカーソルを中心にズームし、通常のスクロールとドラッグでパンします。
  • プレビューは、デザイン設定カスタム CSS の変更をリアルタイムで反映します。

ストアフロントでのプレビュー

カートの Preview を使うと、公開せずに、新しいタブで実際のテーマ上のカートを確認できます:
  • ライブカートはストアフロントを直接開きます。ライブカートはすでに買い物客が見ているものだからです。
  • 下書きカートテーマプレビューを開きます。どのテーマでプレビューするかを選択でき(デフォルトはメインテーマ)、Aftersell はライブカートに触れることなく、プレビューセッションの間だけそのテーマに下書きカートをステージングします。選択したテーマで app embed が有効になっている必要があります。
下書きプレビューはライブカートの動作を完全には反映しない場合があります。近い近似として扱い、公開後に最終確認を行ってください。
プレビューの前に変更を保存してください。プレビューが最新の作業内容を反映するよう、エディタが保存を促します。

空の状態と商品が入った状態

エディタのキャンバスでは両方の状態(2 つのカード)が常に利用できるため、空のカートと商品が入ったカートを独立してデザイン・確認できます。ストアフロントでは、買い物客は自分のカートに一致する状態を見ます。

サンプルデータのシナリオ

Cart items ブロックの設定パネルには、Sample data ピッカーを備えた Preview セクションがあり、エディタのプレビューをラインアイテムのシナリオ間で切り替えられます。対応するカートを実際に作らなくても、それぞれの見え方を確認できます: この選択はエディタのプレビューにのみ影響します。カートに保存されることはなく、エディタを再読み込みするとリセットされます。