shopify カスタマイズしてみた＃1 -topへ戻るボタンを設置-
ご覧いただきましてありがとうございます！
今回から少しnoteで記事を書いてみることに致しました！
もし少しでも「参考になった」と感じていただけた方はよろしければ私のプロフィールも見ていただけると嬉しいです。
まずは、今回初めて見ていただいたという方も多いかと思いますので、一文だけ自己紹介をさせてください、、
私は、現在制作会社にWEBデザイナーとして勤務している２０代男です。（ちなみに記事を書いた経験もないので拙い表現があっても多めに見ていただければ幸いです。。）
自己紹介はこのくらいにしておいて、本題に入ります！
今回はshopifyのカスタマイズ第１回「topに戻るボタンを設置する」です。
shopify独自の言語のLiquidを少し使用してアプリ等を使用せずにコーディングという形で組み込んでいきます。
使用するテーマはOS2.0の無料テーマ「Dawn」です。
初めに大まかな作業工程です。
①スニペットフォルダにLiquidファイルを作成する。
②作ったLiquidファイルにコードを書く。
③このLiquidファイルをレイアウトフォルダのtheme.liquidに組み込む。
これだけです！
では、説明します。
（実際に作業する前にはテーマを複製しておくことをお勧めします）
①スニペットフォルダにLiquidファイルを作成する。
管理画面のオンラインストア内のテーマ→アクション→コードを編集を選択します。
次にスニペットファイル内に任意の名前で新規のファイルを作成します。
②作ったLiquidファイルにコードを書く。
①で作ったファイル内にコードを書きます。今回私が書いたのはこんな感じです。↓
{% assign vertical_offset_for_trigger = 300 %}
<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
<i class="fas fa-chevron-up"></i>
</a>
{{ '//use.fontawesome.com/releases/v5.15.4/css/all.css' | stylesheet_tag }}
<style>
@keyframes totophover{
0%{
opacity: .7;
}
100%{
opacity: 1;
}
}
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
text-decoration: none;
color: #fff;
background-color: #6B050F;
opacity: .7;
font-size: 1em;
width:3em;
height: 3em;
-webkit-border-top-left-radius: 50%;
-webkit-border-bottom-left-radius: 50%;
-moz-border-radius-topleft: 50%;
-moz-border-radius-bottomleft: 50%;
border-radius: 50%;
z-index: 60000;
}
.back-to-top i {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.back-to-top span {
padding-left: 0.5em;
}
.back-to-top i + span {
padding-left: 0;
}
.back-to-top:hover {
text-decoration: none;
animation-name: totophover;
animation-duration: .3s;
animation-fill-mode:forwards;
}
.hide {
display: none!important;
}
</style>
<script>
(function() {
function trackScroll() {
var scrolled = window.pageYOffset;
var coords = {{ vertical_offset_for_trigger }};
if (scrolled > coords) {
goTopBtn.classList.remove('hide');
}
if (scrolled < coords) {
goTopBtn.classList.add('hide');
}
}
function backToTop() {
if (window.pageYOffset > 0) {
window.scrollBy(0, -80);
setTimeout(backToTop, 0);
}
}
var goTopBtn = document.querySelector('.back-to-top');
window.addEventListener('scroll', trackScroll);
goTopBtn.addEventListener('click', backToTop);
})();
</script>ボタンにはfont awesomeを使用、機能の実装にはjavascriptを書いています。
また、今回はサイト全体のデザインの都合上、丸型のボタンにしておりますが、ここはサイトに合わせてさらにカスタマイズしてみてください！
③このLiquidファイルをレイアウトフォルダのtheme.liquidに組み込む。
ここまでできればあとは簡単で、このファイルをレイアウトフォルダのtheme.liquidに組み込むだけです。
場所はbodyの閉じタグの直前に記入しています。
{% render 'to-top' %}（to-topはここで制作したファイルの名前なので、みなさんが作ったファイル名にあわせてください）
作業工程は以上です！（もし動かなかったらすみません、、）
参考サイト：https://ecomexperts.io/blogs/liquid-tutorial-shopify/back-to-top-button
今回はtopに戻るボタンを設置してみましたが、今後もshopifyのカスタマイズを中心に記事を書いてみたいと思います（自分の備忘録としても）。
最後に個人として活動するためにポートフォリオも作ってみました。
これまで会社でしかほとんど制作をしておらず、WORKSはないに等しいですが、これから作っていけるように頑張ります。もしこちらをご覧になっていただく中で制作を依頼したい！と思って頂ける方がいましたら、お気軽にお問い合わせください！お待ちしております
ポートフォリオはこちら↓
ご覧いただきありがとうございました！
この記事が気に入ったらサポートをしてみませんか？