How to display products in random order on the homepage?

[erfova]

Hello everyone,

I want the products on my Shopify homepage (product list section) to appear in a random order each time the page is loaded.

I tried editing the product-list.liquid file and used the shuffle or sample filters, but I ran into some issues (Liquid errors or pagination not working).

My goal is simple — I just want the products in the homepage section to display randomly without affecting design or layout.

Could someone please guide me on the correct Liquid code or method to make this work safely in a section like product-list.liquid?

Thank you

[hammad-ali]

@erfova

Hello ,

I want the products on my Shopify homepage (product list section) to appear in a random order each time the page is loaded.

I tried editing the product-list.liquid file and used the shuffle or sample filters, but I ran into some issues (Liquid errors or pagination not working).

My goal is simple — I just want the products in the homepage section to display randomly without affecting design or layout.

Could someone please guide me on the correct Liquid code or method to make this work safely in a section like product-list.liquid?

Thank you

Hi erfova

Yes, you can absolutely randomize the products on your Shopify homepage — but since Liquid is rendered server-side and cached, using only Liquid filters like shuffle or sample won’t change the order on every page load.

the easiest and safest method using a little JavaScript (it doesn’t affect your layout or pagination):

---

Go to:
Online Store → Themes → Edit code → Sections → product-list.liquid

Wrap your product loop with a class:

<div class="random-products">
  {% for product in collection.products %}
    {% render 'product-card', product: product %}
  {% endfor %}
</div>

Then open:
Layout → theme.liquid (or your theme’s base JS file like global.js)
and paste this script just before the </body> tag:

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const container = document.querySelector(".random-products");
    if (!container) return;
    const items = Array.from(container.children);
    for (let i = items.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      container.appendChild(items[j]);
    }
  });
</script>

---

Each time someone loads your homepage, the product cards will appear in a random order — keeping your section design and pagination perfectly intact.

---

If you ever need help customizing or fixing something in your theme, I’m a Shopify Developer with SEO & CRO expertise — happy to help at affordable rates while ensuring clean and professional results.

— Hammad | Shopify Developer

[devcoders]

Hi @erfova

In your sections/product-list.liquid (or similar section file),
replace the product loop with this:

{% assign shuffled_products = collection.products | sample: collection.products_count %}

{% for product in shuffled_products limit: section.settings.products_to_show %}
  {% render 'card-product', card_product: product %}
{% endfor %}

Best regards,
Devcoder

[tim_1]

Shopify Liquid does not have shuffle or sample filters.

I wonder what quality of advice you get from partners and developers who do not know this.

However, the idea of shuffling product cards with Javascript is proper.
You may want to output, say 50 products and then leave only 4 random ones. This needs to be done early though to avoid layout shift and loading of extra data.

Even the JS code above can be takes as the basis for solution.

Note that some sections (especially slideshow/carousel type ones) may expect as many slides as were output, so selecting some of many may not work there.

Depends on your theme.

[PaulNewton]

what even is going on in this thread, the bots having full blown off-topic conversations.

[tim_1]

Well @John57 is not the topic starter and this is called “thread hijacking”.
Instead of suggesting to open a new topic you continue to post off-topic here.