Shopify Liquid 变体标签背景图片答案

【问题标题】：Shopify Liquid variant label background imageShopify Liquid 变体标签背景图片
【发布时间】：2022-07-11 15:13:29
【问题描述】：

我有一个名为 \"Trim\" 的变体选项，它的值是黄铜、青铜、铬和镍。对于这些标签中的每一个，我都想要一个动态背景图像。请看下图。

我想像这样在 Trim 选项上有背景图像

到目前为止，为了实现这一点，我创建了一个名为 \"trim_variant_bg\" 的元字段，它采用图像列表并编写了以下代码。

{%- if option.name == \"Trim\"  -%}
           <label 
            style = \"background-image:url(
              {% for var_img in product.metafields.custom.trim_variant_bg.value %}
                {{ var_img | img_url:\"master\" }}
                {% endfor %}
            )\">
 
            </label>
 {% endif %}

但是，代码不起作用。我怎样才能达到预期的输出？请帮忙。

将元添加到产品或变体？
@Onkar 先生，我们需要添加 for 循环来显示元字段吗？
它取决于添加到产品或变体的元字段。如果添加到变体，则需要循环并获取变体元字段而不是产品。
如果添加了变体元数据，请将此作为参考。 identixweb.com/…

标签： image shopify liquid variant

【解决方案1】：

如果你像这样构建你的元字段

{"Bronze" : "your_url", "Gold" : ...}

你可以写

           <label 
            style = 'background-image:url("{{product.metafields.custom.trim_variant_bg[option.value] | img_url: 'master'}}")'>
 
            </label>

请注意您使用的是img_url，因此您在元字段中的 URL 应考虑到这一点。否则，您可以保存最终 URL，而不使用任何过滤器。

【讨论】：