FROM CACHE - jp_header
解決済

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

YMD002
遊覧客
17 0 2

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

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

1 件の受理された解決策
Qcoltd
Shopify Partner
1051 429 417

成功

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

 

 

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

 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

6件の返信6

Qcoltd
Shopify Partner
1051 429 417

@YMD002

 

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

 

前提条件

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

 

テンプレート修正方法

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

 

{%- 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. 管理画面の『カスタマイズ』よりサイドメニューの画像バナーをクリック
    スクリーンショット 2023-07-24 18.32.26.png
  2. カスタムCSSに下記CSSを追加し、保存ボタンをクリック
    スクリーンショット 2023-07-24 18.32.42.png

 

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

 

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

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
YMD002
遊覧客
17 0 2

キュー小坂さま

 

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

 

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

 

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

 

宜しくお願い致します。

Qcoltd
Shopify Partner
1051 429 417

@YMD002

 

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

FireShot Capture 496 - q-kosakatest03 - q-kosakatest03.myshopify.com.png

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

 

前提条件

1枚表示の場合

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

2枚表示の場合

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

テンプレート修正方法

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

  1. 管理画面の『コードを編集』よりimage-banner.liquidを開きます。
  2. 162行目の後に下記コードを追加し、保存ボタンをクリック
    FireShot Capture 495 - q-kosakatest03 · 編集_ Dawn · Shopify - admin.shopify.com.png

 

{%- 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を追加し、保存ボタンをクリック
    スクリーンショット 2023-07-25 12.04.23.png

 

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

 

 

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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
YMD002
遊覧客
17 0 2

キュー小坂さま

 

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

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

 

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

 

 

 

 

 

 

Qcoltd
Shopify Partner
1051 429 417

成功

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

 

 

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

 

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
YMD002
遊覧客
17 0 2

キュー小坂さま

 

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

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

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