FROM CACHE - jp_header
解決済

Dawn 画像バナー リンク設定

ucch111
Shopify Partner
10 1 2

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

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

 

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

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

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 429 413

成功

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

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

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

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}

 

ご参考まで。

(キュー小坂)

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

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1051 429 413

成功

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

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

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

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}

 

ご参考まで。

(キュー小坂)

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

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

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