1

私はコーディングに比較的慣れておらず、過去 3 か月間試していました。

私は shopify に取り組んでいますが、問題は、すべてのコレクション ページの 4 番目の画像を残りの画像よりも大きくする必要があることです。

現在のテーマ:
コレクション内の最小限の現在のコード: 

<div class="row products">

{% for product in collection.products limit: settings.pagination_limit %}     
    {% include 'product-loop' with collection.handle %}
{% endfor %}

<div>

私は調査しましたが、何か関係があるかもしれませんが{% if forloop.index == 4 %}、まだ解決できないようです。したがって、これについて専門家の助けが必要です.

4

2 に答える 2

0

Minimal Shopify テーマでは、 collection.liquidで次のようにすることをお勧めします。

<div class="row products">
  {% for product in collection.products limit: settings.pagination_limit %}
    {% if forloop.index == 4 %}
      {% assign image_size = 'large' %} 
    {% else %}
      {% assign image_size = 'small' %} 
    {% endif %}

    {% include 'product-loop' with collection.handle with image_size %}
  {% endfor %}
</div>

そして、product-loop.liquid の次の行を変更します。

<img src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape  }}" />

これに：

<img src="{{ product.featured_image | product_img_url: image_size }}" alt="{{ product.title | escape  }}" />

コレクション内の 4 番目の製品の画像は大きくなり、他のすべての製品の画像は小さくなります。ただし、4 番目ごとの製品画像を大きくしたい場合は、代わりにこれをcollection.liquidに配置します。

<div class="row products">
  {% for product in collection.products limit: settings.pagination_limit %}
    {% capture image_size %}{% cycle 'small', 'small', 'small', 'large' %}{% endcapture %}
    {% include 'product-loop' with collection.handle with image_size %}
  {% endfor %}
</div>
于 2013-09-24T01:17:01.760 に答える