How can I randomize the display order of items in a collection?

Shahaxyz
Visitor
1 0 0

Hello, I have a collection where I only display 3 items, however I am trying to randomize the order of the items. Shuffle isn't working. How can i display the items in a random order ?

 

 

 

{% capture listItems %}
{% paginate collections.all.products by 999 %}
{%- assign item_count = 0 -%}
{%- for item in collections.all.products -%}
  {%- if item.title != 'Chain' and item_count < 3 -%}
    <div role="listitem" class="large-collection-item w-dyn-item">
      <a href="{{ item.url }}" class="product-card-copy-2 w-inline-block">
        <div class="card-image-wrapper">
          <div class="card-img extra-large">
            <div data-w-id="0462e63a-69a8-dbd6-6071-61d7bacebf48" class="background-product">
              <div class="img-card-one one" style="background-image: url('{{ item.images[0] | img_url: 'master' }}')" data-commerce-type="variation-image"></div>
              <div class="img-card-one two" style="background-image: url('{{ item.images[1] | img_url: 'master' }}')"></div>
            </div>
          </div>
        </div>
        <div class="card-info">
          <div id="w-node-_0462e63a-69a8-dbd6-6071-61d7bacebf4f-51ad9f5b" class="product-card-top">
            <div class="product-card-info">
              <div class="product-tags">
                {%- if item.metafields.udesly['discount-percentage'] -%}
                  <div class="discount-label">
                    <img src="{{ 'tag-filled-red24x242x.svg' | asset_url }}" loading="lazy" id="w-node-_0462e63a-69a8-dbd6-6071-61d7bacebf56-51ad9f5b" alt="" class="tag-icon">
                    <div class="label-text-2 discount">{{ item.metafields.udesly['discount-percentage'] }}</div>
                  </div>
                {%- endif -%}
              </div>
              <div class="stacked-product-title">
                <h3 class="product-title">{{ item.title }}</h3>
                <div class="subtitle small">{{ item.metafields.udesly['category-text'] }}</div>
              </div>
            </div>
            <div class="dynamic-price">
              <div data-commerce-type="variation-price" class="price-text">{{ item.price | money_with_currency }}</div>
              <div class="discount-text" data-commerce-type="variation-compare_at_price">{{ item.selected_or_first_available_variant.compare_at_price | money_with_currency }}</div>
            </div>
          </div>
        </div>
      </a>
    </div>
    {%- assign item_count = item_count | plus: 1 -%}
  {%- endif -%}
{%- endfor -%}
{% endpaginate %}
{% endcapture %}
{% assign items_length = listItems | strip | size %}



<div id="w-node-_5d10c2e1-3c53-7f31-ede3-90a3b8a681ed-51ad9f5b" class="w-dyn-list" udy-collection="product">
                  {%- unless items_length == 0 -%}<div role="list" class="product-grid w-dyn-items">
                    {{ listItems }}
                  </div>{%- endunless -%}
                  {%- if items_length == 0 -%}<div class="w-dyn-empty">
                    <div>No items found.</div>
                  </div>{%- endif -%}
                </div>

 

 

 

 

Replies 0 (0)