こんにちは
ディレクターの小坂です。
ShopifyのDawnテーマを使ってスライドショーセクション（下記画像赤枠）の画像全体をクリックしたいと思ったことはありませんか。
画像全体にリンクを設定することができればクリックエリアを増やすことができるので、スマートフォン等では標準のボタンよりクリックしやすくなるというメリットがあります。
しかし、現状Dawnテーマではボタンリンクの設定のみとなっており、画像全体にリンクを設定することができません。
リンクを設定するにはテーマのカスタマイズ、CSSの追加を行う必要があります。
そこで、今回はDawnテーマ（v11.0.0）を元にリンクを設定する方法をご紹介します。
前提条件
１．Dawnテーマの『Slideshow.liquid』に変更が加えられていない。
２．スライドショーの設定、モバイルのレイアウトで『モバイルで画像の下にコンテンツを表示する』のチェックは外す
３．画像全体に設定するリンクは『ボタンのリンク』で設定したリンクを反映
テンプレート修正方法
１．Shopify管理画面の『コード編集』より『Slideshow.liquid』を開きます。
２．『Slideshow.liquid』の下記コード（121行目〜129行目あたり）の下に
<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.link != blank -%}<a href="{{ block.settings.link }}" class=”slider__link”>{%- endif -%}３．『Slideshow.liquid』の下記コード（185行目〜197行目あたり）の上に
</div>
{%- endfor -%}
</div>
{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
<div class="slideshow__controls slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}"
>
下記コードを追加
{%- if block.settings.link != blank -%}</a>{%- endif -%}css追加方法
１．管理画面の『カスタマイズ』よりサイドメニューのスライドショーをクリック
２．カスタムCSSに下記CSSを追加し、保存ボタンをクリック
.slider__link {
height: 100%;
}
まとめ
今回ご紹介した、スライドショーの画像にリンクを設定する方法はテーマや、バージョン毎に修正箇所が異なる場合がありますので、ご自身で対応できない場合は、カスタマイズのご相談も承っておりますので、よろしければ下記からお問い合せください。