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

matsuri89 · ‎06-28-2024

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

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

株式会社ナレッジサービス · ‎07-02-2024

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

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

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

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

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

4. 「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 %}

5. 画像にリンクを貼るためのスタイルを追記します。

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

<style>
.image-banner-section {
    position: relative;
}

#shopify-section-header {
    z-index: 4 !important;
}

.image-banner-section a.custom-link {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}
</style>
{% endif %}
//ここまで追記

{%- liquid
  assign full_width = '100vw'
  assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'

6. 「最初の画像」にリンクが挿入されるように、aタグを追記します。

{%- if section.settings.image != blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">

    <a class="custom-link" href="{{ section.settings.link-image1 }}"></a> //この行を追記

      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank

7. 「2番目の画像」にリンクが挿入されるように、aタグを追記します。

{%- if section.settings.image_2 != blank -%}
    <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">

    <a class="custom-link" href="{{ section.settings.link-image2 }}"></a>//この行を追記

      {%- liquid
        assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
        if section.settings.image != blank

8. 最後に「保存」をクリックして完了です。

元の投稿で解決策を見る

株式会社ナレッジサービス · ‎07-02-2024