スライドショーを任意の場所に設置する

カラーミーショップにはスライドショー機能があり、デフォルトでは、jQueryプラグイン「bxSlider」というスライドショー機能が使えます。

ショップ作成>デザイン>スライドショー
参考)スライドショー設定 | カラーミーショップ マニュアル

出力用タグをテンプレートにコピペして設置します。
既存の有料テンプレートにはあらかじめ設置されていることもあります。

スライドショー bxSlider にできること

スライドショーにもいろいろ種類があります。種類によってできる、できないがありますが、bxSliderはスライドショー、カルーセル(横並びの小画像)、レスポンシブ対応、スマホ時のスワイプなど一通り便利機能が備わっています。

有料テンプレートにはデザインのなかにスライドショー機能が組み込まれているものがあります。
テンプレート「MODE」にはスライドショー、テンプレート「ICE」にはスライドショー、カルーセルがあらかじめ設置されています。

テンプレート「MODE」

デフォルトのスライドショーは小さめです。
設置場所を上に移動させて、より強い印象をあたえられる大画像で表示させることも可能です 。

テンプレート「ICE」

上:幅100%のスライドショー、下:カルーセル。
カルーセルはファーストビュー(一番最初に見える範囲)でたくさんの情報を伝えるのに向いています。

スライドショーの使い途

ショップサイトの第一印象はファーストビューにあります。ショップイメージ・商品イメージに関連した大きな写真を先頭に配置するデザインも理にかなっているわけです。
スライドショーに使う写真選びが特に重要です。

上の用途以外にも、スライドショーは便利に使えます。いくつか挙げてみます。

  • トップページの先頭に商品イメージに関連する大きな写真を配置
  • 画像+カテゴリーへのリンク (テンプレート「ICE」のカルーセル)
  • 購入手順の説明画像(縦長になりがちの説明ページが一画面に収まります)
  • 商品詳細ページの商品画像(スマートフォンで操作性アップ、スワイプ可能)

naeco.jpでやれること

人気の無料テンプレート「Organic」や「Bit 」 にはスライドショーが設置されていません。あとから設置することも可能ですし、bxSliderはどのテンプレートにも設置可能です。

テンプレート「MODE」のデフォルトのスライドショーは小さめです。設置場所を上に移動させて、より強い印象をあたえられる大画像で表示させることも可能です 。

テンプレート「ICE」に設置してあるような、大画像を幅100%で表示させることも可能です。

カルーセル時の表示画像数を増減できます。

執筆者

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

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴11年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

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

よく読まれているプロダクト