多機能スライダーSwiper ver.9をカラーミーショップに設置する際の、サンプルコードを中心に解説しています。

繰り返し同じようなコードを記述し、かつ運用時にときどき更新が必要な場合に、作業効率がグンと上がるコーディングの工夫を紹介します。

サイトのメニューは一番個性が出るところで、使い勝手にかなり影響するため、いろいろと検討されると思います。カラーミーショップでは、MONOテンプレートのヘッダーメニューはペロっと出入りして、挙動がおもしろいです。MONOテンプレートをカスタマイズ時の参考になりますので解説します。

スマートフォンでスワイプできる機能「slick」や画像拡大機能「Lightbox」を実装する相談がよくあります。カラーミーショップの無料テンプレート「カラーミーキット」を使って、コードを書く場所を解説します。

楽天市場などのECサイトで見かけます。カートに入れるボタンを固定表示しておくと、カートに入れるボタンまで戻る手間がないので、押しやすくなる効果が見込まれます。

カラーミーショップの有料テンプレートで、商品の横並び数を変更した際にレイアウトが崩れることがあります。その上自分で直せないことがよくあります。意外と難しくて詳しくコードを読まないと原因不明で、わりとよく聞かれますので解説しました。

カラーミー（Organicテンプレート）で使っているCloud Zoomを借りて、画像の拡大表示をしてみました。古いプラグインなので、スマホ対応（タッチパネル、レスポンシブ）できるように、コードを書いてみました。

最近のネット利用率はスマホのほうが多いんだそうで、ネットショップもスマホ対応を考えていく必要があります。今回は商品詳細ページでスワイプ（画像送り）、ピンチアウト・ピンチイン（画像の拡大縮小）を付ける方法について紹介します。