この記事を書いた人
ShopifyのDawnテーマでは、デフォルトではスライドショーのリンクはボタンで付ける仕様になっており、画像全体にリンクを設定することができません。しかし、Liquidのコード編集でテンプレートをカスタマイズすることで、スライドショー画像（バナー全体）をクリックできるようになります。
この記事では、アプリを使わずDawnテーマのslideshow.liquidを編集して実現する方法をカスタマイズ初心者の方でも簡単にできる手順付きで解説します。
※Dawnテーマで実際に検証したうえでまとめていますが、バージョンや異なるテーマ、既に様々なカスタマイズがファイルに加えられている場合には思うような結果にならないこともあるため、その点はご了承くださいませ。
今回のゴール
画像＋ボタンリンク→画像そのものにリンク設置仕様に変更する
テーマファイルをいじってDawnテーマでのスライドショーバナーブロックにデフォルトで用意されてる画像＋ボタンリンクから、画像そのものにリンクを付けられるように変更します。
一度コードを編集してしまえば、カスタマイズ画面でバナーやリンクを選択するだけで運用が楽です。
スライドショーの画像全体にリンクを設置するメリット
ボタンよりも画像全体の方がクリックしやすいうえ、バナーのデザインを邪魔しないというメリットがあります。
Dawn デフォルト（ボタンリンクバージョン）
カスタマイズ後（画像リンクバージョン）
上記はモバイルでの比較です。ボタンリンク機能を使用する場合はボタン位置も考えて画像を用意する必要があります。
テーマファイルのコード編集方法
スライドショーバナーブロックのコードを編集する流れを詳しくご説明します。
対象ファイルを見つけて開き、該当箇所にコード（以下に参考コードも記載）を追記したり、必要に応じて既存のコードを非表示にするだけの簡単操作なので、カスタマイズ初心者の方でもスムーズに実装していただけます。
編集対象：slideshow.liquid
以下の手順で、画像全体にリンクを設定できるようにします。
STEP1 対象ファイルを開く
管理画面から「オンラインストア」→「テーマ」→「コードを編集」→sections/slideshow.liquid を開きます。
STEP2 <div class="slideshow__slide ..."> のすぐ下に以下のコードを追加
このコードは、リンクが指定されている場合にだけ、画像全体を<a>タグで囲むためのものです。
🔍 該当コード例（検索用）
<div class=”slideshow__slide grid__item grid–1-col slider__slide” id=”Slide-{{ section.id }}-{{ forloop.index }}” {{ block.shopify_attributes }}…>
STEP3 </div>の直前（スライド1つ分の終わり）に以下のコードを追加
これで、スライド1枚分全体がリンクとして機能します。
📝 補足：ボタンリンクはコメントアウトしてOK
スライドにリンクを付けると、元々ある「ボタンリンク」がHTML的に二重になる可能性があります。不要な場合は以下をコメントアウトするのがおすすめです：
{%- if block.settings.button_label != blank -%}
{#
{{ block.settings.button_label }}
#}
{%- endif -%}
スライド設定にリンク先URLを入力
- 該当テーマの「カスタイマイズ」を開く
- スライドショーセクションの各スライドにリンク先URLの欄があります
- 任意のリンクを入力して保存
※ デフォルトではリンクの設定箇所のラベル名は上の画像のように「ボタンのリンク」となっています。このラベル名は内部的には t:sections.slideshow.blocks.slide.settings.link.label を参照しており、翻訳ファイルを変更すれば「画像リンク」に変更可能ですが、影響範囲が大きいため、気になる場合はラベルを直接記述するのが安全です。
まとめ
Dawnテーマでスライドショーブロックをバナー＋リンクボタンから、画像全体をリンクにする方法を具体的な手順と参考コードとともに紹介しました。
小さい画面でもクリックしやすいバナーにリンクをつけることで、視認性やユーザーの誘導性が高まり、操作性も向上します。有料アプリを使わず、簡単なコード編集だけで対応できるため、Shopifyコード編集初心者の方にもおすすめです。
テーマファイルをいじる際には必ず既存のテーマファイルを複製してから作業を行いましょう。（万一うまく行かなった場合にもすぐに元に戻せます）
