[Shopify] スライドショーをSwiper.jsに変更して管理画面で編集できるようにする方法

そんな場合のカスタマイズ方法を解説します。

今回は、レスポンシブ対応でjQuery不要の高機能なスライダー、「Swiper – The Most Modern Mobile Touch Slider」を使用します。デモサイトはこちら。

こちらを使用して、ホームページに「画像」と「リンク先」を設定するだけでスライダーを追加・編集・削除が簡単にできるようにします。

Shopify Debutテーマデフォルトのスライドショー

今回は例としてDebutテーマを使用します。

Debutテーマのデフォルトで使用できるホームページセクションにはすでに「スライドショー」が存在しますが、以下のようになっています。

これでも良いのですが、

• 画像全体をリンクにしたい（デフォルトではボタン部分のみがリンクになっている）
• エフェクトを変えたい
• ボタンや丸いページネーションを別デザインにしたい

このようにしたい場合などはカスタマイズが必要となります。

ShopifyにスライドショーSwiper.jsを追加する準備

まずはこちら。

Getting Started With Swiper

SwiperのCSSを読み込む

CDNから読み込む場合は、 /layout/theme.liquid ファイルのheadに、cssを追加します。ファイルをダウンロードして読み込む場合は、先ほどのURLの「
Download assets」からダウンロードしてassetsフォルダにファイルを配置し、読み込みます。

{{ '//unpkg.com/swiper/swiper-bundle.min.css' | stylesheet_tag }}

特定のテンプレートのみ読み込みたい場合は、条件を指定する。例↓

{% if template == 'index' %}
{{ '//unpkg.com/swiper/swiper-bundle.min.css' | stylesheet_tag }}
{% endif %}

※IE11でもどうしても表示したい場合は、、version 4.5.1にする必要があります。

{{ '//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css' | stylesheet_tag }}

SwiperのJSを読み込む

CDNから読み込む場合は、設置したいページのテンプレート（今回はトップページなので/templates/index.liquid）の最後に、jsを追加します。ファイルをダウンロードして読み込む場合は、先ほどのURLの「
Download assets」からダウンロードしてassetsフォルダにファイルを配置し、読み込みます。

{{ '//unpkg.com/swiper/swiper-bundle.min.js' | script_tag }}

※こちらもどうしてもIE11でも表示したい場合はversion 4.5.1にする必要があります。

{{ '//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js' | script_tag }}

ShopifyにスライドショーSwiper.jsのセクションを追加する

次に、セクションを追加します。仮に以下のようなファイル名にしたとします。

/sections/slideshow-swiper.liquid

ここに、先ほどの Getting Started With Swiper の「Add Swiper HTML Layout」にあるHTMLを入れて保存します。

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

動的セクションにするため、その下にschemeを追加します。nameやcategoryは好きに決めてOKです。

{% schema %}
{
  "presets": [
    {
      "name": "スライドショー Swiper",
      "category": "画像"
    }
  ]
}
{% endschema %}

これでホームページのセクションに追加されました。

ただこれだけだと編集ができないので、先ほどのschemeにブロックを追加します。

名前やクラス名、最大ブロック数は自由に設定します。

  "name": "スライドショー Swiper",
  "class": "slider index-section--flush index-section--slideshow-swiper",
  "max_blocks": 6,
  "blocks": [
    {
      "type": "image",
      "name": "画像スライド",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "画像"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "ボタンのリンク"
        }
      ]
    }
  ],

これで「画像」と「リンク先」入力自体はできるようになりました。

次に、その「画像」と「リンク先」をブロックごとに反映されるようにします。

<div class="swiper-slide">Slide 1</div>

この部分を、ブロックごとに増やせるようにするので、以下のようにしてブロックが存在する分だけを繰り返します。

{%- for block in section.blocks -%}
<div class="swiper-slide">Slide 1</div>
{%- endfor -%}

次に画像とリンク先が入るように、以下のように変更します。

{%- for block in section.blocks -%}
<div class="swiper-slide">
  <a href="{{ block.settings.button_link }}"><img src="{{ block.settings.image | img_url: "master" }}" /></a>
</div>
{%- endfor -%}

さらに、リンク先が設定なしの場合はリンクが入らないようにします。

{%- for block in section.blocks -%}
<div class="swiper-slide">
  {%- if block.settings.button_link != blank -%}<a href="{{ block.settings.button_link }}">{%- endif -%}<img src="{{ block.settings.image | img_url: "master" }}" />{%- if block.settings.button_link != blank -%}</a>{%- endif -%}
</div>
{%- endfor -%}

これでセクションの作成自体は完了です。

ShopifyにスライドショーSwiper.jsの設定を追加する

最後に、Swiperの初期化を行います。

先ほどJSを追加した部分の下（先ほどの例だと /templates/index.liquid）に、先ほどの Getting Started With Swiper の「Initialize Swiper」にあるJSを追加して保存します。（水平方向にスライドさせたいので、directionsはhorizontalに変更。削除するでも可）

<!-- Initialize Swiper -->
<script type="text/JavaScript">
    const swiper = new Swiper('.swiper-container', {
        // Optional parameters
        direction: 'horizontal',
        loop: true,
        // If we need pagination
        pagination: {
          el: '.swiper-pagination',
        },
        // Navigation arrows
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // And if we need scrollbar
        scrollbar: {
          el: '.swiper-scrollbar',
        },
    });
</script>

※大きい画面で表示すると左寄せになってしまうため、中央寄せにするには以下。

.swiper-container {
    text-align: center;
}

これで完了です。

あとは、でもサイト Swiper Demos のコードを参考に、ページネーションやナビゲーション、エフェクトなどを自由にカスタマイズできます。（他のサイトにたくさんのカスタマイズ方法があるのでそちらを参照ください）

ただし、1ページに複数のスライドショーを追加するためには別途カスタマイズが必要です。

ABOUT ME

toru

フリーランスWebディレクター・UI/UXデザイナー。大手Web制作会社10年・フリーランス6年の経験をもとに、Webサイト・ECサイト構築・運用支援を行うかたわら、Web制作スキルを身につけたい方や、フリーランスを目指す方に向けて、自分の経験をもとに役に立つ情報をわかりやすく発信しています。