• Topic 主题 トピック Topic Topic
  • Sign in

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

 

SHOPLINEのカスタムチェックアウト機能を使用して、顧客のチェックアウト体験を向上させましょう。チェックアウトページをカスタマイズすることは、ブランドの一貫性を保つだけでなく、顧客との信頼関係を築き、より魅力的で信頼性のあるショッピング体験を提供します。

この記事に従って、顧客満足度を高め、コンバージョン率を向上させる魅力的なチェックアウトページを作成しましょう。

 

目次

 


 

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

SHOPLINE チェックアウトエディターを使用して、ストアのチェックアウトページをデザインしましょう。ここでは、エディタへのアクセスと活用方法を案内します。チェックアウト機能を最適化し、顧客にシームレスな体験を提供しましょう。

 

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

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

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

 

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

  1. SHOPLINEの管理画面から、設定チェックアウト に移動します。
    1.2.1.png
  2. 支払いフローのカスタマイズを見つけ、[チェックアウトをカスタマイズ] ボタンをクリックします。
    1.2.2.png
  3. チェックアウトアプリ機能を使用する場合は、アプリアイコン icon Checkout Apps.png をクリックします。
    ブランドマーケティングセクションにアクセスするには、パレットアイコン icon Brand Marketing.png をクリックします。

 

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

SHOPLINEのチェックアウトエディターにあるヘッダーバーには、チェックアウトページを見栄え良く、スムーズに動作させるための重要な機能が揃っています。
1.3.png

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

 


 

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

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

Note: チェックアウトアプリ機能は、エンタープライズプランを持つストアにのみに提供されます。

 

アプリの追加と使用

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

  1. まず、チェックアウトページのスタイルを選択します。パレットアイコンをクリックし、チェックアウトステップセクションをクリックします。1ページチェックアウト3ページチェックアウトから選択します。
    2.1.1.png
  2. アプリアイコンをクリックして、チェックアウトアプリ機能に切り替え「アプリを追加」をクリックします。
    2.1.2.png
  3. インストールされている適用可能なチェックアウトアプリがリストに表示されます。必要なアプリをクリックしてエディタにアクセスします。
    2.1.3.png

    Note: チェックアウトアプリを使用する前に、チェックアウト関連アプリをインストールしていることを確認してください。以下は、チェックアウト追加情報管理Plusアプリをインストールする例です。

    1. SHOPLINE App Store をクリックして、チェックアウトページカスタマイズ用のアプリにアクセスします。
      2.note.1.png
    2. 必要なアプリを選択します。この例では、「チェックアウト追加情報管理Plus」アプリを選択して、インストールします。
      2.note.2.png
    3. アプリのインターフェースで、アプリを有効化するスイッチをオンに切り替えます。
      2.note.4.png
    4. インストールが完了したら、チェックアウトエディターのアプリリストに表示されます。
  4. アプリのエディターを使用して必要な変更を行います。
    2.1.4.png
  5. アプリをチェックアウトページの好きな位置にドラッグアンドドロップします。特定のアプリは特定の位置にのみ配置できることに注意してください。
    2.1.5.png
  6. [保存] をクリックして設定を保存します。
    2.1.6.png

 

アプリの開発

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

 

アプリの削除

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

  1. チェックアウトエディターで、削除したいアプリを選択します。
    2.3.1.png
  2. アプリを削除」から [確認] をクリックします。
    2.3.2.png
  3. [保存] をクリックして変更を保存します。
Note: 上記は、チェックアウトエディターからアプリを削除する手順です。アプリを完全に削除するには、管理画面のアプリモジュールに移動してください。  

 


 

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

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

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

 

チェックアウトページをカスタマイズする方法

  1. チェックアウトエディターで、パレットアイコンをクリックしてブランドマーケティングにアクセスします。
    3.1.png
  2. 左パネルの編集モジュールを使用して、チェックアウトページをカスタマイズします。
    • チェックアウトステップ:1ページチェックアウトと3ページチェックアウトスタイルから選択します。
    • バナー:PCおよびモバイルのチェックアウトページにバナーを追加し、画像の高さと表示エリアを選択し、必要に応じてPCのフルスクリーン幅を有効にします。 
    • ロゴ:ブランドロゴをチェックアウトページにアップロードし、ロゴのサイズと配置を調整し、表示位置を選択します。
    • コンテンツ:背景画像をアップロードして背景色を選択し、入力フィールドの色を選択します。
    • 注文概要:背景画像をアップロードして背景色を選択し、モバイルモードで折りたたむか展開するかを選択します。
      Note: 背景画像、背景色、フィールドの色を変更した後、チェックアウトフィールドが表示されていることを確認してください。
    • タイポグラフィ:タイトルと本文のフォントを変更します。変更が不要な場合は、デフォルト設定に戻すことができます。
    • 色:ボタン、エラーメッセージ、ハイライトされた通知の色を選択します。
  1. [保存] をクリックして、変更を保存します。
Note: すべてのアップロードされた画像について、変更ボタンの矢印をクリックしてALT属性をさらに編集したり、画像を変更したり、画像の比率を圧縮したりできます。画像のALTタグを編集すると、検索エンジン最適化(SEO)が向上し、Webアクセシビリティスコアが向上します。

 


 

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

初めてチェックアウトエディターを作成して保存すると、管理のために管理画面のチェックアウト設定に保存されます。

 

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

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

  1. SHOPLINEの管理画面から、設定チェックアウト に移動します。
    4.1.1.png
  2. カスタムチェックアウトライブチェックアウト に移動します。次に、必要に応じて以下の設定を構成します。
    • カスタマイズ:ライブページのチェックアウトエディターにアクセスして構成します。
    • コピー:公開されたページのコピーを作成します。作成された下書きは「下書き」に表示されます。
    • その他のオプション:もっと多くのオプションアイコンをクリックし、表示を選択してストアのライブチェックアウトページを表示します。ライブページの名前を変更するには、「名前を変更」を選択します。
      4.1.2.png
  •  

 

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

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

  1. SHOPLINEの管理画面から、設定チェックアウト に移動します。
  2. カスタムチェックアウト > 下書き を見つけます。次に、必要に応じて以下の設定を構成します。
    • カスタマイズ:下書きページのチェックアウトエディタにアクセスして構成します。
    • 公開:選択したチェックアウト下書きを公開するにはクリックします。この操作により、このチェックアウトバージョンがライブになります。
    • その他のオプション:もっと多くのオプションアイコンをクリックして、プレビューコピー名前を変更、または削除を選択します。
      4.2.2.png
  •  

 

この記事は役に立ちましたか?

Need more help? Contact us via the chatbox in your admin panel.

需要更多帮助?通过您商店后台的对话框与我们联系。

Need more help? Contact us via the chatbox in your admin panel.

Need more help? Contact us via the chatbox in your admin panel.

さらにサポートが必要ですか?必要なすべてのサポートをご提供いたします。

Log In and Get Help 登录并获取支援 Log In and Get Help Log In and Get Help お問い合わせ
他にご質問がございましたら、リクエストを送信してください

コメント