ShopifyテーマDawnで画像バナーにリンクを貼る方法（V11.0.0）

こんにちは
ディレクターの小坂です。

Shopifyのテーマを利用していて、画像バナーセクション（下記画像赤枠）を使用した際、表示されるボタンにリンクを設定するのではなく、画像全体にリンクを設定したいと思ったことはありませんでしょうか。

画像全体にリンクを設定することができればクリックエリアを増やすことができるので、スマートフォン等では標準のボタンよりクリックしやすくなるというメリットがあります。

しかし、現状よく利用されている、Dawnテーマでは画像全体にリンクを設定することができないため、リンクを設定するにはテーマのカスタマイズ、CSSの追加を行う必要があります。

そこで、今回はDawnテーマ（v11.0.0）を元にリンクを設定する方法をご紹介します。

前提条件

バナー画像が1枚表示の場合

1. 画像全体に設定するリンクは『最初のボタンのリンク』で設定したリンクを反映
2. ボタンを表示させない場合は、『最初のボタンのラベル』は未入力にする
3. 『2番目の画像』、『2番目のボタンのラベル』、『2番目のボタンのリンク』は未入力にする

バナー画像が2枚表示の場合

1. 2枚表示の左側の画像は『最初のボタンのリンク』で設定したリンクを反映
2. ボタンを表示させない場合は、『最初のボタンのラベル』は未入力にする
3. 2枚表示の右側の画像は『2番目のボタンのリンク』で設定したリンクを反映
4. ボタンを表示させない場合は、『2番目のボタンのラベル』は未入力にする

テンプレート修正方法

１．Shopify管理画面の『コード編集』よりimage-banner.liquidを開きます。
２．image-banner.liquidの162行目あたりにある下記コードを

  </div>
</div>

{% schema %}

下記に変更し保存ボタンをクリック

  </div>
  {%- for block in section.blocks -%}
    {% if block.settings.button_link_1 != blank %}
      <a class="cover-link{% if block.settings.button_link_2 != blank %} left{%- endif -%}" href="{{ block.settings.button_link_1 }}"></a>
    {%- endif -%}
    {% if block.settings.button_link_2 != blank %}
      <a class="cover-link right" href="{{ block.settings.button_link_2 }}"></a>
    {%- endif -%}
  {%- endfor -%}
</div>

{% schema %}

css追加方法

１．Shopify管理画面の『カスタマイズ』よりサイドメニューの画像バナーをクリック

２．カスタムCSSに下記CSSを追加し、保存ボタンをクリック

.cover-link {
  display: block;
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
}
.cover-link.left {
  left: 0;
  width: 50vw;
}
.cover-link.right {
  right: 0;
  width: 50vw;
}

まとめ

今回ご紹介した、画像バナーにリンクを設定する方法は、テーマやバージョン毎に修正箇所が異なる場合がありますので、ご自身で対応できない場合は、カスタマイズのご相談も承っておりますので、よろしければ下記からお問い合せください。

お問い合わせはこちら