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

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

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

お気に入り登録 > カスタムデザイン > お気に入り登録に移動します。

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

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

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

商品リストの表示

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

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

商品ページの表示

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

注：対応している設定は、ストアのテーマバージョンによって若干異なる場合があります。現在ご利用のテーマバージョンに基づいて設定を行ってください。

OS 2.1 以前のテーマに適用

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

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

OS 3.0 テーマに適用

利用可能な設定は、一般的にOS 2.1以前のテーマと同じですが、OS 3.0テーマではボタンの表示位置のカスタマイズがより柔軟に行えます。詳細は以下をご覧ください：

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

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

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

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

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

  • PC版の表示位置：顧客がPC版でボタンを見る位置です。「カートに追加ボタンの下」か「商品画像の上」から選択できます。
  • モバイルの表示位置：顧客がモバイルでボタンを見る位置です。「カートに追加ボタンの下」か「商品画像の上」から選択できます。

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

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

OS 3.0 テーマ向け推奨カスタム表示位置

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

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

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

購入ボタンの下に表示

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

商品タイトルまたは販売価格の横に表示

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

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

お気に入り登録の表示

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

• クイックビュー：有効にすると、顧客はお気に入り登録から商品詳細を素早く確認し、直接購入することができます。この機能はすべての3.0テーマおよび選択された2.1テーマで利用可能です。
• クイックビューボタンのテキスト：顧客向けにクイックビューボタンに表示されるテキストです。

お気に入り登録の共有

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

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

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


 

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