【Shopify 】スライドショーにリンクをつける！！！

※Dawn Ver.9にアップロードされますとものすごくレイアウトが崩れます…
現在調査中ですのでそれ以降のバージョンでお試しください…

Shopify をカスタマイズし過ぎて何が何だか分からなくなってきました、クロエ・ルメールです。

CMでも言ってますオンラインショップを始めるならショッピファイ♪
って言ってますけど、まぁ～絶妙にかゆいところに手が届かないテンプレートばかり。
有料はどうか知りませんけど（笑）
でも唯一Shopify で褒めるべきなのはカスタマイズ性の高さです！

そして今回お教えするのはスライドショーにリンクをつける！
というものです。
セクションの項目にaタグ付けたらいいんじゃね？と思ったんですけど
これ…for文で生成されるからaタグ付けたら全部のスライドに同じリンクがついてしまう…
かといってコーディングすんのもめんどくさい。
できたらカスタマイズページで簡単にリンク先をつけれるようにしてほしい…

こんな感じで…
ってできんの！？
できちゃいます！

これがあれば複数してるブログのリンクを貼ったり、おすすめしたい商品ﾊﾞﾅｰにリンクを貼って特集ページに飛ばすことだってできます！
てかなんでこれが標準でないねん！って話ですけど！

 

セクションのslideshow.liquidをいじる

Dawnを使っていますが、大体のテーマで使える技術だろうと思います。
タイトルの通りにslideshow.liquidを開いてずっと下へ
{% schema %}のところに以下のコードをほほいのほ～いと入れます。

　　　　{
            "type": "url",
            "id": "image_link",
            "label": "Image Link"
          }

 

一応下に前後のコードも入れておきます。
たまにエラーになる原因としてカンマ忘れがあります。
気を付けてください

{% schema %}

"blocks": [
    {
      "type": "slide",
      "name": "t:sections.slideshow.blocks.slide.name",
      "limit": 5,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.slideshow.blocks.slide.settings.image.label"
        }, 
 
{%comment%}↓このコードを入れる{%endcomment%}

　　　　{
            "type": "url",
            "id": "image_link",
            "label": "Image Link"
          },

 

そうすると冒頭のスクショのようにリンクをつけることができます。
めっちゃ簡単ですね。。
以下に完成形のコードを貼っておきます。

  {%- for block in section.blocks -%}
      <style>
        #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
          opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
        }
      </style>
         
      <div class="slideshow__slide grid__item grid--1-col slider__slide"
        id="Slide-{{ section.id }}-{{ forloop.index }}"
        {{ block.shopify_attributes }}
        role="group"
        aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
        aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
        tabindex="-1"
      > 

<!--↓ここに追加のコード↓-->
      {% if block.settings.image_link != blank %}
          <a href="{{ block.settings.image_link }}">
        {% endif %}  
<!--↑ここに追加のコード↑-->            

        <div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}">
          {%- if block.settings.image -%}
            <img
              srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
              {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
              {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
              {%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
              {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
              {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
              {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
              {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
              {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
              {{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
              sizes="100vw"
              src="{{ block.settings.image | image_url: width: 1500 }}"
              loading="lazy"
              alt="{{ block.settings.image.alt | escape }}"
              width="{{ block.settings.image.width }}"
              height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
            >
          {%- else -%}
            {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
        </div>
     
        <div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
          <div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
            {%- if block.settings.heading != blank -%}
              <h2 class="banner__heading {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
            {%- endif -%}
            {%- if block.settings.subheading != blank -%}
              <div class="banner__text" {{ block.shopify_attributes }}>
                <span>{{ block.settings.subheading | escape }}</span>
              </div>
            {%- endif -%}
            {%- if block.settings.button_label != blank -%}
              <div class="banner__buttons">
                <a{% if block.settings.link %} href="{{ block.settings.link }}"{% else %} role="link" aria-disabled="true"{% endif %} class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}">{{ block.settings.button_label | escape }}</a>
              </div>
            {%- endif -%}
          </div>
        </div>
          </a>
<!--↑ここに追加のコード↑-->   
      </div>
               
    {%- endfor -%}
  </div>
  

このブログを見つけた人はラッキーですよほんと。
こんな単純かつ必要な機能を標準でつけていないShopify にはオコですわ。
参考になりましたらウチでなんかグッズ作ってください(笑)