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

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

商品ページの設定手順

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

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

   

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

   

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

   

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

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

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

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

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

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

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

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

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

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

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

   

3. パーツタイプのドロップダウンから、追加したいパーツタイプを選択します：

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

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

商品アルバムのトップアプリバーのスタイル設定

商品アルバムのトップアプリバーのスタイル設定は、お知らせバナーが商品ギャラリーに対してどのように表示されるかを制御します。

• オーバーレイ：お知らせバナーは商品ギャラリーの下に表示され、商品画像がヘッダーエリアを覆うように拡大されます。
• 固定：お知らせバナーは商品ギャラリーの上に表示され、ヘッダーと商品ギャラリーが2つの明確なセクションに分かれます。

お知らせバナーの設定

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

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

商品情報の設定

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

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

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

商品説明の設定

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

カスタム詳細の設定

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

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

関連カテゴリの設定

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

カスタム画像の設定

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

商品動画の表示

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

最近閲覧した商品設定

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

商品レビューの設定

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

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

商品レコメンドの設定

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

カスタムパーツの設定

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

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

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

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

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

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

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

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

デザインの保存と公開

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

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