Horizon主题商品卡片出现"Related fields"的排查与隐藏求助

使用Horizon主题的店铺，加载商品集合页几秒后，商品卡片中会出现"Related fields"文本，破坏页面展示效果。点击该文本将跳转至商品详情页，未安装追加销售类应用，相关元素检查代码如下：

<overflow-list ref="overflowList" style="--overflow-count: 0;"><template shadowrootmode="open">
<link href="//airbag-il.com/cdn/shop/t/1/assets/overflow-list.css?v=168694168152117541881762081182" rel="stylesheet" type="text/css" media="all">

<ul part="list" style="height: 26.3906px; counter-reset: overflow-count 0;">
  <slot></slot>
  <slot name="more" part="more" hidden="">
    <li part="more">
      <button class="button" type="button" tabindex="0" data-a11y-fixer-processed-focus-style-initial-check="true">
        More
      </button>
    </li>
  </slot>
  <li part="placeholder" hidden=""></li>
</ul>

<div part="overflow">
  <ul part="overflow-list">
    <slot name="overflow"></slot>
  </ul>
</div>

<li class="variant-option__swatch" slot="">
  <label data-media-id="28849904648240" class="variant-option__button-label variant-option__button-label--has-swatch swatch-rounded" on:pointerenter="product-card/previewVariant/28849904648240" on:pointerleave="product-card/resetVariant">
    <input type="radio" name="Color-7776584728624-swatch" value="Black" aria-label="Black" data-input-id="1-0" data-option-media-id="28849904648240" data-option-value-id="2818137948208" data-option-available="true" data-connected-product-url="" checked="" data-available-count="0" data-variant-id="42551855382576" data-first-available-or-first-variant-id="42551855382576" data-a11y-fixer-processed-focus-style-initial-check="true">

</label>
</li>

<li class="variant-option__swatch" slot="">
  <label data-media-id="28815087665200" class="variant-option__button-label variant-option__button-label--has-swatch swatch-rounded" on:pointerenter="product-card/previewVariant/28815087665200" on:pointerleave="product-card/resetVariant">
    <input type="radio" name="Color-7776584728624-swatch" value="Light Blue" aria-label="Light Blue" data-input-id="1-1" data-option-media-id="28815087665200" data-option-value-id="2818137980976" data-option-available="true" data-connected-product-url="" data-available-count="0" data-variant-id="42551855415344" data-first-available-or-first-variant-id="42551855415344" data-a11y-fixer-processed-focus-style-initial-check="true">

</label>
</li>

<li class="variant-option__swatch" slot="">
  <label data-media-id="28849909268528" class="variant-option__button-label variant-option__button-label--has-swatch swatch-rounded" on:pointerenter="product-card/previewVariant/28849909268528" on:pointerleave="product-card/resetVariant">
    <input type="radio" name="Color-7776584728624-swatch" value="Pink" aria-label="Pink" data-input-id="1-2" data-option-media-id="28849909268528" data-option-value-id="2818138013744" data-option-available="true" data-connected-product-url="" data-available-count="0" data-variant-id="42551855448112" data-first-available-or-first-variant-id="42551855448112" data-a11y-fixer-processed-focus-style-initial-check="true">

</label>
</li><li slot="more">
  <button class="hidden-swatches__count" aria-label="Show all options" on:click="/showAllSwatches" data-a11y-fixer-processed-focus-style-initial-check="true" type="button"></button>
</li>

</fieldset><script type="application/json">
{"id":42551855382576,"title":"Black","option1":"Black","option2":null,"option3":null,"sku":null,"requires_shipping":false,"taxable":true,"featured_image":{"id":37991470825520,"product_id":7776584728624,"position":1,"created_at":"2025-11-10T16:16:13+02:00","updated_at":"2025-11-12T16:56:16+02:00","alt":"Black","width":512,"height":512,"src":"//airbag-il.com/cdn/shop/files/light.jpg?v=1762959376","variant_ids":[42551855382576]},"available":true,"name":"AIRBAG LIGHT (אחסון מתחת למושב) - Black","public_title":"Black","options":["Black"],"price":39900,"weight":0,"compare_at_price":50000,"inventory_management":null,"barcode":"","featured_media":{"alt":"Black","id":28849904648240,"position":1,"preview_image":{"aspect_ratio":1.0,"height":512,"width":512,"src":"//airbag-il.com/cdn/shop/files/light.jpg?v=1762959376"}},"requires_selling_plan":false,"selling_plan_allocations":[],"quantity_rule":{"min":1,"max":null,"increment":1}}
</script>

原因分析 #

• 变体折叠组件渲染异常：商品卡片用overflow-list组件处理变体色板的折叠，原本more插槽应显示"Show all options"按钮，因主题代码逻辑错误（翻译键匹配失败、硬编码文本错误），被替换成了"Related fields"。
• 异步脚本执行错误：文本在页面加载几秒后出现，说明是处理变体显示的异步脚本动态渲染时出错，脚本中可能错误赋值了文本内容。
• 主题组件自定义冲突：Horizon主题对Shopify原生overflow-list组件的自定义修改存在漏洞，导致插槽内容显示异常。

解决方法 #

方法1：CSS强制隐藏 #

快速隐藏错误文本，添加以下自定义CSS到主题的自定义CSS区域：

/* 定位错误元素，若选择器不符可通过开发者工具调整 */
.product-card .overflow-list [slot="more"] .hidden-swatches__count {
    display: none !important;
}

方法2：修复主题代码 #

1. 修改变体模板：进入Shopify主题代码编辑器，找到商品卡片变体相关文件（如snippets/product-variant.liquid或sections/product-card.liquid），定位overflow-list的more插槽部分，将错误文本替换为"显示全部选项"或对应语言的正确内容。
2. 检查主题脚本：查找处理变体的JS文件（如assets/product-card.js），搜索"Related fields"字符串，替换为正确文本。
3. 恢复组件默认配置：若自定义修改导致组件异常，可恢复主题默认的overflow-list组件代码。

方法3：检查主题自定义设置 #

进入Shopify后台在线商店 > 主题 > 自定义，找到商品集合页的商品卡片设置，查看"显示更多变体选项"的文本配置是否正确，调整为预期内容。

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