将这个超链接按钮变成图片超链接（Liquid Shopify 代码）

Question

最重要的是：我不会编码。

我正在尝试编辑此代码，以便代码中的按钮实际上显示为图像而不是灰色按钮。我尝试过人工智能，但并没有像我想象的那样有帮助。

下面是 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__

就像我说的，我无法编码 id 喜欢这方面的帮助。谢谢。

Answer 1

您只需将代码 {{ block.settings.button_label | escape }} 和/或 {{ block.settings.button_label_2 | escape }} 替换为您的图片标签。要正确地做到这一点，您需要添加一个新的主题设置，该设置接受一个图像，给它一个类似 button_image 的 id，并用图像替换标签。