カラーミーショップにスライドショーを配置

カラーミーカスタマイズ

ネットショップで売れているお店はどういうレイアウトで、どのような見せ方をしているのか調べてみようと「カラーミー大賞2018」の授賞ショップを見てみました。

もちろん細かい部分に違いはありますが大体共通しているのは、

1・トップページに横幅いっぱいのスライドショーで目玉となる商品やサービスの紹介、

2・スライドショーの下は2カラムになっていて商品リストなどのサイドバーは左に配置が多い

といったところです。

カラーミーショップに限らず最近の主流レイアウトだなと感じます。

売れるショップ作りは売れているお店の真似から

まずはカラーミーだけで同じレイアウトを構成してみようと思います。

スポンサーリンク

カラーミーショプで使うスライドショーを作成する

有料のテンプレートを利用する手もありますが、スライドの配置ぐらいなら無料テンプレートでも簡単です。

今回はカラーミーキット(無料)テンプレートを前提で説明しますが、他のテンプレートでも大体同じです。

管理画面 > デザイン > スライドショー
カラーミー スライド

「ファイル選択」でスライドに使いたい画像を保存。
「画像単位設定」でリンクURL、文字入れ(どちらも任意)を個別登録、保存。

カラーミースライド

スライドの種類、スピードなどの設定を済ませると下側に出力用HTMLが表示されていますので、これをコピーしておき次にすすみます。ちなみにbxslider.js用のコードが生成されています。

//生成されるコードの一例です
<{if $slideshow_html}>
<div class="slider">
<{$slideshow_html}>
</div>
<script type="text/javascript">
//<![CDATA[
$(function(){
  $('#slider').bxSlider({
    auto: true,
    pause: 3000,
    speed: 1000,
    controls: false,
    captions: true,
    mode: 'fade'
  });
});
//]]>
</script>
<{/if}>

スライドショーを表示させる

管理画面 > デザイン >デザイン >テンプレート編集

スライドショーはトップページだけに表示させることがほとんどだと思いますので、その体でいきます。
HTMLの操作なので当然ながら上級者モード(HTML・CSS編集)です。

先ほどコピーしておいたhtmlコードを貼り付けるだけですのでそんな難しいものではありません。

余白や画面幅など細かい調整をしたければcssの知識が必要になりますが、とりあえず今回はコピー&ペースト + 補足だけでいける内容で書きます。

トップページだけにスライドを表示したいのですが、「トップ」のHTMLにコードを貼り付けるとサイドバーの幅だけ余白ができてしまい、横幅いっぱいにはなりません(下図)。

カラーミーショップ スライド

なので「共通」HTMLにはりつける方法をとります。
先に完成図がこちらです。きちんと横幅いっぱいになっています。

カラーミーショップ スライド

HTMLの編集

下図を参考に、先ほどコピーしたコードを「共通」のHTMLに貼り付けます。別にこの場所でなくても構いませんが、上の完成図に合わせています。

カラーミーショップ

各ページのコンテンツを表示する部分(include file = $file_name)よりも上になるので、一見すべてのページで表示されてしまいそうですが、先ほどコピーしたコードを変にいじらずそのまま貼り付けていればトップページ以外では表示されないので心配ありません。

HTMLの編集はこれで終わりですので「保存」。

スライドオプションの編集

スライド作成で生成されたコードの中で基本的なオプションは設定されていますが、必要であれば追加オプションを設定することもできます。

まず自動で設定されているオプションは以下の意味です。

Option名意味
auto自動再生するか
pauseスライド停止時間
speedスライドの変化時間
controlsスライド下のドットナビゲーション
captions「字幕」を表示するかどうか
modeフェードか横スライドか縦スライド

これだけでも問題ないですが、追加するなら以下あたり。

Option意味
autoControls下図のようなコントローラー表示(true/false)
autoHoverマウスホバーで一時停止(true/false)
pagerスライドに矢印アイコンを表示(true/false)
bxslider のサンプル画像

先程のコードにこれらオプションを追加する場合、以下のようなコードになります。

//コード例
<{if $slideshow_html}>
<div class="slider">
<{$slideshow_html}>
</div>
<script type="text/javascript">
//<![CDATA[
$(function(){
  $('#slider').bxSlider({
    auto: true,
    pause: 3000,
    speed: 1000,
    controls: false,
    captions: true,
    mode: 'fade',
    autoControls: true,
    autoHover: true,
    pager: true
  });
});
//]]>
</script>
<{/if}>
ミフネWEB
タイトルとURLをコピーしました