SHOPLINEのカスタムチェックアウト機能を使用して、ユーザーのチェックアウト体験を向上させましょう！チェックアウトページをカスタマイズすることで、ブランドの一貫性を保ち、お客様との信頼関係を築き、魅力的で信頼性の高いショッピング体験を実現します。

このガイドに従って、ユーザー満足度を高め、転換率を向上させる魅力的なチェックアウトページを作成しましょう。

SHOPLINEチェックアウトエディタへのアクセス

強力なSHOPLINE チェックアウトエディタを使用して、ストアのチェックアウトページをコントロールしましょう！このセクションでは、エディタへのアクセスと活用方法を案内し、チェックアウト機能を最適化し、お客様にシームレスな体験を提供する力を与えます。

SHOPLINEチェックアウトエディタとは？

SHOPLINEのチェックアウトエディタは、オンラインストアのチェックアウトページをカスタマイズするためのバックエンドツールです。主に2つのセクションで構成されています：

チェックアウトアプリ：このセクションでは、チェックアウトページの機能をカスタマイズするためのチェックアウトアプリをインストールできます。

注意： チェックアウトアプリ 機能はエンタープライズサブスクリプションプランを持つストアにのみ適用されます。
ブランドマーケティング：このセクションでは、ワンページまたはスリーページのチェックアウトスタイルを選択し、提供される機能を使用してチェックアウトページの外観をデザインできます。

チェックアウトエディタへのアクセス

SHOPLINE管理パネルから、設定 > チェックアウト設定に移動します。
カスタムチェックアウトセクションを見つけ、チェックアウトをカスタマイズボタンをクリックします。
チェックアウトアプリ 機能にアクセスするには、アプリアイコンをクリックします。 ブランドマーケティングセクションにアクセスするには、パレットアイコンをクリックします。

ヘッダーバーの便利なツール

SHOPLINEのチェックアウトエディターのヘッダーバーには、チェックアウトページが整然と機能することを確認するためのいくつかの重要な機能が備わっています。
1.3.png

元に戻す/再開ボタン: 間違いをした場合や元に戻したい場合は、元に戻すを使用して1つ戻り、再開を使用して中断したところから再開します。
ページセレクター: このドロップダウンメニューを使用して、個々の構成のために異なるチェックアウトページ間を簡単に切り替えることができます。利用可能なオプションは、選択したチェックアウトスタイルによって異なります（情報、配送、支払いのために個別のページがある3ステップスタイル、またはすべての詳細が1つのページにある1ステップスタイル）。
ディスプレイ画面アイコン: ディスプレイ画面アイコンをクリックして、レイアウトが異なるデバイスでどのように表示されるかを確認できます。
オンラインストアを表示: このボタンをクリックして、オンラインストアにすばやくアクセスできます。
保存: 変更内容を保存し、チェックアウトページに適用されるようにするには、保存ボタンをクリックします。

チェックアウトアプリを使用したチェックアウト機能のカスタマイズ

ユーザーエクスペリエンスを向上させ、ブランドの可視性を高め、業務を効率化するために、チェックアウトアプリ機能を使用して必要なアプリを追加または設計します。

注意: チェックアウトアプリ機能は、エンタープライズサブスクリプションプランを持つストアにのみ独占的に提供されます。

アプリの追加と使用

機能のカスタマイズのためにチェックアウトアプリを追加するには、SHOPLINEチェックアウトエディターへのアクセスセクションに記載されている手順に従って、チェックアウトエディターにアクセスします。エディターに入ったら、以下のように進みます:

お好みのチェックアウトステップスタイルを選択します：パレットアイコンをクリックし、チェックアウトステップセクションを見つけ、ワンステップチェックアウトとスリーステップチェックアウトのいずれかを選択します。
アプリアイコンをクリックして、チェックアウトアプリ機能に切り替え、アプリを追加をクリックします。

インストールされている適用可能なチェックアウトアプリがアプリリストに表示されます。必要なアプリをクリックしてそのエディタにアクセスします。
2.1.3.png

重要: チェックアウトアプリセクションで使用する前に、管理パネルにチェックアウトアプリをインストールして追加していることを確認してください。以下は、Extra checkout field PLUSアプリを使用してチェックアウトアプリをインストールする方法を示しています。

カスタムチェックアウトページ向けの推奨アプリにアクセスするには、左下隅のSHOPLINE App Storeをクリックします。
必要なアプリを選択します。この例では、Extra Checkout Field Plusアプリを選択します。
クリックしてインストールします。
トグルをONに切り替えてアプリを有効にします。

インストール後、アプリはチェックアウトエディタのチェックアウトアプリセクションのアプリリストに表示され、使用可能です。

アプリのエディタを使用して必要な変更を行います。
アプリをチェックアウトページの好きな位置にドラッグアンドドロップします。特定のアプリは特定の位置にのみ配置できることに注意してください。
保存をクリックして設定を保存します。

アプリの開発

開発チームがいる場合は、好みに応じてチェックアウトページをカスタマイズするアプリケーションを作成できます。

アプリの削除

アプリリストからアプリを削除するには、以下の手順に従ってください：

チェックアウトエディターで削除したいアプリを選択します。
アプリを削除をクリックして確認します。
保存をクリックして変更内容を保存します。

注意: これらの手順は、チェックアウトエディターからアプリを削除するだけです。管理パネルから完全に削除するには、管理パネルのアプリセクションに移動してください。

チェックアウトページの強化

ブランドマーケティングセクションを使用して、チェックアウトエディターでページバナー、ブランドロゴ、カスタムメッセージコンテンツを追加して、ユニークなチェックアウトページを作成できます。

注意: このブランドマーケティングの内容は、顧客情報ページ、注文ステータスページ、お礼ページにも適用されます。

チェックアウトページをカスタマイズするには:

チェックアウトエディターで、パレットアイコンをクリックしてブランドマーケティングセクションにアクセスします。
左パネルの編集モジュールを使用して、チェックアウトページをカスタマイズします:

- チェックアウトステップ: ワンステップチェックアウトとスリーステップチェックアウトスタイルのいずれかを選択します。
- バナー: PCおよびモバイルモード用のチェックアウトページにバナーを追加し、画像の高さと表示エリアを選択し、PCで必要な場合はフルスクリーン幅を有効にします。
- ロゴ: ブランドロゴをチェックアウトページにアップロードし、ロゴのサイズと配置を調整し、表示位置を選択します。
- コンテンツ: 背景画像をアップロードし、背景色を選択し、入力フィールドの色を選択します。
- 注文概要: 背景画像をアップロードし、背景色を選択し、モバイルモードで折りたたむか展開するかを選択します。
  
  注意: 背景画像、背景色、フィールド色を変更した後、チェックアウトフィールドが表示されていることを確認してください。

- タイポグラフィ: タイトルと本文のフォントを変更します。変更が不要な場合は、デフォルト設定に戻すことができます。
- 色: ボタン、エラーメッセージ、ハイライトされた通知の色を選択します。

保存をクリックして変更内容を保存します。

注意: すべてのアップロードされた画像について、変更ボタンの矢印をクリックしてALT属性をさらに編集したり、画像を変更したり、画像の比率を圧縮したりできます。画像のALTタグを編集すると、検索エンジン最適化（SEO）が向上し、Webアクセシビリティスコアが向上します。

チェックアウトエディタの管理

最初にチェックアウトエディタを作成して保存すると、管理パネルのチェックアウト設定セクションに保存されます。

ライブチェックアウトの管理

公開されたチェックアウトページはライブチェックアウトモジュールに保存されます。次の手順でライブチェックアウトページを表示、名前変更、コピー、カスタマイズできます:

SHOPLINE管理パネルから設定 > チェックアウト設定に移動します。
カスタムチェックアウトセクションを見つけて、ライブチェックアウトモジュールを選択します。次に、必要に応じて以下の設定を構成します:

- カスタマイズ: ライブページのチェックアウトエディタにアクセスして構成します。
- コピー: 公開ページのコピーを作成します。作成された下書きは下書きモジュールに表示されます。
- その他のオプション: もっと多くのオプションアイコンをクリックし、表示を選択してストアのライブチェックアウトページを表示します。ライブページの名前を変更するには、名前を変更を選択します。

下書きのチェックアウトの管理

下書きのチェックアウトページを使用すると、公開前にさまざまな機能構成やページデザインを試すことができます。設定にアクセスして必要な構成を行うには、次の手順に従ってください:

SHOPLINE管理パネルから設定 > チェックアウト設定に移動します。
カスタムチェックアウト セクションを見つけて、下書きモジュールを選択します。次に、必要に応じて以下の設定を構成します:

- カスタマイズ: 下書きページのチェックアウトエディタにアクセスして構成します。
- 公開: 選択したチェックアウト下書きを公開するにはクリックします。この操作により、このチェックアウトバージョンがライブになります。
- その他のオプション: もっと多くのオプションアイコンをクリックして、プレビュー、コピー、名前を変更、または削除を選択します。

ストアのチェックアウトページのカスタマイズ

目次