近年はスマートフォンからの閲覧が過半数を超えていて、スマートフォン対応が必須になっています。
商品詳細ページの商品画像をスワイプできるとお客様の利便性が向上しますので、昨今のネットショップではほとんどでついています。

カラーミーショップにも当然必要なスマートフォン対応だと考えられます。

デモページを用意しましたので、スマ―トフォンで閲覧して操作感などを参考にしてください。
商品画像をスワイプ（デモページ）

スワイプ機能の実装について

スワイプ機能は、一般的に普及しているjQueryプラグイン（slick、bxSliderなど） を使って実装します。
slick、bxSliderは、プラグインがカラーミーショップ上にすでにアップロードされていて、アップロード用のウェブサーバー（ファイルの置き場所）が不要な点も便利です。

実装する機能について

メイン画像（大画像）とサムネイル画像（大画像下の小画像）が連動して、サムネイル画像をクリックした際にメイン画像の表示が変わります。

サムネイル画像については、以下の二通りから選べます。
カラーミーショップの既存テンプレートではサムネイル画像をタイル状に並べるのがデフォルトです。

• タイル状に並べる （サムネイル画像が多い場合に場所をとるので注意！）
• 一列横並びのカルーセルにする（省スペースで、スマートフォン閲覧時に向いています）

スワイプ時の画像切替アニメーションは二通りから選べます。

• フェード
• スライド

画像送りする左右の矢印は画像を置き換え可能です。置き換えのご要望があれば、好みの画像をご用意ください。

その他注意点

スワイプ機能とは直接関係ありませんが、画像は大きいサイズで縦横比を揃えると見栄えがよいです。

制作物用のお問い合わせボタン

えいじ@naeco.jp　この記事を書いた人

機能実装のお手伝いをしています。お気軽にご相談ください。
追加の要望や設置場所の状態によって、お見積り金額は変動します。

ご相談・お問い合わせはこちら