> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# カートのプレビュー

> 公開前に Aftersell Cart をプレビューします — エディタのキャンバス内と、公開中のストアフロントテーマの両方で。

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

<div id="the-editor-canvas">
  ## エディタのキャンバス
</div>

カートエディタの中央は、実際のカートをレンダリングするライブプレビューです。**両方のカート状態が並んで**表示されます。**Filled cart** のカードと **Empty cart** のカードが表示されるため、作業しながら両方を確認できます。

* **編集する状態の選択**は、サイドバーの **Filled / Empty** トグル、またはカードの**上のタイトル**をクリックして行います。カードの*内側*をクリックしても状態は切り替わらず、カーソルの下にあるブロックが選択されます。アクティブなカードには枠線が表示され、編集中のブロックには独自のハイライトが付きます。
* **ズーム**はキャンバス上のズームピルで行います（25%–200%）。`+` と `−` は 10% 刻みで、パーセンテージをクリックすると 75% にリセットされます。Ctrl/Cmd + スクロールでカーソルを中心にズームし、通常のスクロールとドラッグでパンします。
* プレビューは、[デザイン設定](/ja/aftersell/cart/design-settings)と[カスタム CSS](/ja/aftersell/cart/custom-css) の変更をリアルタイムで反映します。

<div id="preview-on-your-storefront">
  ## ストアフロントでのプレビュー
</div>

カートの **Preview** を使うと、公開せずに、新しいタブで実際のテーマ上のカートを確認できます:

* **ライブカート**はストアフロントを直接開きます。ライブカートはすでに買い物客が見ているものだからです。
* **下書きカート**は**テーマプレビュー**を開きます。どのテーマでプレビューするかを選択でき（デフォルトはメインテーマ）、Aftersell はライブカートに触れることなく、プレビューセッションの間だけそのテーマに下書きカートをステージングします。選択したテーマで app embed が有効になっている必要があります。

<Note>
  下書きプレビューはライブカートの動作を完全には反映しない場合があります。近い近似として扱い、公開後に最終確認を行ってください。
</Note>

プレビューの前に変更を保存してください。プレビューが最新の作業内容を反映するよう、エディタが保存を促します。

<div id="empty-vs-filled-states">
  ## 空の状態と商品が入った状態
</div>

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

<div id="sample-data-scenarios">
  ## サンプルデータのシナリオ
</div>

[Cart items ブロック](/ja/aftersell/cart/cart-items-block)の設定パネルには、**Sample data** ピッカーを備えた **Preview** セクションがあり、エディタのプレビューをラインアイテムのシナリオ間で切り替えられます。対応するカートを実際に作らなくても、それぞれの見え方を確認できます:

| シナリオ                  | 表示内容                                      |
| --------------------- | ----------------------------------------- |
| **Standard product**  | 割引が適用された単一の商品。                            |
| **Long product name** | 非常に長いタイトルの商品。テキストの折り返しとはみ出しの確認用。          |
| **Bundle**            | バンドルの親ラインとその子アイテム。                        |
| **Subscription**      | 販売プランのラベル付きのサブスクリプションライン。                 |
| **All item types**    | 長い商品名、サブスクリプション、バンドルのラインを 1 つのカートにまとめたもの。 |

この選択はエディタのプレビューにのみ影響します。カートに保存されることはなく、エディタを再読み込みするとリセットされます。