使用 shopify 和 Liquid 在产品图片的右上角添加一个小徽标

Question

我希望在产品图片的右上角添加一个小徽标。棘手的一点是，我只希望它出现在与给定产品标签相对应的产品图像上。例如：仅当产品具有“Fit Left Fit Left”标签时，才会在产品图片上显示叠加层“FitLeftFitRight.jpg”。

我正在使用 Shopify，它使用 Liquid 作为其标记语言。

非常感谢您的帮助。

谢谢。

Answer 1

请发布包含产品图片元素的液体文件。我对解决这个问题的初步猜测是将产品图像/滑块包装在 <div> 标记中，样式为 position: relative，并添加样式为 position: absolute; top: 0; right: 0; 的徽标

要仅出现在带有标签Fit Left Fit Left 的产品页面上，您可以遍历产品标签，如果找到标签，则显示徽标，如以下代码所示。

{% assign tagFound = false %}

{% for tag in product.tags %}

  {% if tag == "Fit Left Fit Left" %}
    {% assign tagFound = true %}
  {% endif %}

{% endfor %}

// Place this inside the product image wrapper <div> with position relative
{% if tagFound == true %}
  <img src="logo-url-here.jpg" style="position: absolute; top: 0; right: 0;" />
{% endif %}