Shopify Boundless 产品集合网格中的非产品图像答案

【问题标题】：Non-product images in Shopify Boundless product collection gridShopify Boundless 产品集合网格中的非产品图像
【发布时间】：2017-02-09 17:58:28
【问题描述】：

我想在 Boundless 主题系列产品网格中插入静态非产品图像，以便将其切碎并为我的服装店添加一些额外的视觉内容。

类似于 Prod1、Prod2、Prod3、NonProd1、Prod4、Prod5、NonProd2、Prod6、Prod7 等。

出于美学原因，插入的图像需要不规则地放置，因此控制它们的位置会很有用。

有没有办法通过修改或替换 collection.liquid 或其他模板来实现这一点？在我看来，从液体文件中可以看出有一个循环系统在起作用，但不幸的是我无法弄清楚。

我的收藏不会改变大小，我很高兴为每个收藏提供不同的液体模板。

我一直在调整和修改无限主题以获得我想要的东西，有一天我会从 Timber 重新开始，但现在这有点超出我的能力......

感谢您的帮助。

【问题讨论】：

【解决方案1】：

集合模板使用 for 循环，在 for 循环中，您可以访问以下 forloop.index，它返回当前的迭代次数。

所以你可以在集合文件中添加以下内容。

{% if forloop.index == 4 %}
    <div class="non-product">
        <img src="SRC" alt="">
    </div>
{% endif %}

如果您想对此进行更多控制，您可以为数字 4 设置一个主题设置选项，然后从主题设置面板中更改它，这样您就不必每次都从代码中修改它。

【讨论】：

【解决方案2】：

有几种方法，这实际上取决于您想要如何管理它以及您想要实现的具体目标。

如果您真的想整理图片，可以使用config/settings_schema.json 或/sections

您需要做的就是在您的架构中定义一个图像或 image_picker，如下所示：

  {
    "type": "image_picker",
    "id": "image_id",
    "label": "Image"
  },

然后你可以像{{ settings.image_id }}那样引用选择图像

以上是网站设置架构，各部分大致相同，但确实有一些重要的细微差别，因此值得全面阅读所提供的资源。

或者，如果您想展示带有图片的产品，您可以对集合进行循环：其中 most-recent 是集合的句柄。

{% for product in collections.most-recent.products %}
  <a href="{{ product.url }}">
    {{ product.featued_image }}
  </a>
{% endfor %}

如果您不确定可以使用的对象或标签，则备忘单是go to。

【讨论】：