- Shopifyのテーマのデフォルトスライダー、使いやすいけどもっとリッチにしたい！
- どのサイトも似たような印象になってしまう…
このような方のための記事です。
今回は、オリジナルのスライダーを作る方法を紹介します。
たった3ステップで完成しますので初心者の方でも簡単に実装できます。
スライダーはサイトの印象を大きく左右します。
この方法を使えば、あなたのサイトを他と差別化できるはずですのでぜひ参考にしてみてください。
見本
画像のような左右が見切れているスライダーを追加していきます。
theme.liquidにCDN追加
まずはtheme.liquidにCDNを追加します。
今回使用するスライダープラグインはsplideです。
splideの公式ページからCDNをコピーしてきます。
CDNコピペ用(2024/06/22現在)
<script src="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css
" rel="stylesheet">Shopifyに戻ってテーマのコードを編集からtheme.liquidを開いて、コピーしてきたコードを貼り付けます。
これでCDNの導入は完了です。
スライド用のliquidを追加
次にLiquidスライダーを設置します。
セクションディレクトリの中に「splide.liquid」を追加してください。
もともとのコードはすべて削除して、下記のコードをコピペしてください。
{{ 'splide.css' | asset_url | stylesheet_tag }}
<!-- splide-slider.liquid -->
<div class="splide" role="group" aria-label="{{ section.settings.slider_label }}">
<div class="splide__track">
<ul class="splide__list">
{% if section.settings.slide_1_image != blank %}
<li class="splide__slide">
<img src="{{ section.settings.slide_1_image | img_url: 'master' }}" alt="{{ section.settings.slide_1_text }}">
</li>
{% endif %}
{% if section.settings.slide_2_image != blank %}
<li class="splide__slide">
<img src="{{ section.settings.slide_2_image | img_url: 'master' }}" alt="{{ section.settings.slide_2_text }}">
</li>
{% endif %}
{% if section.settings.slide_3_image != blank %}
<li class="splide__slide">
<img src="{{ section.settings.slide_3_image | img_url: 'master' }}" alt="{{ section.settings.slide_3_text }}">
</li>
{% endif %}
</ul>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
new Splide(".splide", {
autoplay: true,
type: "loop",
pauseOnHover: false,
pauseOnFocus: false,
interval: 5000,
speed: 2000,
padding: "20%",
gap: 20,
breakpoints: {
749: {
perPage: 1,
padding: 0,
}
}
}).mount();
});
</script>
<!-- セクション設定 -->
{% schema %}
{
"name": "Splide Slider",
"settings": [
{
"type": "text",
"id": "slider_label",
"label": "スライダーのラベル",
"default": "実績を紹介するスライダー"
},
{
"type": "image_picker",
"id": "slide_1_image",
"label": "スライド 1 の画像"
},
{
"type": "image_picker",
"id": "slide_2_image",
"label": "スライド 2 の画像"
},
{
"type": "image_picker",
"id": "slide_3_image",
"label": "スライド 3 の画像"
}
],
"presets": [
{
"name": "左右見切れるスライダー"
}
]
}
{% endschema %}これでliquidの追加は完了です。
CSSの記述
スライドのサイズ調整のCSSを記述していきます。
アセットディレクトリの中にsplide.cssを追加して下記のコードをコピペしてください。
/* スライドのサイズ調整 */
.splide__slide img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 16/9;
}これでCSSの導入は終わりです。
実装
テーマのカスタマイズ画面を確認すると、「左右見切れるスライダー」が追加出来ます。
あとは任意の画像を3枚追加してみてください。
これですべての工程は終了です。
お疲れさまでした！
まとめ
今回はShopifyで左右が見切れているスライダーの実装方法について紹介しました。
このスライダーを実装するだけで、少しサイトをリッチに見せることができるので、参考にしてみてください。
このブログでは他にもshopifyに関する記事を書いていますので、あわせて参考にしてみてください。
