loop on collection with specific number of products selected shopify

Question

I am new in liquid (shopify)

I try to loop in a collection by a specific number of products in a cycle, but my output is wrong. To understand, example:

output: First products from 1-6, then goes for 7-12, . But it shows only the first 6 products of the collections. anyone can help me a bit in the code below? Below is my code:

    {% assign product_x_page = 6 %}
{% assign product_number_in_collection = collection.all_products_count %}
{% comment %}{{ product_number_in_collection }}{% endcomment %}
{% assign number_of_pag_cycle = product_number_in_collection | divided_by: product_x_page %}
{% comment %}{{ number_of_pag_cycle }}{% endcomment %}

{% assign image_size = 'compact' %}
{% assign all_collection = 'related' %}
{% assign heading = 'You may also like' %}

{% if collection and collection.products_count > 1 %}
<h3 align="center">{{ heading }} of {{ collection.title }}</h3>
<br>

<div class="slickslide_container" role='toolbar'>  

{% assign ciclo = 0 %}

{% for loops in (1..number_of_pag_cycle) %}  

  <div> 

    <ul class="related-products">

    {% assign ciclo = ciclo | plus: 1 %}
    {{ciclo}}



    {% for product in collection.products %}

          <li>
            <div class="image">
              <a href="{{ product.url | within: collection }}" title="{{ product.title | escape }}">
                {{ product.featured_image | product_img_url: image_size | img_tag }}
              </a>
            </div>
            <h4><a href="{{ product.url }}" title="{{ product.title | escape }}">{{ product.title }}</a></h4>
            <span class="money">{{ product.price | money }}</span>
          </li>

    {% endfor %}
    </ul>   
  </div> 

{% endfor %}  


  {% endif %}
</div>

Answer 1

You can query the 6 first results using the limit parameter like so:

{% for product in collection.products limit:6 %}

You can also query products 7 to 12 with a different parameter called offset like so:

{% for product in collection.products offset:6 %}

Check out the Shopify liquid docs for iteration tags.

If your goal is to display 6 results per page, take a look at the pagination object.

Answer 2

here the code to that i ask to use with slick.js :

{% assign products_x_page = 6.0 %}
{% assign page_offset = 0 %}

{% assign product_number_in_collection = collection.products.size %}
{% comment %}{{ product_number_in_collection }}{% endcomment %}
{{ product_number_in_collection }}<br><br>

{% assign number_of_pag_cycle = product_number_in_collection | divided_by: products_x_page  %}
{% assign number_of_pag_cycle = number_of_pag_cycle | ceil %}
{% comment %}{{ number_of_pag_cycle }}{% endcomment %}
{{ number_of_pag_cycle }}


{% assign image_size = 'compact' %}
{% assign all_collection = 'related' %}
{% assign heading = 'You may also like' %}



{% if collection and collection.products_count > 1 %}

<h3 align="center">{{ heading }} of {{ collection.title }}</h3>
<br>

<div class="slickslide_container" role='toolbar'>  

{% assign ciclo = 0 %}

{% for loops in (1..number_of_pag_cycle) %} 

  {% if forloop.first == false %}
        {% assign page_offset = page_offset |plus: products_x_page %}
  {% endif %}
  {% comment %}{{page_offset}}{% endcomment %}

  <div> 

    <ul class="related-products">

    {% assign ciclo = ciclo | plus: 1 %}
    {% comment %}{{ciclo}}{% endcomment %}

    {% assign product_num = 0 %}


    {% for product in collection.products offset: page_offset %}

        {% assign product_num = product_num | plus: 1 %}


          <li>
            <div class="image">{% comment %}{{product_num}}{% endcomment %}
              <a href="{{ product.url | within: collection }}" title="{{ product.title | escape }}">
                {{ product.featured_image | product_img_url: image_size | img_tag }}
              </a>
            </div>
            <h4><a href="{{ product.url }}" title="{{ product.title | escape }}">{{ product.title }}</a></h4>
            <span class="money">{{ product.price | money }}</span>
          </li>

        {% if product_num == products_x_page %}
            {% break %}         
        {% endif %}

    {% endfor %}
    </ul>   
  </div> 

{% endfor %}  



</div>
{% endif %}  

<style type="text/css">
.related-products { list-style-type:none }
{% case image_size %}
{% when 'small' %}
.related-products * { font-size:12px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:10px 0 0 0; line-height:1.3 }
.related-products div.image { height:100px }
.related-products li { float:left; width:120px; height:160px; margin-right:20px }
{% when 'compact' %}
.related-products * { font-size:13px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:5px 0 0 0; line-height:1.5 }
.related-products div.image { height:160px }
.related-products li { float:left; width:220px; height:220px; margin-right:0px }
{% when 'medium' %}
.related-products * { font-size:14px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:10px 0 0 0; line-height:1.8 }
.related-products div.image { height:240px }
.related-products li { float:left; width:260px; height:300px; margin-right:25px }
{% endcase %}
.related-products { overflow:hidden }
.related-products span.money { font-size:0.8em }
.related-products li:last-child { margin-right:0 }
</style>



  <script type='text/javascript'>
    $(function(){
      $('div.slickslide_container').slick({
        dots: true,
        infinite: false,
        speed: 300,
        slidesToShow: 1,
        adaptiveHeight: true
      });      
    });
  </script>