画像バナーにリンクを貼る方法について。

日本語 ディスカッション 技術的なQ＆A

Topic summary

画像バナーにコレクションページへのリンクを設定する方法についての質問と解決策。

質問内容:
Dawnテーマで4枚の画像バナーを設置し、それぞれにShopifyのコレクションページへのリンクを貼りたい。スライドショーではなく、静止画像での実装を希望。

提案された解決方法:

  1. コード編集による対応:

    • image-banner.liquidファイルを編集
    • {% schema %}にURL設定項目を追加し、管理画面からリンクURLを設定可能に
    • aタグとCSSスタイルを追加して画像にリンクを実装
    • コードスニペットが詳細に提供されている
    • 事前のバックアップが推奨されている

  2. アプリ利用による対応:

    • 「シンプル画像バナー」アプリの紹介
    • ノーコードで複数のリンク付き画像バナーを簡単に設置可能

状況:
質問者は回答に感謝し、解決に向けて取り組んでいる様子。技術的な解決策とノーコードソリューションの両方が提示された。

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

お世話になります。
現在、Dawnのテーマで海外向けのショップ開設をしています。
画像バナーを４枚設置し、それぞれの画像にShopifyのCollectionのリンクを設置したいです。
画像についてはスライドショーではありません。

こちら対応方法をご存知の方、教えて頂けますと幸いです。
宜しくお願い致します。

1 Like
2

以下の手順をお試しください。

なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。

1.管理画面にログインし、[オンラインストア] > [テーマ] に移動します。

2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

3.「セクション」フォルダ内のimage-banner.liquidファイルを選択します。

  1. 「image-banner-section」という独自のクラス名を追加しておきます（この後の工程でスタイルをあてるためです）。また、{% schema %}以下にリンク設定を追加します。これにより、Shopify管理画面からリンクURLを設定できるようになります。
{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "section image-banner-section",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "url",
      "id": "link-image1",
      "label": "最初の画像のリンク先"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "url",
      "id": "link-image2",
      "label": "2番目の画像のリンク先"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
      "default": 0
    },
    // 他の設定項目...
  ],
  "presets": [
    {
      "name": "t:sections.image-banner.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}
  1. 画像にリンクを貼るためのスタイルを追記します。
{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{%- endstyle -%}

//ここから追記
{% if section.settings.link-image1 != blank or section.settings.link-image2 != blank %}

{% endif %}
//ここまで追記

{%- liquid
  assign full_width = '100vw'
  assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
  1. 「最初の画像」にリンクが挿入されるように、aタグを追記します。
{%- if section.settings.image != blank -%}
    

     //この行を追記

      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
  1. 「2番目の画像」にリンクが挿入されるように、aタグを追記します。
{%- if section.settings.image_2 != blank -%}
    

    //この行を追記

      {%- liquid
        assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
        if section.settings.image != blank
  1. 最後に「保存」をクリックして完了です。
3

遅くなりまして申し訳ありません。

詳細をご丁寧にお答えいただきありがとうございます。

頑張ってみます。

4

‎08-05-2024 09:12 PM

はじめまして

株式会社 UnReact の荻と申します。

既に解決済みではございますが、今後このスレッドをご覧になる方々に向けて、

弊社のアプリ「シンプル画像バナー｜お手軽広告バナーアプリ」も解決策の一つとしてご紹介させていただきます。

KazuhiroOgi_0-1723113560167.webp
KazuhiroOgi_0-1723113560167.webp400×225 14 KB

こちらのアプリを使用すれば、リンク付きの画像バナーを設定することができます。

このアプリでバナーを複数設置し、それぞれにコレクションのリンクを設定することで、

ノーコードで簡単にご要望通りのストアを実現できます。

KazuhiroOgi_1-1723113560192.webp
KazuhiroOgi_1-1723113560192.webp400×225 17.3 KB

下記、参考情報です。

シンプル画像バナー｜お手軽広告バナーアプリ

Shopifyに画像バナーを追加できるアプリについて徹底解説｜ご利用ガイド

その他にも 46 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。

参考アプリ一覧