shopify カスタマイズしてみた＃2 -Dawnテーマでヒーロースライダーを作成-
ご覧いただきましてありがとうございます！
今回はnoteの記事投稿２回目で題材は再びshopify カスタマイズです。
＜自己紹介＞
私は鹿児島県でwebデザイナーとして会社に勤めている20代です。同じようにwebデザイナーの方とスキルアップしたいと考えnoteでの投稿を始めました。気軽に声をかけて頂けると嬉しいです！
記事を見て頂き、「参考になった」と感じていただけた方はよろしければ私のプロフィールも見ていただければと思います。
ポートフォリオはこちら↓
それでは本題に入ります！
今回のテーマはタイトル通り「Dawnテーマでヒーロースライダーを作成する」です。
なぜ、このテーマにしたかというと、無料テーマのDebutではスライダーセクションがデフォルトでありましたが、同じ無料テーマでOS2.0のDawnには標準でスライダーが実装されておらず不便に感じていたからです。
近々テーマストアに追加されると言われているものには標準でスライダー機能があると言われています。その前に簡単なものにはなりますが、自作してみようと思います。
もう１つの理由としては、ネット上にDawn向けのヒーロースライダーを作る記事があまりなかったからです。（ただ自分のググり方が悪かっただけの可能性も大いにありますが、、）
なので、この記事が制作・ストアカスタマイズの手助けになれれば嬉しいです。
内容に入る前に実際に自作して動かしてみたものがこちらになります！
この画面では見えませんが、デフォルトでは、管理画面上でスライドを７枚まで追加可能で、スライド間の秒数を３秒から１０秒まで設定できる様にしています。
また、スライドごとにテキストを中央に配置できるようにしています。
それでは以下に手順をまとめます。
①もとになるスライダーをHTML/CSS/JSで作成する（Swiper使用）
②作ったデータをLiquidファイルに作り替える。
以上です。ぜひみなさんもチャレンジしてみてください！
では解説します。
①もとになるスライダーをHTML/CSS/JSで作成する（Swiper使用）
まず、いきなりLiquidで書くのは私の力量的に難しいので、元となるデータを作成します。
スライダーはSwiperというものがあるのでこちらをベースにしました。
作り方もサイトを上から見ていけば基本的には書いてありますので、作ってみてください！
また、スライダーにもいろいろな種類があります。作りたいものを選んでgithub内のコードを参考にしてもよいかと思います。
②作ったデータをLiquidファイルに作り替える。
①で作ったものをもとにshopifyで使うためLiquidファイルに作り替えていきます。
コードは下記に記載しますが、管理画面上でカスタマイズするために特に重要なのが、コードの下部分にあるschemaです。
コードを見てどのような仕組みになっているか確認して頂けると嬉しいです。（またコード的にちょっと怪しいな、ということがあればアドバイス頂けると幸いです。コメントアウトしたままになっているのもありますが気にしないでください笑）
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
{% for block in section.blocks %}
{% case block.type %}
{% when 'slide' %}
<div class="swiper-slide">
{{ block.settings.slide_image | img_url: '600 × 600', scale: 2 | img_tag }}
<p class="swiper-slide-txt">{{ block.settings.slide_text }}</p>
</div>
{% endcase %}
{% endfor %}
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
// Optional parameters
// direction: 'vertical',
spaceBetween: 30,
effect: 'fade',
pagination: {
el: '.swiper-pagination',
clickable: true,
},
loop: true,
autoplay: {
delay: {{ section.settings.slide_interval | times:1000 }},
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<style>
.swiper {
width: 100%;
height: 100%;
margin-top:10vh;
}
.swiper-wrapper{
/* width: 600px; */
height: 500px;
}
.swiper-slide{
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.swiper-slide img{
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-slide-txt{
font-size: 60px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
color:#000;
}
</style>
{% schema %}
{
"name": "カスタムスライド",
"class": "custom-swiper",
"settings": [
{
"type": "range",
"id": "slide_interval",
"label": "スライド間隔",
"info": "スライド毎の間隔を設定（/秒）",
"default": 5,
"min": 3,
"max": 10,
"step": 1,
"unit": "s"
}
],
"max_blocks": 7,
"blocks": [
{
"name": "スライド",
"type": "slide",
"limit": 7,
"settings": [
{
"type": "image_picker",
"id": "slide_image",
"label": "スライド画像"
},
{
"type": "text",
"id": "slide_text",
"label": "スライドテキスト"
}
]
}
],
"presets": [
{
"name": "カスタムスライド"
}
]
}
{% endschema %}
こちらが保存できましたら、実際に管理画面上から設定できるかお試しください（もし動かなかった場合は申し訳ございません、、）。
今回の作成例をもとに、エフェクトの部分をフェードからスライドなどの他のものに変更したり、全画面ではない形で作成してみるなどを行なってみても良いかと思います（私もLiquidの理解を深めるために行ってみる予定です）
とても長い記事になってしまいましたが、最後までご覧いただきありがとうございました。今後も簡単なものになりますがshopifyのカスタマイズについての記事を書いていければと思いますので今後とも宜しくお願い致します！
最後に改めてポートフォリオを掲載しておきますので、気軽に絡んでください！
ありがとうございました！！