テーマエディターでのカート＆チェックアウトページのデザイン（OS 3.0テーマ） – SHOPLINE ヘルプセンター

カートおよびチェックアウトページは、購入者の購入プロセスの最終段階です。これらは一緒に、購入者が注文内容を確認し、支払いを完了し、注文を正常に確定するのを支援します。

OS 3.0 テーマの場合、カートページはテーマエディターでデザインされており、ここでコアパーツをカスタマイズしたり、購入者が購入を完了するよう促すプロモーションや情報コンテンツを追加したりできます。一方、チェックアウトページは別途チェックアウトエディターで設定されており、ストアのチェックアウト体験に特化した設定が提供されています。

このガイドでは、テーマエディターでのカートページのカスタマイズ方法を説明し、チェックアウトエディターを紹介し、チェックアウトページの設定に関する適切なガイドへの案内を行います。

始める前に：正しいツールを使用していることを確認してください

この記事は、テーマエディター（OS 3.0 テーマ）内のカートページを対象としており、ウェブブラウザ上のストアフロントで購入者がカート内の商品をどのように閲覧・操作するかを制御します。SHOPLINEのモバイルアプリ用のショッピングバッグページをShopper Appでデザインしている場合は、「ショッピングバッグページのデザイン」をご覧ください。Shopper Appはテーマエディターとは独立した別のページエディターを使用し、異なるパーツを備えています。

テーマエディターでのカートページへの移動

テーマエディターでカートページを開くには：

SHOPLINE管理画面から、オンラインストア > デザインに進み、編集したいOS 3.0 テーマのデザインボタンをクリックします。
テーマエディターの上部にあるページセレクターをクリックし、ページタイプのリストからカートを選択します。

テーマエディターの左サイドバーは常に3つのグループに分かれています：

ヘッダーおよびフッター：ストア全体に適用されます。
テンプレート：編集中のページ固有のコンテンツを含みます。カートページの場合、テンプレートにはカートパーツが含まれ、タイトル、商品リスト、および本ガイドで扱う小計ブロックが含まれます。

注：このガイドはカートページ自体のカスタマイズに焦点を当てています。カートが購入者にどのように表示されるか（例えば、ドロワー、カートページ、またはポップアップ通知として）を設定するには、グローバル設定 > カートスタイルに移動してください。詳細な手順については、「ストアページ全体のグローバル設定の構成（OS 3.0 テーマ）」をご覧ください。

カートページのコアパーツの理解

カートパーツはテーマエディターのテンプレート内にあり、3つのコアブロックを含みます：タイトル、商品リスト、および小計。各ブロックは異なる役割を持っています：

タイトル：ページの見出し（例：「カート」）をページの上部に表示します。
商品リスト：購入者のカート内の各商品を、商品画像、名前、数量セレクター、ライン合計と共に表示します。
小計：カートの合計金額を表示し、さらに2つの追加ブロックを含みます：
- 小計価格：現在カートにある商品の合計金額を表示します。
- チェックアウトボタン：購入者がチェックアウトに進むためにクリックするボタンです。

注：利用可能なブロックはテーマによって異なる場合があります。テーマエディターに表示されているブロックをご参照ください。

ブロックをクリックすると、その設定パネルが開きます。各ブロックはテーマエディター全体で利用可能な標準の利益率とパディング設定のみをサポートし、追加のコンテンツや表示オプションは含まれていません。

また、ドラッグハンドルをクリックしてドラッグすることで、コンポーネント内のブロックの順序を変更できます。

カートページにカスタムパーツを追加および配置する

コアパーツに加えて、カスタムパーツを使用してカートページに追加のコンテンツを追加できます。これは、プロモーションを強調したり、緊急性を演出したり、購入者がチェックアウトの準備をする際に安心感を与えるのに役立ちます。

カートページにカスタムパーツを追加する

カートページにパーツを追加するには：

テーマエディターで、カートページに移動します。
テンプレートの下で、+ パーツを追加をクリックします。
開いたパネルで、テーマタブの下からパーツを閲覧または検索します。
パーツをクリックしてカートページに追加し、その設定を構成します。

カートページにおすすめのカスタムパーツ

以下のパーツは、コンバージョンを高め、追加購入を促し、チェックアウト前に購入者の信頼を築くためにカートページによく追加されます。

パーツ	説明
カウントダウン	セールやオファーの終了前にチェックアウトを完了するよう促すため、緊急性を生み出すカウントダウンクロックを表示します。
割引プロモーション	購入者が購入を完了したり、カートに商品を追加したりするよう促すため、プロモーション、割引、または期間限定オファーを強調表示します。
おすすめ商品	関連商品や補完商品を表示し、購入者がチェックアウト前に注文金額を増やすよう促します。
ロゴリスト	信頼バッジ、支払い方法、または認証ロゴを表示し、チェックアウト前に購入者を安心させます。
リッチテキスト	配送詳細、返品ポリシー、または安全なチェックアウトメッセージなどのカスタムテキストを追加し、チェックアウト前の一般的な懸念に対応します。

例：カートページにカウントダウンを追加する

カートページにカウントダウンを追加して設定するには：

テーマエディターで、カートページに移動します。
テンプレートの下で、＋コンポーネントを追加をクリックし、テーマタブからカウントダウンを選択します。
新しく追加されたカウントダウンコンポーネントをクリックして、設定パネルを開きます。カウントダウンのフォントカラー、カラースキーム、全画面表示、レイアウトなど、コンポーネントの全体的な外観をストアのデザインに合わせて設定します。
カウントダウンの下で、画像をクリックしてカウントダウンバナー用のプロモーション画像をアップロードし、画像の幅を設定し、リンク先を設定します。
カウントダウン設定をクリックします。設定の下で、コンテンツがコンポーネントのカラースキームを継承するかどうかを選択します。レイアウトの下で、必要に応じてコンテンツエリアの間隔やレイアウトを調整します。

次に、以下のブロックを設定します：

タイトル：プロモーションのメイン見出しを入力します。
説明：プロモーションの詳細や行動を促すテキストなど、補足テキストを追加します。
区切り線：コンテンツセクションを分けるための区切り線を追加または削除します。
カウントダウン：カウントダウンの終了日時を設定し、タイマーの外観をカスタマイズします。
ボタン：ボタンのテキストとリンク先を設定し、購入者を関連ページやプロモーションに誘導します。

変更を適用するには、保存をクリックします。

チェックアウトページのデザイン

チェックアウトページは、ストアのチェックアウト体験を管理する専用エディターであるチェックアウトエディターで設定します。

アクセスするには、テーマエディターの上部にあるページセレクターを開き、チェックアウトを選択します。するとチェックアウトエディターにリダイレクトされ、チェックアウトページのレイアウト、支払い方法、配送情報などの設定をカスタマイズできます。

詳細な設定およびカスタマイズ手順については、「チェックアウトプロセスの選択」および「ストアチェックアウトページのカスタマイズ」をご参照ください。

この記事はAIを使用して翻訳されており、不正確な箇所が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。