商品詳細ページのデザイン

商品詳細ページは、アプリ内ショッピング体験において重要な役割を果たします。よく設計された商品ページは、明確で魅力的な商品情報を提供することでコンバージョン率を向上させることができます。デザインエディターでは、お知らせバナー、商品レコメンド、最近閲覧した商品などのパーツをカスタマイズして、商品詳細ページを最適化できます。このガイドでは、設定手順と利用可能なカスタマイズオプションについて説明します。

商品ページの設定手順

アプリのための商品詳細ページをデザインするには：

1. SHOPLINE管理画面で、チャネル > Shopper App > アプリデザインに移動し、デザインをクリックしてデザインエディターを開きます。

   

2. 上部のドロップダウンメニューから商品詳細ページを選択し、必要な設定を構成し始めます。

   

3. デザインが完成したら、保存をクリックして下書きを保存するか、申請をクリックして変更を即時公開します。

   

利用可能な設定オプション

このセクションでは、商品詳細ページで設定可能なオプションについて説明します。

プレビュープロダクトの選択

商品詳細ページエディターを開くと、プレビューエリアには自動的にShopper App販売チャネルに割り当てられた最初の商品が表示されます。ドロップダウン矢印をクリックして、プレビュー用に別の商品に切り替えることができます。

トップナビゲーションの設定

トップナビゲーションモジュールでは、商品詳細ページのヘッダーに表示されるパーツをカスタマイズできます。このモジュールには、左上アイコン、中央、および右上アイコンの3つの設定可能なセクションがあります。各セクションはナビゲーションを強化し、ユーザーエンゲージメントを向上させるために設計されています。

各セクションで利用可能なパーツ

トップナビゲーションパーツの設定

以下の手順でトップナビゲーションモジュールを設定できます：

1. 商品詳細ページに移動し、トップナビゲーションをクリックしてメニューを開きます。

2. 設定したいセクションを選択します：左上アイコン、中央、または右上アイコン。

   

3. パーツタイプのドロップダウンから追加したいパーツタイプを選択します：
   • アイコン：＋追加をクリックして、最大3つの定義済みオプションを挿入します。
   • 画像：必要に応じてブランドまたはプロモーション画像をアップロードします。
   • 検索バー：定義済みの検索バーを追加して、顧客がサイトを便利に閲覧できるようにします。

4. 保存または公開をクリックして設定を適用します。

アンカーナビゲーションの設定

アンカーナビゲーションパーツは商品詳細ページでの迅速なナビゲーションを可能にし、顧客が商品情報、推奨商品、最近閲覧した商品などの特定のセクションにワンクリックでジャンプできるようにします。これにより閲覧効率が向上し、カート追加の促進につながります。

アンカーナビゲーションパーツの設定

アンカーナビゲーションセクションを設定するには、以下の手順に従ってください：

1. 商品詳細ページエディターに移動し、＋ パーツを追加 > アンカーナビゲーションをクリックします。

   

2. 右側の設定パネルにアンカー設定セクションが表示されます。

3. ＋ アンカーを追加をクリックし、リンクしたいセクション（例：商品説明、商品レコメンド、商品レビュー管理など）を選択します。

   注：デフォルトの商品アンカーに加え、さらに最大3つのアンカーを追加できます。

   

4. 各アンカーにカスタム名を入力します（例：商品、商品説明、最近閲覧した商品）。

   

5. アンカーを追加した後、以下の操作が可能です：

   • 多言語アイコンをクリックしてアンカー名の翻訳を設定します。
   • 切り替えアイコンをクリックしてリンク先のセクションを変更します。
   • 削除アイコンをクリックしてアンカーを削除します。

   

6. 設定が完了したら、右上の保存または公開をクリックして変更を適用します。

商品アルバムの設定

商品アルバムパーツは商品画像を表示し、商品詳細ページで最も重要なビジュアル要素の一つです。画像の表示方法や閲覧方法をカスタマイズして、ショッピング体験を向上させ、コンバージョンを促進できます。

• トップアプリバーのスタイル：お知らせバナーと商品画像の表示方法を制御します：
  • オーバーレイ：お知らせバナーはギャラリーの下に表示され、商品画像はヘッダーエリアにまで広がり、より没入感のある見た目になります。
  • 固定：お知らせバナーはギャラリーの上に表示され、ヘッダーと商品画像が明確に区切られたセクションとして構成されます。
• アルバムレイアウト：商品画像の表示方法を選択します：
  • フル幅レイアウト：画像が画面の全幅に広がり、より没入感のあるビジュアル体験を作り出します。
  • 分割レイアウト：画像は左右にマージンを保持し、レイアウトがより明確になり、複数のバリエーションがある商品に適しています。

• パララックススクロール効果：有効にすると、商品画像がページスクロールとは異なる速度で動き、奥行き感とより魅力的な体験を生み出します：

  • トップに固定：画像はページの上部に固定され、ページの内容がスクロールします。
  • 中央シフトモード：画像は中央に留まり、スクロール中に位置がシフトしますが、拡大縮小はされません。

  注：パララックススクロール効果は、トップアプリバーのスタイルがオーバーレイに設定されている場合のみ利用可能です。

• サムネイルナビゲーション：有効にすると、サムネイルの行が表示され、顧客が画像を素早く閲覧・切り替えできるようになります：
  • サムネイルオーバーレイ：サムネイルが商品画像エリアの上に表示されます。
  • サムネイル下部：サムネイルが商品画像の下に表示されます。
  • サムネイルサイズ：あらかじめ定義されたサイズを選択するか、お好みに応じてサムネイルサイズをカスタマイズできます。

• 没入型商品エントリー効果：有効にすると、コレクションページ、検索結果、お気に入り登録、カートなどの商品リストから商品詳細ページに入る際に、よりスムーズな遷移アニメーションが表示され、閲覧体験が向上します。

  注：没入型商品エントリー効果は、アルバムレイアウトがフル幅レイアウトに設定されている場合のみ利用可能です。

これらの機能は必要に応じて有効または無効にして、商品画像の閲覧体験を最適化できます。

お知らせバナーの設定

お知らせバナーは商品詳細ページの上部に表示され、ホームページのお知らせバナーと同期させるか、独立して設定することができます：

• ホームページお知らせバナーと同期：ホームページからテキスト、色、その他の設定を継承し、変更できません。
• 独立して設定：お知らせテキスト、色、公開時間をカスタマイズできます。特定のお知らせを表示または非表示にすることも可能です。

商品情報の設定

商品情報セクションはお知らせバナーの直下に配置されており、その位置は変更できません。

• 商品概要：商品名の下に表示される簡単な商品説明です。
• 評価：商品概要の下に表示されます。商品評価を有効にするには、商品レビュー管理アプリをインストールする必要があります。商品レビューの詳細についてはこちらのガイドをご参照ください。
• スタイル選択：動的ソースで商品グループを設定することで、複数の商品を1つの商品ページにリンクできます。この設定により、異なる商品を同じ商品ページ内に表示できます。 
  • 商品グループ – 商品オプション：データタイプ「商品」の動的ソースへのリンクをサポートします。
  • 商品グループ – オプション名：データタイプ「単一行テキスト」の動的ソースへのリンクをサポートします。

動的ソースの詳細については、メタフィールド機能の使い方ガイドをご参照ください。

商品説明の設定

• タイトルの修正と表示する商品の選択：タイトルは直接カスタマイズするか、「単一行テキスト」データタイプにリンクされた動的ソースで設定できます。特定の商品に商品説明を表示するには、条件付きタグを使用して該当する商品グループを選択してください。詳細は商品タグの設定ガイドをご覧ください。
• 表示スタイルの設定：アイコンの表示有無を選択し、お好みの表示スタイルを選べます。アコーディオンを選択した場合、デフォルト状態をすべて開く、一部開く、またはすべて閉じるに設定できます。

カスタム詳細の設定

カスタム詳細パーツを最大10個まで追加できます。

• タイトルを修正し、表示する商品を選択：タイトルは直接カスタマイズするか、「単一行テキスト」データタイプに連携された動的ソースを使用して設定できます。特定の商品グループの説明を表示するには、条件付きタグを使用して該当する商品グループを選択してください。（詳細は商品タグの設定ガイドをご覧ください。）次に、コンテンツタイプを選択します。テキストコンテンツをカスタマイズするか、対象ページへのリンクを直接入力できます。
• 表示スタイルの設定：アイコンを表示するかどうかを選択します。

連携されたカテゴリの設定

連携されたカテゴリパーツは、「商品カテゴリ」データタイプに連携された動的ソースをリンクできます。動的ソースの詳細については、メタフィールド機能の使い方ガイドをご覧ください。

カスタム画像の設定

複数のカスタム画像パーツを追加し、画像をアップロードし、遷移先ページを設定し、条件付きタグを使用して特定の商品グループに画像を表示できます。

商品動画表示

商品動画表示パーツは、「URL」データタイプで値の種類が「複数値」の動的ソースを使用して設定できます。動的ソースの詳細については、メタフィールド機能の使い方ガイドをご覧ください。

最近閲覧した商品設定

最近閲覧した商品パーツは非表示または削除できます。タイトルや表示スタイルもカスタマイズ可能です。

商品レビューの設定

商品レビューパーツを有効にするには、商品レビュー管理アプリをインストールしてください。アプリがインストールされていない場合、パーツはグレーアウトされ、画面上にインストールの案内が表示されます。（商品レビューの詳細についてはこちらの記事をご覧ください。）

商品レビュー管理および質問と回答パーツの両方で、パーツのタイトル、行動喚起ボタンのテキスト、「すべて表示」テキスト、表示するレビューまたは質問のデフォルト数を設定できます。

商品レコメンドの設定

商品レコメンドパーツを有効にするには、商品レコメンドアプリをインストールしてください。アプリがインストールされていない場合、パーツはグレーアウトされ、インストールを促す画面表示がされます。（商品レコメンドの詳細についてはこちらの記事をご覧ください。）

カスタムパーツの設定

Shopper Appの管理画面でカスタムパーツを作成し、ストアアプリの商品詳細ページに埋め込んでデザインや機能を強化できます。＋ 追加パーツをクリックし、カスタムブロックセクションで目的のパーツを選択してください。あるいは、＋ カスタムブロックを作成をクリックしてパーツエディターを開き、新しいパーツを作成できます。カスタムパーツの作成方法の詳細はヘルプセンターの記事をご参照ください。

開発中と表示されているパーツは未公開であり、ライブ版のアプリに直接適用できません。ただし、Snaplookを使ってこれらのパーツをプレビューできます。内容を確認後、コードエディターからパーツを公開し、ライブアプリに適用できます。詳細はデザインの保存と公開のセクションをご覧ください。

フローティングアイコンの設定

ユーザーがスクロールしても表示され続けるフローティングアイコンを商品詳細ページに追加できます。このアイコンはライブチャットサービスまたはキャンペーンページにリンクさせることができ、顧客サポートの効率化やキャンペーンの参加促進に役立ちます。

設定オプションは2つあります。トップページのフローティングアイコンと同期を選択すると、アイコンはトップページの設定を引き継ぎ、変更できません。独立して設定を選択すると、詳細ページ専用のフローティングアイコンを別途設定でき、以下の設定が可能です：

• 基本設定： アイコンに名前を付け、その位置を選択し、アプリに表示するアイコン画像をアップロードします。
• 機能タイプ： アイコンがリンクする先をイベントページかライブチャット機能のどちらかから選択します：
  • もしイベントページを選択した場合：リダイレクト先のページを設定します。
  • もしライブチャットを選択した場合：
    • 使用するチャットサービスを選択します。Shopper Appは現在、リアルタイムの顧客サポートのためのAI搭載ソリューションであるShulexとの連携をサポートしています。詳細はこちらのガイドをご参照ください。
    • 未読メッセージ通知を有効にするかどうかを決定します。有効にすると、未読メッセージがある場合に赤い点が表示されてユーザーに通知します。
• 有効化時間： 任意で、フローティングアイコンを公開するスケジュールを設定します。

フローティングツールバーの設定

フローティングツールバーは特定のツールバーを画面に固定し、ユーザーが閲覧中いつでも操作できるようにします。これによりユーザー体験が向上し、購入コンバージョン率の増加に繋がります。デフォルトではシステムがカート追加ボタンを提供しますが、＋コンテンツを追加をクリックしてカスタムパーツを挿入し、フローティングツールバーとして使用することも可能です。詳細な手順はカスタムパーツの設定セクションをご覧ください。

デザインの保存と公開

編集を完了し、プレビューが期待通りに表示されていることを確認したら、右上のオプションを使って次の操作を行えます：

• 保存：現在の編集内容を一時的に保存し、後で更新できるようにします。これはストアアプリのライブバージョンには影響しません。
• 公開 > Snaplookに公開：コンポーネントをSnaplookに公開してプレビューとテストを行います。ライブ公開前に機能や見た目を確認するためにこのオプションを使用してください。詳細は関連するヘルプセンターの記事をご参照ください。
• 公開 > ライブアプリに公開：変更内容をストアのライブアプリに公開し、エンドユーザーに表示されるようにします。