将Shopify Liquid代码中的超链接按钮改为图片超链接求助

开发者阿泽

2026-8-5

替换Shopify灰色按钮为图片超链接的可行方案

无编码基础，尝试修改Shopify Liquid代码将灰色按钮（secondary样式）替换为图片形式的超链接，AI生成代码无效，以下是可行的修改方案：

原Shopify代码

<div class="isolate{% unless section.settings.full_width %} page-width{% endunless %}">
  <div class="rich-text content-container color-{{ section.settings.color_scheme }} gradient{% if section.settings.full_width %} rich-text--full-width content-container--full-width{% endif %} section-{{ section.id }}-padding">
    <div class="rich-text__wrapper rich-text__wrapper--{{ section.settings.desktop_content_position }}{% if section.settings.full_width %} page-width{% endif %}">
      <div class="rich-text__blocks {{ section.settings.content_alignment }}">
        {%- for block in section.blocks -%}
          {%- case block.type -%}
            {%- when 'heading' -%}
              <h2 class="rich-text__heading rte {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
                {{ block.settings.heading | replace: 'p>', 'span>' }}
              </h2>
            {%- when 'caption' -%}
              <p class="rich-text__caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }}" {{ block.shopify_attributes }}>
                {{ block.settings.caption | escape }}
              </p>
            {%- when 'text' -%}
              <div class="rich-text__text rte" {{ block.shopify_attributes }}>
                {{ block.settings.text }}
              </div>
            {%- when 'button' -%}
              <div class="rich-text__buttons{% if block.settings.button_label != blank and block.settings.button_label_2 != blank %} rich-text__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
                {%- if block.settings.button_label != blank -%}
                  <a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label | 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 -%}
              </div>
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

AI生成的无效代码

<div class="image-with-text image-with-text--{{ section.settings.content_layout }} page-width isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == 'background-1' and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %} section-{{ section.id }}-padding">
  <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
    <div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
      <a href="http://www.example.com" class="image-with-text__media image-with-text__

可行修改方案

方案一：快速替换（硬编码图片URL）

找到原代码中{% when 'button' %}对应的区块，替换为以下代码：

{%- when 'button' -%}
  <div class="rich-text__buttons{% if block.settings.button_label != blank and block.settings.button_label_2 != blank %} rich-text__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
    {%- if block.settings.button_label != blank -%}
      {% if block.settings.button_style_secondary %}
        <!-- 灰色按钮替换为图片链接 -->
        <a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button-image">
          <img src="你的按钮图片URL" alt="{{ block.settings.button_label | escape }}" style="max-width:100%; height:auto;">
        </a>
      {% else %}
        <!-- 保留原主按钮样式 -->
        <a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button button--primary">{{ block.settings.button_label | escape }}</a>
      {% endif %}
    {%- endif -%}
    {%- if block.settings.button_label_2 != blank -%}
      {% if block.settings.button_style_secondary_2 %}
        <!-- 第二个灰色按钮替换为图片链接 -->
        <a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button-image">
          <img src="你的第二个按钮图片URL" alt="{{ block.settings.button_label_2 | escape }}" style="max-width:100%; height:auto;">
        </a>
      {% else %}
        <!-- 保留原第二个主按钮样式 -->
        <a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button button--primary">{{ block.settings.button_label_2 | escape }}</a>
      {% endif %}
    {%- endif -%}
  </div>

将你的按钮图片URL替换为实际图片地址（可通过Shopify后台「内容>文件」上传图片后获取URL）
如需调整图片样式，可添加内联样式或自定义CSS

方案二：后台可控上传（推荐）

步骤1：添加后台图片设置项

找到当前section文件末尾的{% schema %}区块，在blocks数组中type: 'button'的settings里添加图片选择字段：

{
  "type": "button",
  "name": "按钮",
  "settings": [
    // 保留原有的button_label、button_link等设置项
    {
      "type": "image_picker",
      "id": "button_image",
      "label": "Secondary按钮图片"
    },
    {
      "type": "image_picker",
      "id": "button_image_2",
      "label": "第二个Secondary按钮图片"
    }
  ]
}

步骤2：修改按钮渲染代码

将原{% when 'button' %}区块替换为以下代码：

{%- when 'button' -%}
  <div class="rich-text__buttons{% if block.settings.button_label != blank and block.settings.button_label_2 != blank %} rich-text__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
    {%- if block.settings.button_label != blank -%}
      {% if block.settings.button_style_secondary and block.settings.button_image %}
        <a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button-image">
          <img src="{{ block.settings.button_image | img_url: 'original' }}" alt="{{ block.settings.button_label | escape }}" style="max-width:100%; height:auto;">
        </a>
      {% else %}
        <a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label | escape }}</a>
      {% endif %}
    {%- endif -%}
    {%- if block.settings.button_label_2 != blank -%}
      {% if block.settings.button_style_secondary_2 and block.settings.button_image_2 %}
        <a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button-image">
          <img src="{{ block.settings.button_image_2 | img_url: 'original' }}" alt="{{ block.settings.button_label_2 | escape }}" style="max-width:100%; height:auto;">
        </a>
      {% else %}
        <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 %}
    {%- endif -%}
  </div>

步骤3：优化图片按钮样式（可选）

在主题的CSS文件中添加以下样式，优化图片按钮的交互效果：

.button-image {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.button-image img:hover {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.button-image[aria-disabled="true"] img {
  opacity: 0.5;
  cursor: not-allowed;
}

内容的提问来源于stack exchange，提问作者oyesoyes

将Shopify Liquid代码中的超链接按钮改为图片超链接求助

原Shopify代码 #

AI生成的无效代码 #

可行修改方案 #

方案一：快速替换（硬编码图片URL） #

方案二：后台可控上传（推荐） #