PageSpeed Insightsのパフォーマンス改善
PageSpeed Insightsの「パフォーマンスの問題を診断する」を使って、カラーミーのページのを分析し、改善します。
商品詳細
タッチ操作で画像拡大できる商品詳細ページを作る
スマートフォン対応として、商品ページの画像送りをスワイプ、画像の拡大縮小をピンチアウト・ピンチインできるように機能実装。デモあり。
商品画像をスワイプする
商品画像をスワイプできれば、お客様の利便性が向上します。カラーミーショップの商品詳細ページにある画像をbxSliderに置き換えることで実装できます。デモあり。
レビューの星表示
カラーミーショップには標準でレビュー機能があります。わりとあっさりとしたレビュー表示をしたい場合は、今回のレビューの星表示を検討されてはいかがでしょうか。
プルダウン形式時にオプション価格を表示する
プルダウン形式の場合は販売価格がページに表示されていないことが多いです（商品説明文内に記載しておく必要があります）。オプション選択時に販売価格を反映するカスタマイズを行います。
出荷予定日を表示する
出荷予定日を表示することは、お客様に安心して購入してもらえる効果があります。カラーミーに機能はないので自前で作ります。
スマホ時にフッターにカートボタンを設置
スマートフォン閲覧時に、フッターに機能を固定表示するカスタマイズは楽天市場などのECサイトで見かけます。カートに入れやすくなります。
オプション項目をボタン入力する
カラーミーショップにおいて、オプション項目関連のカスタマイズを検討することはよくあります。今回はオプション項目をボタンで入力する例を考えてみます。
名入れ機能で複数項目入力する
オーダーメイドの商品で、お客さまに入力してもらいたい項目が多い場合にオプションと組み合わせます。文字数制限内でしたら何項目でも送信できます（要レギュラープラン以上）。
「商品説明」欄で使うHTML・CSSを作る
タイトル行、画像・キャプション、要素の横並び、レスポンシブ対応、文字飾りなどを行います。HTML・CSSでレイアウトを行って、「商品説明」欄に入れるコードを一つ作ります。