【Shopify】Swiperでスライドショーを追加する方法

2024年6月9日 2024年6月13日

西

Shopify（Dawnテーマ）のデフォルトのスライドショーではなく、Swiperを利用して自作のスライドショーをShopifyに追加する方法の備忘録。

スライドショーの仕様

PC・スマホで画像切替え
画像毎にリンク設定可能
デフォルト画像設定可能
レスポンシブ対応（画像の上下左右が見切れない）

経緯：Shopifyデフォルトのスライドショーの構造では横長の画面サイズで画像の上下が見切れてしまい、表示したいテキストが隠れてしまったため、カスタマイズで対応を行った。

Swiperを利用してスライドショーを追加する手順

Swiperのリンクを設置（CDN利用）

１．SwiperのサイトからCDNをコピー

▼コピー時点のコード

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

２．Shopifyコード編集＞レイアウト＞ theme.liquid ＞ <head>内にcssリンクを追加

▼Dawnテーマでの挿入例

    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'meta-tags' %}

    <!-- 追加ここから -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />
    <!-- 追加ここまで -->
    
    <script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'global.js' | asset_url }}" defer="defer"></script>

３． </body>直前にJavaScriptリンクを追加

▼Dawnテーマでの挿入例

    {%- if settings.predictive_search_enabled -%}
      <script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

<!-- 追加ここから -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- 追加ここまで -->
  </body>
</html>

※defer推奨のエラー文が表示されるが<script>にdefer="defer"を追加するとUncaught ReferenceError: Swiper is not definedのエラーが発生したため、deferは使用しない。

セクションにliquidファイルを追加

１．Shopifyコード編集＞セクション＞新しいセクションを追加する

２．ファイル名を設定してliquidファイルを作成し、下記コードを追加

{% style %}
.mv-swiper {
  overflow: hidden;
}
.mv-swiper [class^="swiper-button-"]::after{
  font-size: 30px;
  color: #fff;
}
.mv-swiper .swiper-pagination-bullet-active {
  background-color: #fff!important;
}
.mv-swiper .swiper-pagination {
  bottom: 20px!important;
}
.slide-img img{
  width: 100%;
  height: 100%;
}
{% endstyle %}
<section class="Slider">
  <!-- Slider main container -->
  <div class="mv-swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      {%- for block in section.blocks -%}
      <a href="{{ block.settings.link }}" class="swiper-slide">
        <picture class="slide-img">
          <source media="(max-width: 768px)" srcset="{{ block.settings.image_sp | img_url: 'master' }}">
          <source media="(min-width: 769px)" srcset="{{ block.settings.image_pc | img_url: 'master' }}">
            <img src="{{ block.settings.image_noimg | img_url: 'master' }}" alt="image" loading="lazy">
        </picture>
      </a>
      {% endfor %}
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</section>
{% schema %}
{
  "name": "Slider",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "header",
      "content": "スライドショーの表示"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "画像",
      "limit": 10,
      "settings": [
         {
          "type": "url",
          "id": "link",
          "label": "リンク"
         },
        {
          "type": "image_picker",
          "id": "image_noimg",
          "label": "代替画像",
           "info": "設定がない場合に表示される画像"
        },
         {
            "type": "header",
            "content": "PC用"
          },
         {
          "type": "image_picker",
          "id": "image_pc",
          "label": "PC用画像",
           "info": "769px以上で表示 推奨画像サイズ：1920×1080px(16:9)"
        },
        {
          "type": "header",
          "content": "スマホ用"
        },
        {
          "type": "image_picker",
          "id": "image_sp",
          "label": "スマホ用画像",
          "info": "768px以下で表示 推奨画像サイズ：750×1500px"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Swiper slider",
      "blocks": [
      ]
    }
  ]
}
{% endschema %}
{% javascript %}
{% endjavascript %}

参照：ソケットブログ
https://blog.socketweb.net/shopify-swiper-slider/

アセットにjsファイルを追加

１．Shopifyコード編集＞アセット＞新しいアセットを追加する

２．空のファイルでjsを選択し、ファイル名を設定してjsファイルを作成し、下記コードを追加

const mvSwiper = new Swiper('.mv-swiper', {
    // Optional parameters
    loop: true,
    effect: 'fade',
    slidesPerView: 1,
    spaceBetween: 0,
  autoplay: { // 自動再生
    delay: 3000, // 3000→3秒後に次のスライド
    disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
  },
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });

テーマにスライドショーを追加

１．Shopifyのテーマカスタマイズ画面＞テーマ＞セクションを追加＞先ほど追加したセクションを選択

２．追加したセクションの内容（画像・リンク）を設定

以上！

カテゴリー: Shopify