Shopify 2024.09.24

DAWNの画像バナーにリンクを貼る方法

ShopifyのDAWNテーマの画像バナーにリンクを貼って、画像をクリックすればページが遷移する仕様に変更する方法を解説します。

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

まずは、Shopify管理画面からリンクURLを設定できるように、{% schema %}以下にリンク設定を追加しておきます。また、この後の工程でスタイルをあてるために「image-banner-section」という独自のクラス名も追加しておきます。

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

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

{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{%- endstyle -%}

{% comment %} ここから下を追記 {% endcomment %}
{% 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 %}
{% comment %} ここまでを追記 {% endcomment %}

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

「最初の画像」にリンクが挿入されるように、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 %}">

{% comment %} この行を追記 {% endcomment %}
  <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

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

  {% comment %} この行を追記 {% endcomment %}
  <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

DAWNの画像バナーにリンクを貼る方法

よく読まれている記事

カテゴリー

お問い合わせ・ご相談