スライダーの表示・非表示を日時指定する方法｜コピペで使えるShopify Tips
- Shopify
- Tips
- コピペ
- スライダー
- 日時指定
- 簡単
- 開発
目次
1. はじめに
1.1 記事について
Webサイト構築において、スライダーは非常にポピュラーなセクションの一つです。
特にTOPページのファーストビューに多用されており、あなたも一度は目にしたことがあるのではないでしょうか。
スライダーには「〇〇% OFF！」や「今季最新作」のようなキャンペーン告知のスライドや、特に売り出したい商品の特集のスライドが設置されることが多く、限られたスペースに多くの情報を掲載することができることが便利なところです。
しかし、多くのEC運営ご担当者さまが抱える問題として、告知スライドの設定漏れや削除漏れがあります。
特に削除漏れの場合、キャンペーン期間が終了しているにもかかわらず、その告知スライドが表示されたままだと、サイト訪問者を終了したキャンペーンページへ誘導してしまい、お客様との関係にヒビを入れてしまうことが考えられます。
そこで本記事では、Shopifyのストアに簡易的なスライダーを設置し、さらに日時を指定してスライドの表示・非表示をコントロールする方法をご紹介します。
コピペするだけである程度のスライダーを実装できるようなコードサンプルを用意しましたので、ぜひご活用ください。
なお、本記事で作成するスライダーは、jQueryプラグインである「slick slider」で実装しており、要件においてjQueryを使用しても良い場合を前提としております。
1.2 記事の対象
本記事は、EC運営ご担当者さまだけでなく、Shopifyストアを構築しようとしているエンジニアの方にも参考にしていただけるような内容です。
1.3 記事
約10分
実際にShopifyの管理画面でファイルを作成したりコードをコピペしたりする作業も含めて10分程度で読み終えることができます。
それでは、さっそく本題へ入っていきましょう。
2.各種ファイルの作成方法とサンプルコード
本記事で作成するファイルは以下の3つです。
・/sections/slider.liquid
・/assets/slider-style.css
・/assets/slider-script.js
一つずつ見ていきましょう。
まずは、スライダーのHTMLなどを記述するためのセクションファイルを作成します。
2.1. /sections/slider.liquid を作成する
ではまず、/sections/slider.liquid を作成しましょう。
Shopifyの管理画面の画面左側にある「オンラインストア」をクリックして下記の画面へ移動してください。
こちらのスクリーンショットのように①、②と進んでください。
①「・・・（3点リーダー）」をクリック
②「コードを編集」をクリック
次に、画面左側の「sections」のフォルダの中の「新しいセクションを追加する」でセクションを新規作成していきます。
セクションは「liquid」か「JSON」かを選びますが、今回は「liquid」を選択します。
ファイル名は任意の名前で構いませんが、スライダーであることが分かるように「slider」としました。
これで /sections/slider.liquid を作成することができました。
このファイルに下記のコードを全部コピペしてください。
ファイルを作成した時にはじめからすでに記述されているコードがありますが、このコードは不要ですので削除していただいたうえで、下記コードをコピペしてください。
なお、下記のコードにはこの後で作成する /assets/slider-style.css と/assets/slider-script.js を読み込むための記述も含まれています。
{% if section.blocks.size > 0 %}
{% comment %} slickのCDN {% endcomment %}
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
{% comment %} スライダー用スタイル {% endcomment %}
{{ 'slider-style.css' | asset_url | stylesheet_tag }}
{% comment %} jqueryのCDN {% endcomment %}
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
{% comment %} slickのCDN {% endcomment %}
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" defer></script>
{% comment %} スライダー用スクリプト {% endcomment %}
<script src="{{ 'slider-script.js' | asset_url }}" type="text/javascript" defer></script>
<section class="mainVisual">
<div class="mainVisual__inner">
<ul class="mainVisual-slider">
{% assign current_time = 'now' | date: "%Y-%m-%d %H:%M" %}
{% for block in section.blocks %}
{% assign start_date_time = block.settings.start_date_time %}
{% assign end_date_time = block.settings.end_date_time %}
{% comment %} 開始日時が未設定か、現在時刻より前の場合、または終了日時が未設定か、現在時刻より後の場合 {% endcomment %}
{% if start_date_time == blank or start_date_time <= current_time %}
{% comment %} 終了日時が未設定か、現在時刻より前の場合 {% endcomment %}
{% if end_date_time == blank or end_date_time >= current_time %}
<li class="mainVisual-slider__item" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a href="{{ block.settings.link.url }}">
<img src="{{ block.settings.image | img_url: '800x800' }}" alt="バナー画像" width="800" height="800">
</a>
{% else %}
<img src="{{ block.settings.image | img_url: '800x800' }}" alt="バナー画像" width="800" height="800">
{% endif %}
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
{% comment %} スライダーコントローラを出力する場所 {% endcomment %}
<div class="slider-controller"></div>
</div>
</section>
{% endif %}
{% schema %}
{
"name": "メインビジュアルスライダー",
"presets": [
{
"name": "メインビジュアルスライダー"
}
],
"blocks": [
{
"type": "slide_item",
"name": "スライド",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "画像",
"info": "スライダーに表示する画像を選択してください。"
},
{
"type": "url",
"id": "link",
"label": "リンク",
"info": "画像をクリックした際のリンク先を入力してください。"
},
{
"type": "text",
"id": "start_date_time",
"label": "表示開始日時",
"info": "スライドの表示開始日時を設定してください。「2001-01-01 01:01」のように入力してください。"
},
{
"type": "text",
"id": "end_date_time",
"label": "表示終了日時",
"info": "スライドの表示終了日時を設定してください。「2001-01-01 01:01」のように入力してください。（※注意 例えば、2025年になった瞬間に非表示にしたい場合は、2024-12-31 23:59 と設定してください。）"
}
]
}
],
"disabled_on": {
"groups": ["header", "footer"]
}
}
{% endschema %}2.2 /assets/slider-style.css を作成する
続きまして、/assets/slider-style.css を作成します。
先ほど /sections/slider.liquid を作成した流れと同じように、次は「assets」フォルダの中の「新しいアセットを追加する」でcssファイルを新規作成していきます。
こちらのスクリーンショットのように①、②、③の流れで進んでください。
①「空のファイルを作成する」をクリック
②「拡張機能」で「css」を選択
③「ファイル名」は任意のファイル名を入力（今回は「slider-style.css」で作成しました）
これで /assets/slider-style.css を作成することができました。
このファイルに下記のコードを全部コピペしてください。
.mainVisual {
margin-bottom: 8.4rem;
}
@media screen and (max-width: 989px) {
.mainVisual {
margin-bottom: 6.4rem;
}
}
@media screen and (max-width: 749px) {
.mainVisual {
margin-bottom: 5.2rem;
}
}
@media screen and (max-width: 479px) {
.mainVisual {
margin-bottom: 2.4rem;
}
}
.mainVisual .mainVisual__inner {
max-width: 140rem;
margin: 0 auto;
overflow: hidden;
position: relative;
z-index: 0;
}
/* -- スライダーの設定 ---------------------------------- */
.mainVisual .mainVisual-slider {
padding: 0;
margin: 0;
margin: 0 -0.4rem;
}
.mainVisual .mainVisual-slider .mainVisual-slider__item {
margin: 0 0.4rem;
list-style: none;
aspect-ratio: 1 / 1;
}
.mainVisual .mainVisual-slider .mainVisual-slider__item img {
max-width: 100%;
height: 100%;
vertical-align: middle;
-o-object-fit: cover;
object-fit: cover;
}
.mainVisual .slick-list {
padding: 0 !important;
}
/* -- 矢印の設定 ---------------------------------- */
.mainVisual .slider-controller .slick-arrow {
-webkit-appearance: none;
background: none;
border: none;
outline: none;
padding: 0;
cursor: pointer;
text-indent: -9999999999rem;
width: 3.8rem;
height: 3.8rem;
position: absolute;
z-index: 0;
top: 50%;
background-color: #FFFFFF;
border-radius: 50%;
opacity: 0.8;
transition: opacity 0.2s;
}
.mainVisual .slider-controller .slick-arrow:hover {
opacity: 1;
}
.mainVisual .slider-controller .slick-arrow::before {
content: "";
display: block;
width: 0.8rem;
height: 0.8rem;
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
transform: translate(-65%, -35%);
border-style: solid;
border-width: 0.1rem;
border-color: #5A5A5A #5A5A5A transparent transparent;
}
.mainVisual .slider-controller .slick-arrow.slick-prev {
left: 10rem;
transform: rotate(-135deg);
box-shadow: -2px -2px 4px -2px #5A5A5A;
}
.mainVisual .slider-controller .slick-arrow.slick-next {
right: 10rem;
transform: rotate(45deg);
box-shadow: 2px 2px 4px -2px #5A5A5A;
}
/* -- ドットの設定 ---------------------------------- */
.mainVisual .slider-controller .slick-dots {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 0.8rem;
margin-top: 0.8rem;
}
.mainVisual .slider-controller .slick-dots > li {
list-style: none;
}
.mainVisual .slider-controller .slick-dots > li button {
-webkit-appearance: none;
background: none;
border: none;
outline: none;
padding: 0;
cursor: pointer;
text-indent: -9999999999rem;
display: block;
width: 1rem;
height: 1rem;
background-color: #E8E8E8;
border-radius: 50%;
transition: all 0.2s;
}
.mainVisual .slider-controller .slick-dots > li.slick-active button {
background-color: #A5A5A5;
}
2.3 /assets/slider-script.js を作成する
最後に、/assets/slider-script.js を作成します。
先ほど /assets/slider-style.css を作成した流れと同じようにして、「assets」フォルダの「新しいアセットを追加する」からjsファイルを新規作成していきます。
こちらのスクリーンショットのように①、②、③の流れで進んでください。
①「空のファイルを作成する」をクリック
②「拡張機能」で「js」を選択
③「ファイル名」は任意のファイル名を入力（今回は「slider-script.js」で作成しました）
これで /assets/slider-script.js を作成することができました。
このファイルに下記のコードを全部コピペしてください。
$(function() {
$('.mainVisual-slider').slick({
dots: false,
arrows: true,
appendArrows: $('.slider-controller'),
infinite: true,
speed: 200,
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
centerMode: true,
responsive: [
{
breakpoint: 750,
settings: {
fade: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
appendDots: $('.slider-controller'),
}
}
]
});
});
これで準備が整いました。
それでは次に、スライダーをお好みの場所に設置してみましょう。
3. スライダーを設置する
今回はTOPページの一番上のファーストビューにスライダーを設置してみます。
「オンラインストア」の「カスタマイズ」をクリックしてカスタマイズ画面へ移動してください。
スクリーンショットの①、②、③の流れでセクションを追加しましょう。
①「＋」でセクションを追加するポップアップを表示します。
②検索ボックスで「スライダー」と入力すると、先ほど作成したセクション「メインビジュアルスライダー」が表示されます。
③「メインビジュアルスライダー」を選択するとセクションが追加されます。
追加されたセクション「メインビジュアルスライダー」のすぐ下に「スライドを追加」というボタンがありますので、そこから任意の数だけスライドを追加していきましょう。
これでスライダーの設置が完了しました。
続いては個々のスライドの設定です。
何月何日の何時何分からスライドを表示するのか、また、何月何日の何時何分までスライドを表示してそれ以降は非表示にするのか、といった設定をしていきます。
4. 表示・非表示を日時指定で設定する
それでは、スライド一つ一つに設定を施し、日時指定をしてスライドを表示したり非表示にしたりしていきましょう。
本記事で作成したセクションでは、スライドに「画像」と「リンク」を設定することができます。
「リンク」は空欄のままにしても問題ありません。
必要に応じて遷移先として指定したいURLを入力してください。
次に、「表示開始日時」と「表示終了日時」は日時を入力してください。
それぞれの日時を入力する際に注意点が2つあります。
・入力する日時のフォーマット（型）は「2000-01-01 01:01」のような形式で入力してください。
・例えば、2025年になった瞬間に非表示にしたい場合は「表示終了日時」に「2024-12-31 23:59」と入力してください。
以上が、スライドの表示・非表示を日時指定で設定する方法です。
5. Slick Sliderのカスタマイズができる参考サイト
本記事で作成したスライダーセクションはslick sliderを使っています。
スライダーの仕様をさらにカスタマイズしたい方は以下のサイトが参考になるかと思います。
6. まとめ
本記事では
・簡単にスライダーを設置できる
・個々のスライドを表示したり非表示にするタイミングを日時指定でコントロールできる
といったことができるようにコードサンプルと操作方法を紹介しました。
記事の流れに沿ってファイルの作成とコードのコピペで誰でも簡単にスライダーセクションを作成できると思います。ぜひ、ご活用ください。
冒頭でお伝えした通り、キャンペーンが終了しているにもかかわらずそのキャンペーンのスライドが表示されたままだと訪問者に誤解を与えたり、信頼を損ねるリスクがあります。
本記事で紹介した方法でこのようなリスクを回避することができれば幸いに思います。
著者：Murakami
弊社では、ECサイトのリプレース案件から、Shopifyカスタムアプリ開発、保守案件に至るまで、EC中心にプロジェクトの質にこだわり、お客様に笑顔になってもらえるよう日々邁進しております。
皆様からのお問い合わせ・ご相談をお待ちしております。