お気に入り登録：スタイル設定の構成

お気に入り登録アプリでは、オンラインストアでの優れた表示効果のために、お気に入り登録ボタンの外観をカスタマイズできます。この記事では、このアプリとその設定について説明します。

お気に入り登録の外観をカスタマイズする

お気に入り登録 > スタイル設定 > お気に入り登録に移動します。

ナビゲーションバーの表示

ナビゲーションバーに表示されるお気に入り登録アイコンのスタイルをカスタマイズできます。以下の設定が利用可能です：

• アイコンスタイル：選択できるアイコンスタイルは3つあります。
• アイコン名の表示：チェックを入れると、お気に入り登録アイコンの横に名前情報が表示されます。
• 名前表示位置：アイコンの右側または下に名前を表示することができます。
• お気に入り登録の商品の合計数を表示：チェックを入れると、お気に入り登録アイコンの横にお気に入り登録の商品の合計数が表示されます。

商品リストの表示

商品リストに表示されるアイコンのスタイル、色、位置をカスタマイズできます。以下の設定が利用可能です：

• お気に入り登録ボタンを表示：無効にすると、商品リストページにお気に入り登録アイコンは表示されません。
• アイコンスタイル：選択できるアイコンスタイルは3つあります。
• アイコンの色：顧客が商品をお気に入り登録に追加する前後のアイコンの色を設定します。
• 表示位置：アイコンが商品リストの画像に重なる表示位置を切り替えるためにクリックします（左上、左下、右上、右下）。

商品ページの表示 

商品詳細ページでのお気に入り登録の表示方法を設定できます。アイコンスタイル、ボタンの色、ボタンのテキスト、表示位置を含みます。

Note: サポートされている設定は、ストアのテーマバージョンによって若干異なる場合があります。現在使用しているテーマバージョンに基づいて設定を構成してください。

OS 2.1およびそれ以前のテーマに適用

• ボタンアイコンスタイル： システムは選択できる3つのアイコンスタイルを提供します。
• ボタンの色： 顧客が商品をお気に入り登録に追加する前後で、ボタンの色を別々に設定できます。
• ボタンテキストの表示： 選択すると、下に設定されたボタンテキストがアイコンの横に表示されます。選択しない場合は、お気に入り登録アイコンのみが表示されます。
• お気に入り登録に追加したユーザーの数を表示： 選択すると、商品をお気に入り登録に追加したユーザーの数が表示されます。
• PCでの表示位置： 顧客がPCでボタンを見る位置です。カートに追加ボタンの下または商品画像の上のいずれかを選択できます。
• モバイルでの表示位置： 顧客がモバイルデバイスでボタンを見る位置です。カートに追加ボタンの下または商品画像の上のいずれかを選択できます。

Note: PCまたはモバイルの表示位置が商品画像の上に設定されている場合、ボタンテキストは表示されません。

OS 3.0テーマに適用

利用可能な設定は、一般的にOS 2.1およびそれ以前のテーマと同じです。ただし、OS 3.0テーマはボタンの表示位置に対してより柔軟なカスタマイズオプションを提供します。詳細は以下をご覧ください：

• ボタンアイコンスタイル： システムは選択できる3つのアイコンスタイルを提供します。
• ボタンの色： 顧客が商品をお気に入り登録に追加する前後で、ボタンの色を別々に設定できます。
• ボタンテキストの表示： 選択すると、下に設定されたボタンテキストがアイコンの横に表示されます。選択しない場合は、お気に入り登録アイコンのみが表示されます。
• お気に入り登録に追加したユーザーの数を表示： 選択すると、商品をお気に入り登録に追加したユーザーの数が表示されます。

• 表示設定： 表示設定 > モードの下で、次のいずれかのオプションを選択できます：

  Note: システムはテーマバージョンを自動的に検出します。このオプションはOS 3.0テーマを使用している場合にのみ利用可能です。OS 3.0テーマを使用していない場合、PC / モバイルの表示位置のみ設定できます。

• 自動： お気に入り登録はアプリのデフォルトルールに基づいて商品詳細ページに表示され、追加の設定は必要ありません。

  Note: PCまたはモバイルの表示位置が商品画像の上に設定されている場合、ボタンテキストは表示されません。

  • PCでの表示位置： 顧客がPCでボタンを見る位置です。カートに追加ボタンの下または商品画像の上のいずれかを選択できます。
  • モバイルでの表示位置： 顧客がモバイルデバイスでボタンを見る位置です。カートに追加ボタンの下または商品画像の上のいずれかを選択できます。

• カスタム： 選択すると、テーマエディタに移動し、お気に入り登録ボタンを追加アプリブロックを商品詳細ページに手動で追加して、お気に入り登録の位置とレイアウトをカスタマイズする必要があります。

  Note: カスタムを選択しても、テーマエディタに対応するアプリブロックを追加しない場合、お気に入り登録機能は正しく表示されません。

OS 3.0テーマに推奨されるカスタム表示位置

アプリでカスタムを選択すると、OS 3.0テーマエディタを使用して商品詳細ページのさまざまなロケーションにお気に入り登録ボタンを柔軟に配置できます。以下は、一般的で推奨される3つの表示方法と設定手順です。

商品画像レイヤーの上に表示

1. テーマエディタで商品詳細ページに移動し、商品> 商品メディアファイル> 商品ファイルオーバーレイに進み、お気に入り登録ボタンを追加アプリブロックを追加します。
2. 追加したお気に入り登録ボタンを追加アプリブロックをクリックして、商品画像上でのボタンの表示方法を選択します。ボタンスタイルまたはアイコンスタイルを含みます。

購入ボタンの下に表示

1. テーマエディタで商品詳細ページに移動し、商品> 商品情報に進みます。
2. 購入ボタンパーツの下にカーソルを合わせて、＋アイコンをクリックし、アプリを選択して、お気に入り登録ボタンを追加アプリブロックを見つけて追加します。

商品タイトルまたは価格の隣に表示

現在、テーマエディタはコンポーネントの横並びレイアウトをサポートしていないため、コンテンツコンテナコンポーネントを使用して、タイトルまたは価格をお気に入り登録ボタンの隣に配置する必要があります。以下の手順に従ってください：

1. テーマエディタで商品詳細ページに移動し、商品> 商品情報に進みます。コンポーネントにカーソルを合わせて、＋アイコンをクリックし、テーマ> コンテンツコンテナを選択します。
2. コンテンツコンテナの下で、＋コンテンツを追加をクリックし、テーマを選択して、必要に応じてタイトルまたは価格コンポーネントを追加します。
3. 再度コンテンツコンテナにカーソルを合わせて、＋アイコンをクリックし、アプリを選択して、お気に入り登録ボタンを追加アプリブロックを見つけて追加します。これでタイトル + お気に入り登録ボタンまたは価格 + お気に入り登録ボタンを含む結合コンテナが作成されます。
4. コンテンツコンテナをクリックし、設定パネルでレイアウト方向を設定します。コンポーネントを横並びで表示するために横レイアウトを選択します。必要に応じて、配置、間隔、その他のスタイル設定を調整することもできます。

お気に入り登録の表示

顧客のお気に入り登録内に表示されるクイックビューボタンとそのテキストをカスタマイズできます。以下の設定が利用可能です：

• クイックビュー：有効にすると、顧客はお気に入り登録から商品詳細をすぐに確認し、直接購入できます。この機能は、Seed、Charm、Modernなどの特定のテーマではサポートされていない場合があります。
• クイックビューボタンテキスト：顧客に表示されるクイックビューボタンのテキスト。

お気に入り登録の共有

お気に入り登録> 設定> 共有設定に移動します。

顧客がFacebook、X、またはメールを通じてお気に入り登録を共有できるように選択できます。

設定が完了すると、顧客はお気に入り登録を表示する際にこれらのチャネルを使用して共有できます。


 

重要：ストアをデザインする際は、お気に入り登録（削除しないでください）ページを削除しないでください（顧客はストアフロントで「お気に入り登録」を見ることができます）。そうしないと、顧客はお気に入り登録機能を正しく使用できなくなり、削除後にページを復元することはできません。