Shopify添加带链接的banner图

Shopify免费主题的banner图只可以点击按钮链接，图片是没有链接的，因此只能点击按钮跳转到相应页面。

下面，我将展示如何添加带链接的整张banner图。

进入shopify后台-在线商店-模板，点击三个点图标，编辑代码

添加新分区

复制粘贴代码如下

{% schema %}
{
  "name": "Image with Link",
  "settings": [
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "Banner Image"
    },
    {
      "type": "text",
      "id": "image_width",
      "label": "Image Width",
      "default": "100%"
    },
    {
      "type": "text",
      "id": "image_height",
      "label": "Image Height",
      "default": "auto"
    },
    {
      "type": "url",
      "id": "banner_link",
      "label": "Banner Link"
    }
  ],
  "presets": [
    {
      "name": "Image with Link",
      "category": "Custom"
    }
  ]
}
{% endschema %}

{% if section.settings.banner_image %}
  <a href="{{ section.settings.banner_link }}" class="banner-link">
    <img src="{{ section.settings.banner_image | img_url: 'master' }}" alt="Banner Image" style="width: {{ section.settings.image_width }}; height: {{ section.settings.image_height }};">
  </a>
{% endif %}

<style>
.banner-link {
  display: block;
  text-align: center;
}
</style>

然后自定义模板

就可以添加这个图片带链接的新分区了

可以选择图片，设置图片长宽，以及链接。