Dawn 画像バナー リンク設定

[ucch111]

Dawnテーマで作成しており画像バナーセクションで設定した画像自体にURLを設定したいのですが可能でしょうか？

画像をタップすると指定したページ（特集コレクションを予定）に遷移する仕様にしたいと考えております。

詳細をお伺いしたくご教示頂けますと幸いです。

何卒、よろしくお願い致します。

[Qcoltd · Accepted solution]

ご質問いただいている画像バナーの画像にリンクを設定することは可能です。

リンクの設定については、元々画像バナーで用意されている、最初のボタンのリンク先を使用します。

『ボタンのリンク』が設定されていない場合は、画像にリンクは設定されません。

2番目のボタンのリンクについては入力しても下記の改修で無効となっています。

以下設定ファイルの変更方法となります。

1．管理画面の『コードを編集』よりimage-banner.liquidを開きます。

2．『div id="Banner-』の上の行に下記コードを追加してください。

{%- for block in section.blocks -%}{%- if block.settings.button_link_1 != blank -%}<a href="{{ block.settings.button_link_1 }}" class="banner-link" >{%- endif -%}{%- endfor -%}

3．下記コードを

{%- if block.settings.button_label_1 != blank -%}
  <a
    {% if block.settings.button_link_1 == blank %}
      role="link" aria-disabled="true"
    {% else %}
      href="{{ block.settings.button_link_1 }}"
    {% endif %}
    class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
  >
    {{- block.settings.button_label_1 | escape -}}
  </a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
  <a
    {% if block.settings.button_link_2 == blank %}
      role="link" aria-disabled="true"
    {% else %}
      href="{{ block.settings.button_link_2 }}"
    {% endif %}
    class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
  >
    {{- block.settings.button_label_2 | escape -}}
  </a>
{%- endif -%}

下記コードに変更してください。

{%- if block.settings.button_label_1 != blank -%}
  <span
    class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
  >
    {{- block.settings.button_label_1 | escape -}}
  </span>
{%- endif -%}

4．ファイル内にある最後の『</div>』の後ろに下記コードを追加してください。

{%- for block in section.blocks -%}{%- if block.settings.button_link_1 != blank -%}</a>{%- endif -%}{%- endfor -%}

5．『#Banner-{{ section.id }}::after {』の上の行に下記CSSを追加してください。

.banner-link {text-decoration:none}

ご参考まで。

(キュー小坂)

[ucch111]

迅速なご確認ご回答ありがとうございます！

想定していた仕様に変更できました！