グローバルテーマ設定の構成方法

Shopper Appでは、テーマ設定ページでアプリの全体デザイン設定を行うことができます。ここでは、デフォルトのアプリの外観を選択し、商品カードや下部ナビゲーションの表示スタイルを選び、触覚フィードバックを有効にすることができます。

テーマ設定ページへのアクセス

SHOPLINE管理画面から、アプリ > Shopper App > アプリデザインに進み、デザインボタンをクリックしてデザインエディターにアクセスします。左のサイドバーで六角形のアイコン（テーマ設定）をクリックしてテーマの設定を開始します。

外観モード

カラーセクションで、ダークモード（デフォルトでは無効）を有効にできます。有効にしたら、ユーザーがアプリを開いたときのデフォルトの表示モードを設定します。以下のオプションから選択可能です：

• ユーザーのシステムのデフォルト設定に従う
• ライトモードを表示
• ダークモードを表示

商品リスト

アプリ全体の商品の表示設定を構成するには、商品リストセクションをクリックします。これらの設定は、アプリのトップページのカテゴリおよび商品パーツ、検索結果、商品レコメンド、カートレコメンド、お気に入り登録ページに適用されます。以下の設定をカスタマイズできます：

商品リストの設定は2つのタブに分かれています：

• デフォルトレイアウトは、1列表示、2列表示、および段差レイアウトのリストビューに適用されます。
• 3列レイアウトは、3列表示のリストビューのみに適用され、表示オプションは簡略化されています。

デフォルトレイアウト

デフォルトレイアウトタブは、1列表示、2列表示、および段差レイアウトのリストビューに適用されます。

以下の表示オプションを設定できます：

• 表示スタイル：商品一覧のレイアウトとして、固定グリッドとウォーターフォールのいずれかを選択します。
• ギャラリープレビュー：顧客が商品一覧から直接、左右にスワイプして追加の商品の画像をプレビューできるようにします。
• 商品名：商品名の表示・非表示を切り替え、表示する行数を設定します。
• 商品概要：商品名の上または下に簡単な商品説明を表示します。
• 商品評価：対応している商品レビュー管理アプリからの顧客評価を表示します。
• クイック追加ボタン：クイック追加ボタンまたはアイコンを表示し、顧客が商品一覧から直接カートに商品を追加できるようにします。
• お気に入り登録アイコン：お気に入り登録アイコンを表示し、商品カードのどこに表示するかを選択します。

1行3商品レイアウト

1行3商品レイアウトタブは、リストレイアウトで1行3商品レイアウトが選択されている場合にのみ適用されます。商品画像の視認性を最大化するため、このレイアウトでは設定項目が簡素化されています。

以下の設定を構成できます：

• 商品名：商品名の表示・非表示と表示する行数を設定します。
• 商品評価：対応している商品レビュー管理アプリから顧客の評価を表示します。
• クイック追加商品：より速く購入できるようにクイック追加ボタンまたはアイコンを表示します。
• お気に入り登録アイコン：お気に入り登録アイコンを表示し、商品カードのどこに表示するかを選択します。

商品カード

商品カードセクションをクリックして、商品カードの表示設定を行います。以下のオプションが利用可能です：

• 商品画像の比率を設定します。
• 販売価格の表示方法を選択し、比較販売価格の表示を有効または無効にします。
• 商品タグの表示を有効または無効にし、タグの位置を選択します。
• バッジのスタイルをカスタマイズし、その位置を選択します。
• 今すぐ購入機能を有効または無効にして、顧客が商品詳細ページおよびクイック追加カートパネルから直接購入できるようにし、ボタンの順序を設定します：
  • カートに追加が左側、今すぐ購入が右側
  • 今すぐ購入が左側、カートに追加が右側

カラースウォッチ

カラースウォッチセクションでは、商品リストおよび商品詳細ページを含むアプリ全体で商品カラーオプションの表示方法を制御できます。これらの設定は、顧客がカラーのバリエーション商品を閲覧する際に、一貫性のある明確な視覚体験を提供するのに役立ちます。

以下の設定を構成するには、カラースウォッチセクションをクリックしてください：

• 商品画像の比率: 商品カードおよび商品詳細ページに表示されるカラースウォッチの形状を選択します：
  • 四角形
  • 丸形
  • 商品画像に合わせる（商品画像の形状を継承）
• 商品一覧 – カラースウォッチのサイズ: カテゴリや検索結果などの商品一覧関連ページに表示されるカラースウォッチのサイズを選択します。プリセットサイズ（S、M、L）から選択して簡単に設定するか、カスタムを選択してデザインニーズにより合ったサイズを定義できます。
• 商品詳細 – カラースウォッチのサイズ: 商品詳細ページに表示されるカラースウォッチのサイズを選択します。プリセットサイズ（S、M、L）から選択して簡単に設定するか、カスタムを選択してデザインニーズにより合ったサイズを定義できます。

このセクションで行った変更はプレビューパネルにリアルタイムで反映され、ライトモードとダークモードを切り替えて公開前に最終的な見た目を確認できます。

デザインスタイル

デザインスタイルセクションでは、以下の要素に角丸効果を適用できます：

• パーツの角
• 商品画像の角
• ボタンの角

ボトムナビゲーション

ボトムタブナビゲーターセクションでは、ボトムナビゲーションバーの表示方法を選択します：

• メインページのみ（ナビゲーションバーに表示が有効なページ）
• チェックアウト前のすべてのページで表示

ハプティックフィードバック

ハプティックフィードバックを有効にすると、顧客が商品をショッピングバッグやお気に入り登録に追加するなどの特定の操作を行った際に、触覚による振動を提供できます。

エクスペリエンス設定

エクスペリエンス設定セクションでは、商品詳細ページでのインタラクション動作を設定できます。これには、カート追加時のフィードバックの表示方法やカートアイコンのアニメーションの有効化が含まれます。これらの設定は全体的なユーザー体験の最適化に役立ちます。

バリエーション選択の最適化を設定する

バリエーション選択の最適化の下にあるユーザーの属性プリファレンスを記憶するは、アプリが顧客の特定のバリエーション属性（例：サイズ）に対する直近の選択を記憶し、顧客が他の商品を閲覧した際にその値を自動的に事前選択します。これにより、同じバリエーション属性を繰り返し選択する手間が減ります。

• このオプションはデフォルトで無効になっています。有効にした後、＋属性をクリックして1つのバリエーション属性（例：サイズ）を選択します。アプリはその属性に対する顧客の直近の選択を記憶します。
• 属性セレクターは、ストアでよく使われるバリエーション属性をリストアップし、使用頻度順に並べ替えます。購入決定に最も影響を与え、顧客が最も頻繁に選択する属性（例：サイズ、次いでカラー）を選択することを推奨します。
• 例：顧客が以前にサイズ：Sを選択していた場合、アプリは別の商品でS/M/Lのサイズオプションがあるときに自動的にSを事前選択します。顧客が選択をMに変更すると、記憶された値はMに更新されます。

カート追加フィードバックの設定

商品をカートに正常に追加した後、顧客にどのように通知するかを選択できます：

• クラシックトースト：閲覧体験を妨げない軽量な通知を表示します。
• 没入型アニメーション：商品がカートに追加されたときにアニメーションを表示し、インタラクティブ性を高めます。現在のページがこのアニメーションをサポートしていない場合は、システムがクラシックトーストにフォールバックします。
• 確認モーダル：確認ポップアップを表示し、顧客を次のステップ（例えばカートへ移動）に案内します。

ストアのニーズと望ましいユーザー体験に最も適したオプションを選択してください。

カートアイコンアニメーションの設定

カートアイコンアニメーションが有効になっている場合、商品がカートに追加された後にカートアイコンがアニメーションを表示し、より明確な視覚的フィードバックを提供します。

この機能はトグルで有効または無効にできます。