カラーミーテンプレート02. Sidebar
回遊性を重視した２カラムのテンプレートです。商品点数やカテゴリーが多いショップに向いています。オーソドックスなレイアウトですが、フリーページの記事一覧を実装し、SEOにも向いています。
スライドショーを任意の場所に設置する
カラーミーショップにはスライドショー機能があり、デフォルトでは、jQueryプラグイン「bxSlider」というスライドショー機能が使えます。 設置場所や表示サイズなどを調整します。
タッチ操作できる商品詳細ページを作る
重要度が増すスマートフォン対応として、商品ページの画像送りをスワイプ、画像の拡大縮小をピンチアウト・ピンチインでできるように機能を実装します。操作感を確かめられるデモあり。
商品画像をスワイプする
商品画像をスワイプできれば、お客様の利便性が向上します。カラーミーショップの商品詳細ページにある画像をbxSliderに置き換えることで実装できます。デモあり。
オプション項目をボタン入力する
カラーミーショップにおいて、オプション項目関連のカスタマイズを検討することはよくあります。今回はオプション項目をボタンで入力する例を考えてみます。
名入れ機能で複数項目入力する
オーダーメイドの商品で、お客さまに入力してもらいたい項目が多い場合にオプションと組み合わせます。文字数制限内でしたら何項目でも送信できます（要レギュラープラン以上）。
商品一覧にカートボタンを付ける
トップページや商品一覧ページに表示される商品リストに、どこでもカラーミーを使ってカートボタンを設置する方法です。商品詳細ページに移動することなく、このページでカートに入れられます。
プルダウン形式時にオプション価格を表示する
プルダウン形式の場合は販売価格がページに表示されていないことが多いです（商品説明文内に記載しておく必要があります）。オプション選択時に販売価格を反映するカスタマイズを行います。
レビューの星表示
カラーミーショップには標準でレビュー機能があります。わりとあっさりとしたレビュー表示をしたい場合は、今回のレビューの星表示を検討されてはいかがでしょうか。
「商品説明」欄で使うHTML・CSSを作る
タイトル行、画像・キャプション、要素の横並び、レスポンシブ対応、文字飾りなどを行います。HTML・CSSでレイアウトを行って、「商品説明」欄に入れるコードを一つ作ります。