カラーミーショップ
パソコンやスマホなどマルチデバイスで閲覧する基本のベース（Bootstrap）が整っていますし、シンプルなキットなので、自分好みにデザインができます。私も、何個かのショップに使っています。
必要なデザインや要素が予め入っているフレームワークになっており、HTMLの知識がある人はカスタマイズしやすいのですが、シンプルなだけに本来必要な要素が入ってないことのが少々デメリットと言えます。
カラーミーショップキットのカスタマイズ方法
ワードプレスのような仕様なら、プラグインで対応できますが、カラーミーショップのようなシステムは、手動でコードを入れる必要があります。
今回はよくサイトの右下なんかに入れて素早く画面の上の方に戻れる「トップへ戻るボタン」を追加してみます。
カラーミーショップにトップへ戻るボタンの実装方法
今回はnanoに使われているページトップボタンをそのまんま持ってきちゃいます。
テンプレートの「共通」の「ＨＴＭＬ編集」画面にて適当な場所に以下のコードをコピペで入れます。
場所は最後の＜/body＞直前あたりだと分かりやすいと思います。
<div id="pagetop" class="hidden-phone">
<a href="#wrapper" class="btn-pagetop btn btn-01"><i class="icon-lg-b icon-chevron_up"></i></a>
</div>
上記はスマホでは表示しないボタンになります。（idに入れた【hidden-phone】の部分がそれにあたります）
次に下の方にある<script>の下に
$(window).scroll(function () {
if($(this).scrollTop() > 200) {
$('#pagetop').fadeIn('fast');
} else {
$('#pagetop').fadeOut('fast');
}
});
と追加します。
これは、上から200pxほどスクロールをしたときに、フェードインで「ページトップ」を表示してね、という設定になります。
次にデザイン面を整えるために共通CSSに
#pagetop {
position: fixed;
right: 0;
bottom: 100px;
display: none;
}
.btn-01 {
border: 1px solid #fff;
background-color: #fff;
color: #444;
*background-color: #fff;
width: 100%;
border-radius: 0;
border-top: 1px #ddd solid;
border-bottom: 1px #ddd solid;
margin: 30px 0 0;
padding: 20px 0;
display: block;
}
.btn-01:hover, .btn-01:focus, .btn-01:active, .btn-01.active, .btn-01.disabled, .btn-01[disabled] {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
background-color: #ddd;
color: #444;
*background-color: #ddd;
}
.btn-pagetop {
background: #fff;
display: block;
text-align: center;
width: auto;
padding: 17px;
border: solid 1px #ddd;
}
と追加します。
.btn-pagetopを.btn-01の上に記載するとうまく表示されませんので注意です。
色なんかは適当に変えても大丈夫です。
また、矢印のマークの表示にはCSSの追加が必要です。
矢印が表示されない方はＣＳＳに
.icon-lg-b.icon-chevron_up {
background-position: -0px -216px;
}
.icon-lg-b {
background-image: url(https://img.shop-pro.jp/tmpl_img/74/icon24_b_hover.png);
}
と入れると出るかと思います。
また、ボタンは表示されるけど、上へ移動しない、という場合は、テーマに[wrapper]が使われていない可能性があります。
（全部確認していませんが、そういうテーマもあるかも）
そういう場合は、
<a href="#wrapper" class="btn-pagetop btn btn-01"><i class="icon-lg-b icon-chevron_up"></i></a>
この部分の#wrapperを、とにかくテーマの上の方に書かれているid要素にするといけるかと思います。
お試しください＾＾