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

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

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

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

外観モード

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

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

商品リスト

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

• 固定グリッドまたはウォーターフォールの表示スタイルを選択します。

• ギャラリープレビューを有効にすると、顧客は商品リスト内で商品画像を左右にスワイプして複数の画像をプレビューできます。

  注意： ギャラリープレビューは、アプリ内の商品リスト（カテゴリページ、検索結果、商品レコメンドリストを含む）に適用されます。 管理画面のプレビューではスワイプ操作は利用できません。 各商品は最大9枚の画像（メイン画像とギャラリー画像）をプレビューできます。

• 商品名の表示を有効または無効にします。
• 商品概要の表示を有効または無効にします。
• 商品評価の表示を有効または無効にします。
• クイック追加ボタンの表示有無を選択します。
• お気に入り登録アイコンの表示を有効または無効にします。

商品カード

商品カードセクションをクリックして、商品カードの表示設定を構成します。以下のオプションがあります：

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

カラースウォッチ

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

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

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

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

デザインスタイル

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

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

ボトムナビゲーション

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

• メインページのみ（ナビゲーションバーに表示されるように設定されているページ）
• チェックアウト前のすべてのページで

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

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

エクスペリエンス設定

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

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

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

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

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

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

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

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