StoreCRMのお気に入りボタンは、管理画面から色、文言、アイコン、幅などを変更できます。この設定はストアの商品ページに表示するお気に入りボタンへ反映されます。
お気に入りボタンを設定する
- StoreCRM管理画面の［お気に入り］→［お気に入り設定］を開きます。
- ［お気に入りボタン］タブを選びます。
- ボタンの文言、色、アイコン、背景などを設定します。
- 右側のプレビューで表示を確認し、［保存］をクリックします。
ボタン幅を割合で指定する
［背景があるボタンにする］をオンにすると、［ボタン幅の指定方法］で［コンテナに対する割合（%）］を選べます。幅は1〜100%で指定します。背景なしの場合は内容に合わせた自動幅になります。
商品ページにお気に入り数を表示する
［お気に入り］→［お気に入り設定］→［お気に入りボタン］を開き、［お気に入り数を表示する］をオンにします。初期設定はオフです。
- 表示文言の {count} は件数に置き換わります。例：お気に入り {count}件。文言はストアの言語ごとに設定できます。
- 表示位置はボタンの外側・内側それぞれ上下左右の8通り、間隔は0〜100pxで指定できます（初期値8px）。0件の場合に非表示にする設定もあります。
- プレビューで文言・位置・間隔を確認して［保存］をクリックします。ページを再読み込みして値が残ることと、ストアの商品ページで表示されることを確認します。
商品単位の設定では商品全体、バリエーション単位では選択中のバリエーションの有効なお気に入り数が表示されます。集計値には反映の遅延と最大60秒のキャッシュがあるため、リアルタイムの総数ではありません。標準のお気に入り操作が成功した本人の画面では件数が補正されます。
コードで件数を任意の位置に表示する
テーマを複製してから商品テンプレートに次の要素を追加します。商品IDとバリエーションIDはShopifyのLiquidで出力します。共通JavaScriptが読み込まれるよう、必要なページでApp Embed［StoreCRMの共通機能］を有効にしてください。
<span data-storecrm-favorite-count
data-product-id="{{ product.id }}"
data-variant-id="{{ product.selected_or_first_available_variant.id }}"
data-count-text="Favorites: {count}"
data-hide-when-zero="true" hidden>
<span data-storecrm-favorite-count-value></span>
</span>独立した件数要素は、ボタンの件数表示設定がオフでも表示されます。位置と余白はテーマのCSSで調整します。独自のバリエーション選択を使う場合は data-variant-id を更新し、window.storecrm.render(true) を呼び出します。取得失敗時は件数が非表示になります。
App Embedが必要な機能を確認する
商品ページに配置するお気に入り・メール再入荷・LINE再入荷の各アプリブロックは、ブロック自身が共通JavaScriptを読み込むため、App Embedがオフでも動作します。
App Embed［StoreCRMの共通機能］は、お気に入り一覧、商品ブロックがないページ、従来のお客様アカウント、全ページ共通ウィジェットなどで必要です。StoreCRMの設定画面で公開テーマの状態を確認し、必要な場合だけ［テーマで有効にする］からオンにして保存し、［再確認］を選びます。
お気に入り一覧ページを設定する
お気に入り一覧の表示は、同じ設定画面の［一覧画面］タブで変更します。コードを使わないシンプルモードと、Liquid・CSSを編集する上級者モードがあります。詳しい編集方法はお気に入り一覧ページのLiquidによるカスタマイズ方法をご確認ください。
関連ページ
Japanese 
English