1. HOME
  2. お店をカスタマイズ
  3. デザインをカスタマイズ
  4. カラーミー有料テンプレートで使われているハートのお気に入りボタンにデザインカスタマイズ

カラーミー有料テンプレートで使われているハートのお気に入りボタンにデザインカスタマイズ

  • 更新日:2017/10/10

前回ご紹介したお気に入りボタンは実装してみましたか?

まだの方はぜひ試してみて、今回ご紹介するお気に入りボタンのデザインカスタマイズを参考に自分流にアレンジしてみてください。

それでは早速デザインカスタマイズの例をご紹介していきます。

有料テンプレートMONOのハートマークが入っているお気に入りボタンを作っていきます。

ハートマークを表示するために、おまじないを記述

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

共通の一番上に、下記を貼り付けてください。

商品一覧用のボタンを設置

デザイン編集ページの【商品一覧】もしくは【商品検索結果】を上級モードで編集の[HTML CSS編集]で開いてください。

※テンプレートによって【商品一覧】か【商品検索結果】が異なります。テンプレートnanoの場合は【商品検索結果】になります。

表示させたい部分に下記を貼り付けてください。※2017.10.10修正済

CSS編集の欄に下部にを貼り付けます。

全く同じっていうのもつまらないの若干色味を変えて、さらにホバー時の動作を追加してます。

これで、カラーミー有料テンプレートMONO以上のお気に入りボタンになったでしょう 🙂

商品詳細用のボタンを設置

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

表示させたい部分に下記を貼り付けてください。

CSS編集の欄に下部にを貼り付けます。

まとめ

有料テンプレート購入しなくても有料テンプレート以上のお気に入りボタンを実装することができました。

このデザインも一例なので、まだまだカスタマイズしてご自分のショップをより可愛く、かっこよくして、たくさんお客さんを集めてください!