Dawn 画像バナーのリンク設定について

[YMD002]

Dawnテーマで作成したストア中の画像バナー部分について、下記の記事を参考にしながら画像にURLを設定したいのですが、修正対象となるコードがなくて、実現できませんでした。

画像バナーにリンクを設定できる方法をお伺いしたくご教示頂けますと幸いです。

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

Dawnのバージョン：10.0.0

記事URL：

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/dawn-%E7%94%BB%E5%83%8F%E3%8...

ファイル内には下記のコードがない：

{%- 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 -%}

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

[Qcoltd]

@YMD002様

ご質問いただいているDawn画像バナーのリンクですが、バージョン毎にテンプレートが異なっているようですので、Dawn 10.0.0で画像バナーの画像データ全体にリンクを設置する方法を記載させていただきます。

前提条件

1. 画像全体に設定するリンクは最初のボタンのリンクで設定したリンクを反映
2. 最初のボタンのラベルは未入力にする
3. 2番目のボタンのラベル、2番目のボタンのリンクは未入力にする

テンプレート修正方法

1. 管理画面の『コードを編集』よりimage-banner.liquidを開きます。
2. 161行目の後に下記コードを追加し、保存ボタンをクリック
   

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

css追加方法

1. 管理画面の『カスタマイズ』よりサイドメニューの画像バナーをクリック
   
2. カスタムCSSに下記CSSを追加し、保存ボタンをクリック
   

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

以上で画像全体にリンクが反映されます。

ご参考まで
(キュー小坂)

[YMD002]

キュー小坂さま

ご丁寧に説明して頂きありがとうございます。

教えて頂いた方法で実現できました！本当にありがとうございます。

大変申し訳ございませんが、２枚の画像がある場合、画像ごとにリンクを付けることは可能でしょうか？

宜しくお願い致します。

[Qcoltd]

@YMD002様

ご質問いただいている画像が2枚ある場合は下記画像の見た目で大丈夫でしょうか。

こちらで問題ございませんでしたら、下記内容で対応できるかと思います。

前提条件

1枚表示の場合

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

2枚表示の場合

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

テンプレート修正方法

1枚・2枚共に対応するため、コード内容および追加位置が変更となっています。

1. 管理画面の『コードを編集』よりimage-banner.liquidを開きます。
2. 162行目の後に下記コードを追加し、保存ボタンをクリック
   

{%- 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 -%}

css追加方法

1. 管理画面の『カスタマイズ』よりサイドメニューの画像バナーをクリック
2. カスタムCSSに下記CSSを追加し、保存ボタンをクリック
   

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

ご参考まで
(キュー小坂)

[YMD002]

キュー小坂さま

ご丁寧に説明して頂きありがとうございます。

ご教示いただいた方法で試してみましが、画像2枚がある場合は、１枚目の画像をクリックしたら、2枚目のリンク先に飛ばされてしまいました。2枚目は問題なく動作しました。画像が1枚ある場合も問題なく動作しました。

貴重なお時間をいただき本当に申し訳ございません。こちらでもう少し試してみます。

[Qcoltd · Accepted solution]

@YMD002様

お送りしたソースに不備があり申し訳ございません。

クリックエリアを半分にするコードが抜けておりました。

テンプレートのコードとcssの修正コードをお送りさせていただきます。

テンプレート修正コード

{%- 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 -%}

 

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;
}

ご参考まで
(キュー小坂)

[YMD002]

キュー小坂さま

お忙しい中、ご丁寧に対応して頂き本当にありがとうございます。

送って頂いたソースで実現できました。

貴重なお時間をいただき、本当にありがとうございます。