Ajmal Afif

Nested class with cycle operator in Shopify's Liquid

5th August 2014

I had a hard time finding a way to implement a dynamic nested class on Shopify. Since modulo operator isn't available in Liquid, I thought it should be doable with the cycle operator. However I can't wrap my head around it. After about hours of worming on Google, I finally found it. Here's my solution inside my product-loop.liquid file.

Goal was to have a parent class of row for every 3/4 products cycle.

{% for p in product_collection.products | limit: limit %}
  {% assign product_count = forloop.length %}
    {% cycle 'section-group-start': '<div class="row">', '', '', '' %}
      <div class="col-sm-3">
        {% include '_pm-family-product-loop' with p %}
      </div>
    {% if forloop.last %}</div>{% else %}
      {% cycle 'section-group-end': '', '', '', '</div>' %}
    {% endif %}
{% endfor %}

Reference here.

    Shopify theming tips with BootstrapifyOptimizing Google Page Insight

comments powered by Disqus