Shopify Boundless產品收集網格中的非產品圖像

Question

我想在Boundless主題集合產品網格中插入靜態非產品圖像，以便將其切割一點並將一些額外的視覺內容添加到我的服裝商店。

沿PROD1，Prod2的，Prod3，NonProd1，Prod4，Prod5，NonProd2，Prod6，Prod7等的線

東西插入圖像將需要被不規則地放置出於美觀的原因，所以在此，控制它們坐下來會很有用。

是否有任何方式通過修改或替換collection.liquid或其他模板來實現此目的？在液體文件中，我認爲有一個循環系統在使用，但不幸的是我無法弄清楚。

我的收藏不改變大小，我很高興爲每個收藏品設計不同的液體模板。

我已經調整和改裝無邊的主題得到我想要的東西，有一天我會用木材重新開始，但現在這是一個有點超出我...

謝謝尋求幫助。

Answer 1

集合模板使用for循環，並且在for循環中，您可以訪問以下forloop.index，它返回當前迭代編號。

因此在收集文件中可以添加以下內容。

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

如果你想要更多的控制這一點，你可以在4號設置主題設置選項，它從主題設置面板中更改，這樣你就不必從代碼中每一次修改。

Answer 2

有幾種方法，這取決於你想如何管理它，以及你想達到的目標。

如果你真的想策劃你可以使用config/settings_schema.json圖像或/sections

所有你需要做的就是定義圖像或image_picker架構中的像這樣：

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

然後你可以參考像這樣的選擇圖像{{ settings.image_id }}

以上是爲網站設置架構，部分大致相同，但確實有一些重要的細微差別，所以它值得閱讀完全提供的來源。

或者，如果您想要顯示產品的特色圖片，您可以做一個循環的集合：哪裏最近是集合的句柄。

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

如果你不確定是提供給你的對象或標籤的的cheatsheet是go to。