1. HOME
  2. お店をカスタマイズ
  3. 機能をカスタマイズ
  4. カラーミーの無料テンプレートでもできる!お気に入りボタンとお気に入り商品一覧の実装方法

カラーミーの無料テンプレートでもできる!お気に入りボタンとお気に入り商品一覧の実装方法

  • 更新日:2017/06/06

皆さんのカラーミーの店舗には、少し前から登場した「お気に入り機能」はもう実装しましたか?

今回実装可能になったお気に入り機能というのは、お気に入りボタンをクリックすることでお気に入りに登録できるという機能です。

この機能を追加することで、お客さんが気に入った商品のみを表示することが可能です。

私は、ネットショッピングをする時に「あれ?さっきの商品良かったのに、どこだっけ・・・?」というようなことが結構あるのですが、この機能があれば安心です。

さて、それでは早速実装方法の手順をご紹介をしていきます。

商品詳細ページにお気に入りに追加リンクを表示する

※今回はテンプレート『nano』を使用しています。

デザイン編集ページの【商品詳細】を上級モードで編集の[HTML CSS編集]で開いてください。

お気に入りへ追加と表示させたい箇所に下記を貼り付けてください。

これで表示されるのですが、ボタンで表示されているので素っ気ない感じ。さらには未追加なのか追加済みの状態が判別できない・・・なので、CSSで少し色をつけてみます。

下記をCSS編集の欄へ貼り付けてください。

とりあえずの色付けなのでこんな感じでご容赦ください・・・あとはお好きにカスタマイズしてください!

 

お気に入り商品を一覧表示する

次にお気に入りに追加した商品を表示する部分を作ります。

今回は商品詳細ページの下部に、お気に入り商品の一覧を表示させます。

それでは、デザイン編集ページの【商品詳細】を上級モードで編集の[HTML CSS編集]で開いてください。

商品詳細ページの下部にを貼り付けます。

レイアウトも若干整えるためにCSS編集の欄に下部にを貼り付けます。

これで閲覧者がお気に入り登録した商品が表示されます。

商品一覧ページに表示する場合は・・・

商品詳細ではなく商品一覧でたくさん商品が表示されている所に表示させたいという場合は、下記を一覧に貼り付けてください。

まとめ

有料テンプレートMONOには標準実装されている機能ですが、無料テンプレートにも簡単に組み込める機能なのでぜひ試してみてください。

今回紹介したデザインはあくまでもわかりやすくする程度のデザインなので、デザインをカスタマイズして使用しているテンプレートにピッタリのお気に入りボタンを追加してみてください!