こんにちは、竹内です。
今日は商品一覧・商品詳細ページに、商品PRアイコンを追加するカスタマイズについてご紹介します。
商品の良さを伝えるため、丁寧な商品ページづくりを心がけたいものですが、あまりにも沢山テキストが並んでいると画面がごちゃごちゃとして、読む気が起こらない…となることがあります。
そんなとき、PRしたいポイントをアイコンにすれば、画面がすっきりまとまり、わかりやすくなります。
商品の良さをユーザーに簡潔に伝えることができるのと、運用の手間がかからなくなるという、一石二鳥のカスタマイズです（*´∀｀*）
PRしたいポイントを複数のアイコンで表示！
商品一覧ページにアイコンを追加
上の画像はカスタマイズ後の商品一覧ページの画面です。
商品名の上部にアイコンを表示するエリアを追加し、セール品やおすすめ商品などのアイコンを配置しています。
また、これらのアイコンは1商品につき複数表示することができます。
商品詳細ページ
商品詳細ページでも同じように、商品名の上部にアイコンを表示しています。
管理画面から簡単に設置でき、運用の手間も少ない！
このアイコンは、管理画面で設定しています。
アイコン表示用の「属性」を作成し、アイコンにしたい項目名を予め用意しておきます（「sale」や「new」など）。
その項目名と同じファイル名のアイコン（「sale.png」や「new.png」など）を作成し、サーバ内の所定のディレクトリに配置しておきます。
そして商品管理画面で、アイコンとして表示したい項目名を選択するだけで、それに対応するアイコン画像が表示される仕組みになっています。事前の設定・準備はあれど、実際に商品を追加・更新する段階で、アイコンを表示するための手間はほとんどかかりません。
「Sale」や「New」などの、汎用性の高いアイコン以外にも「カラー展開あり」「サイズ展開あり」などのアイコンがあればユーザーが商品を探すときの助けになります。
また「人気につき品薄」「スタッフのおすすめ」などのアイコンがあれば、思わず興味をひかれて商品をチェックしたくなってしまいますね！