We value your feedback. Please take a 1-minute survey to help us improve our Help Center. Click ‘Yes’ to participate.

Yes
✕
Start Strong
Sell Smart
Manage with Ease
Market to Success

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

SHOPLINEのカスタムチェックアウト機能を活用して、顧客のチェックアウト体験をさらに向上させましょう。
チェックアウトページをブランドに合わせて最適化することで、ブランドの一貫性を保ちながら信頼感を高め、より魅力的で安心感のある購入体験を提供できます。

この記事では、顧客満足度とコンバージョン率を高めるチェックアウトページを作成する方法をご紹介します。

 

 

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

SHOPLINEチェックアウトエディタを使えば、ストアのチェックアウトページを自在に管理・最適化できます。このセクションでは、エディタへのアクセス方法とその活用方法をご紹介し、顧客にとってシームレスな購入体験を実現するためのヒントをお届けします。

 

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

SHOPLINEのチェックアウトエディタは、オンラインストアのチェックアウトページをカスタマイズできる管理ツールです。

以下の2つの主要セクションで構成されています。

  • チェックアウトアプリ：
    チェックアウトページに機能を追加するアプリをインストールできます。

    注：

    チェックアウトアプリ機能は、エンタープライズプランをご利用のストア限定です。
  • ブランドマーケティング：
    チェックアウトページのスタイル（1ページ型または3ステップ型）を選択し、デザインや外観をカスタマイズできます。

 

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

  1. SHOPLINE管理画面から、設定 ＞ チェックアウト ＞ テーマ設定 に進み、「カスタマイズ」ボタンをクリックします。
    1.1.1_EN.png

  2. チェックアウトアプリ機能にアクセスするには、アプリのアイコン（icon Checkout Apps.png）をクリックします。
    ブランドマーケティングにアクセスするには、パレットのアイコン（icon Brand Marketing.png）をクリックします。
    1.1.2_EN.png

 

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

SHOPLINEチェックアウトエディタのヘッダーバーには、チェックアウトページの見た目と機能性を整えるための便利な機能が用意されています。
1.3.png

  1. 元に戻す／やり直すボタン：
    操作を取り消したいときは「元に戻す」、再度やり直したいときは「やり直す」をクリックします。
  2. ページセレクター：
    ドロップダウンメニューから異なるチェックアウトページに切り替えて、個別にカスタマイズできます。（選択肢は「情報 → 配送 → 支払い」の3ステップ形式か、すべてを1ページにまとめた1ページ形式に応じて異なります）
  3. 表示画面アイコン：
    PC、タブレット、モバイルなど、異なるデバイスでのレイアウト表示を切り替えて確認できます。
  4. オンラインストアを表示：
    ストアのプレビューにすぐアクセスできます。
  5. 保存：
    編集内容を保存し、チェックアウトページに反映させます。

 

 

チェックアウトアプリでチェックアウト機能をカスタマイズ

顧客体験の向上、ブランド認知の強化、業務効率の改善を目的として、チェックアウトアプリ機能を使って必要なアプリを追加・設計することができます。

注：

チェックアウトアプリ機能は、エンタープライズプランをご利用のストア限定です。

 

アプリの追加と利用方法

チェックアウト機能をカスタマイズするためにアプリを追加するには、まず「SHOPLINE チェックアウトエディタへのアクセス」セクションで紹介した手順でエディタにアクセスします。

エディタ内での操作は以下の通りです。

  1. チェックアウトステップの形式を選択：パレットアイコンをクリックし、「ページレイアウト」セクションで1ページ型または3ページ型を選択します。
    2.1.1_EN.png

  2. アプリアイコンをクリックしてチェックアウトアプリ機能 に切り替え、「アプリを追加」をクリックします。
    2.1.2_EN.png

  3. インストール済みのアプリがリストに表示されるので、使用したいアプリをクリックしてエディタに進みます。
    2.1.3_EN.png

    重要：

    チェックアウトアプリを使用するには、あらかじめ管理画面でアプリをインストールしておく必要があります。

    以下に、例として「チェックアウト追加情報管理Plus」アプリのインストール手順を示します。

    1. 管理画面左下の「SHOPLINEアプリストア」をクリックし、チェックアウトページ用のおすすめアプリを表示します。
      Note 1_EN.png

    2. 使用したいアプリ（例：チェックアウト追加情報管理Plus）を選択します。
      2.note.2.png

    3. 「インストール」をクリックします。
      2.note.3.png

    4. トグルスイッチをONにして、アプリを有効化します。
      2.note.4.png

     

    インストール完了後、アプリはチェックアウトエディタ内のチェックアウトアプリセクションに表示され、利用可能になります。
  4. アプリのエディタを使って、必要なカスタマイズを行います。
    2.1.4_EN.png

  5. アプリをドラッグ＆ドロップして、チェックアウトページ上の希望する位置に配置します。
    一部のアプリは特定の場所にのみ設置可能です。
    2.1.5_EN.png

  6. 「保存」をクリックして、設定内容を保存します。
    2.1.6.png

 

アプリの開発

独自の開発チームがある場合は、チェックアウトページを自由にカスタマイズできる独自アプリの開発も可能です。

 

アプリの削除

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

  1. チェックアウトエディタで、削除したいアプリを選択します。
    2.3.1_EN.png

  2. アプリを削除する > 確認 をクリックします。
    2.3.2_EN.png
  3. 「保存」をクリックして、変更内容を保存します。

注：

この操作では、アプリはチェックアウトエディタからのみ削除されます。完全に削除するには、管理画面の「アプリ」セクションからアンインストールしてください。

 

 

チェックアウトページを強化する

チェックアウトエディタの「ブランドマーケティング」セクションでは、ページバナーやブランドロゴ、カスタムメッセージなどを追加し、独自のブランドらしさを反映したチェックアウトページを作成できます。

注：

このブランドマーケティング設定は、顧客情報ページ、注文状況ページ、およびサンキューページにも適用されます。

 

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

  1. チェックアウトエディタ内で、パレットのアイコンをクリックし、「ブランドマーケティング」セクションにアクセスします。
    3.1_EN.png

  2. 左側の編集パネルから、以下のモジュールを使ってカスタマイズを行います。
    • ページレイアウト：
      1ページチェックアウトと3ページチェックアウトのいずれかを選択します。
    • バナー：
      PC・モバイルそれぞれにバナー画像を追加し、画像の高さや表示エリアを設定できます。必要に応じて、PCでの全幅表示も有効にできます。
    • ロゴ：
      ブランドロゴをアップロードし、サイズ・位置・表示位置を調整できます。
    • チェックアウトの主要内容：
      背景画像や背景色、入力フィールドの色をカスタマイズできます。
    • チェックアウトの注文概要：
      背景画像や背景色を設定し、モバイル表示時に折りたたむか展開するかを選べます。

      注：

      背景画像・背景色・フィールド色を設定する際は、入力欄が視認できるかどうかを必ずご確認ください。
    • フォント：
      タイトルおよび本文のフォントを変更できます。不要な変更はデフォルトにリセット可能です。
    • 色：
      ボタン、エラーメッセージ、強調通知のカラーを設定できます。
  1. 編集が完了したら、右上の「保存」をクリックして変更内容を保存します。

注：

アップロードした画像は、「変更」ボタンの横にある矢印をクリックすると、以下の操作が可能です：

  • ALT属性の編集
  • 画像の差し替え
  • 圧縮比の調整

ALTタグを編集することで、SEO（検索エンジン最適化）の向上や、Webアクセシビリティスコアの改善にもつながります。

 

 

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

チェックアウトエディタを初めて作成・保存すると、その設定は管理画面内の「チェックアウト設定」セクションに保存され、以降いつでも管理・編集が可能になります。

 

公開済みチェックアウトページの管理

公開されたチェックアウトページは、「テーマ設定」セクションに保存されます。以下の手順で表示・編集・コピー・名前変更が可能です。

  1. SHOPLINEの管理画面から、設定 ＞ チェックアウト ＞ テーマ設定 に移動します。
    4.1.1_EN.png

  2. 「デフォルトプロファイル（Default Profile）」を見つけ、必要に応じて以下の設定を行います。
    • カスタマイズ：
      現在公開中のチェックアウトページを編集するために、チェックアウトエディタを開きます。
    • コピー：
      公開中のページを複製します。複製された内容は、下部の下書きモジュールに表示されます。
    • その他のオプション：
      「その他」アイコンをクリックし、「プレビュー」を選択すると、公開中のチェックアウトページを確認できます。「名前を変更」を選択すると、ページ名の変更も可能です。4.1.2_EN.png

 

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

下書き状態のチェックアウトページでは、公開前に機能構成やデザインを試すことができます。

以下の手順で設定にアクセスし、必要な構成を行ってください。

  1. SHOPLINEの管理画面から、設定 ＞ チェックアウト に移動します。
  2. 「テーマ設定」セクション > 下書きモジュール（Draft module） を見つけ、以下の操作が可能です。
    • カスタマイズ：
      下書きページのチェックアウトエディタを開き、編集を行います。
    • 公開：
      選択中の下書きを公開し、そのバージョンをストアのチェックアウトページとして反映させます。
    • その他のオプション：
      「その他」アイコンをクリックして、プレビュー、コピー、名前を変更、削除などの操作が行えます。4.2.1_EN.png