こんにちは、カラーミーショップスタッフです。
今回は、ご要望の多い「お気に入り機能」のカスタマイズ＆活用方法について、詳しく解説します。購入者の購買意欲を後押しする「お気に入り機能」を使いこなして、売上アップを目指しましょう！
「お気に入り機能」ってどんなことができるの？
お客様が商品の「お気に入りボタン」をクリックすることで、ショップを再訪問したときに、前回気になっていた商品を「お気に入りエリア」ですぐに確認することができます。
商品詳細ページはもちろん、商品一覧や検索結果ページにも設置可能です。
一度購入を検討した商品がすぐに出てくれば、購入してもらえる可能性が高くなり、売上アップが期待できます。
本機能はアカウントページとの連携はありません。アカウントページ内でお気に入り登録商品の確認はできませんのでご了承ください。
テンプレートにお気に入り機能を設置する
お気に入り機能は、デザイン編集の上級モードでカスタマイズすれば、どのテンプレートでも設置可能です。実際にSHELF（無料版）を例に設置してみましょう。なお、ここではダウンロード直後のカスタマイズされていないテンプレートを利用します。
※HTML/CSSに触れたことのあるオーナーさまへ向けた内容になります。
設置完了すると下記のようになります。
1. お気に入りボタンを商品詳細ページへ設置する
まずは「お気に入りボタン」を商品詳細ページへ設置していきます。
前準備としてSHELF（無料版）をダウンロードして、利用できる状態にしておいてください。
- [ショップ作成] > [デザイン]から利用中テンプレートの[デザイン編集]をクリックします。
- 商品詳細のHTML編集をクリックします。
- 105行目に下記を挿入。
※全てのコードをご覧いただく場合は[view raw]をクリックください。
- 挿入したら、[更新]ボタンをクリック。
2. お気に入りボタンを商品一覧ページへ設置する
- 商品一覧のHTML編集をクリックします。
-
100行目に下記を挿入。
※商品一覧ページのため product_id=$productlist[num].id となっています。
- 挿入したら、[更新]ボタンをクリック。
3. お気に入り一覧を共通ページへ設置する
- 共通のHTML編集をクリックします。
-
377行目に下記を挿入。
※見た目についてはSHELF（無料版）に沿うよう調整されておりますので、他テンプレートへ設置する場合は便宜調整いただきますようお願いします。
- 挿入したら、[更新]ボタンをクリック。
-
❤️アイコンを表示させるための下記コードを共通のHTML編集に挿入します。（挿入場所は最下部あたり）
- 挿入したら、[更新]ボタンをクリック。
- 商品詳細ページのCSS編集をクリックします。
-
下記を挿入。
- 挿入したら、[更新]ボタンをクリック。
- 商品一覧ページのCSS編集をクリックします。
-
下記を挿入。
- 挿入したら、[更新]ボタンをクリック。
以上で設置は完了となります。
しかしショップを確認してみると、見た目が崩れた状態になっているかと思います。
ボタンのデザインは、CSSを編集して好きなように調整することができます。
4. お気に入りボタンの見た目を整える
ボタンは設置できたけど、デザインがショップの雰囲気に合わない！そんなときは、お気に入りボタンをカスタマイズしましょう。
ここでは、お気に入りボタンをMONOに実装されているハートマークに変更する方法をご紹介します。
※お気に入り一覧のデザインについては、オーナーさまご自身の責任の上で調整していただきますようお願いいたします。
❤️アイコンを表示させるためのコードを書く
商品詳細ページのお気に入りボタンの見た目を調整
商品一覧ページのお気に入りボタンの見た目を調整
これで見た目も含めて設置完了となります。ショップを確認してみましょう！
お気に入り機能マニュアルは下記になります。
→ 独自タグ一覧(PC、スマートフォン)
→ 【カスタム】追加タグ お気に入りボタンを設置する
「お気に入り機能」がすぐ使えるMONOの紹介
お気に入り機能があらかじめ搭載されているテンプレート「MONO」なら、難しいカスタマイズをすることなくすぐに使い始めることができます。
お買い求め方法
1：テンプレート追加ページ（※管理画面へのログインが必要です。）からMONOの「購入する」ボタンをクリックしてご購入ください。
2：購入が完了いたしますと、デザインページ（※管理画面へのログインが必要です。）にMONOが追加されますので、「利用する」ボタンをご選択ください。
これで、実際のショップページにMONOが適用されます。
▼下記をクリックすると、管理画面にログインします▼
※クリックしても課金は発生しません。
お気に入り機能Q&A
お気に入り機能を使いたいのですが、どうしたら良いですか？
テンプレートをカスタマイズすることでご利用可能です。お気に入り機能をご利用いただける独自タグがありますので、そちらをテンプレートに挿入してください。
本記事で設置方法を詳しく解説しておりますので、ご参照いただければ幸いです。（テンプレート「SHELF無料版」に設置する場合を例としています）
マニュアルを見ても分からないので設置をお願いしたいです
設置代行につきましてはサポート対象外となります。オーナー様ご自身での設置をお願いいたします。（HTML/CSSにつきましてはサポートの対象外となりますのでご了承ください。）
お気に入りボタンや一覧の見た目を調整したいです
CSSの調整をお願いいたします。
設置したテンプレートのCSSを調整いただくことで、見た目の変更が可能です。本記事の「お気に入りボタンの見た目を整える」も参照ください。
お気に入りに追加した商品は、どこで確認できますか？
ショップページ内お気に入り一覧の独自タグを追加した箇所になります。
カート内やアカウントページ、管理者ページ上からの確認はできませんのでご了承ください。
