Sort a product Collection by 'random' each time

onyx_au
Explorer
68 1 22

Hey guys,

How can I randomise a product collection everytime a customer goes to that page? I only have a few products, approx 15 or less.

 

Thanks

Replies 6 (6)

Carsten_A
Shopify Partner
16 2 6

What is the context? 

 

  • An app's ResourcePicker?
  • An collection page on the frontend?
    • Are you looking for a Liquid or a Javascript solution?

 

onyx_au
Explorer
68 1 22

@Carsten_A wrote:

What is the context? 

 

  • An app's ResourcePicker?
  • An collection page on the frontend?
    • Are you looking for a Liquid or a Javascript solution?

 


An collection page on the frontend if possible. a Liquid or a Javascript solution if possible to avoid app costs as I only need randomization to a collection to one collection.

 

This is my collection: https://www.onyxhive.com.au/collections/cakes-toppers
Thanks

Carsten_A
Shopify Partner
16 2 6

I asked because this discussion is opened under the "Shopify Apps" category 🙂

I thought it would be easy with liquid, generating a random number to pick a random value from the product object, and sort by that. However, that seems to be impossible due to the data caching. 

Working with Javascript, it's quite easy. However it would slow down your collection pages a bit, since you'd have to remove the product rendering from liquid (essentially your for-loop). You'd have to fetch the collection products, then random sort it, then generate product cards and lastly render it - all with javascript. This means you also have to develop any filter/sorting/pagination functions over again. This will require some technical and javascript understanding to implement. 

rareairdiscs
New Member
4 0 0

Also looking to do this - would it be possible to use "Shopify Flow" to automate this on a daily or weekly basis?  For example - every night at 2am it runs and re-orders?

onyx_au
Explorer
68 1 22

@rareairdiscs wrote:

Also looking to do this - would it be possible to use "Shopify Flow" to automate this on a daily or weekly basis?  For example - every night at 2am it runs and re-orders?


This is the only app that 'randomises' a product category, but it refreshes every so often and I dont think it has a refresh timer. I use this on my site

 

https://apps.shopify.com/power-tools-sort-orders

jtraverso
Shopify Partner
9 0 3

Is not that simple to create a Random Order for a Collection, but I have found a quite close, and in my opinion, very similar solution.

 

In my store I have a collection "New arrivals", I want the shop to show some Random products from that collection, not the same every time.

 

So the solution I came by is not to select them all at random, but to randomly select a point to start and skip the products up to that point, for example if your collection have 100 products, and you want to show 8, you can select any number between 1 to 92 and show 8 products from there.

 

Is not exactly random, and because Shopify have cache It wont show different results every time, but it will change several times in an hour and show different products to regular visitors to your store in that section, so it solves the neccesity.

 

How this works:


Firstly, calculate a random start index based on the current time and ensure it's within the range to display the full set of products you want:

 

{% assign total_products = collection.products.size %}

{% assign max_start = total_products | minus: length %}

{% assign start_index = "now" | date: "%S" | modulo: max_start %}

 

In this code, length is the number of products you wish to display. We use the current second to generate a random number, ensuring the starting index plus the product count doesn't exceed the total available products.

 

Next, iterate over your collection's products and start displaying them only when the loop's index reaches the randomly chosen starting point:

 

{% assign products_shown = 0 %}
{% for product in collection.products %}
{% if forloop.index0 >= start_index %}
<!-- Insert your product display code here -->
{% assign products_shown = products_shown | plus: 1 %}
{% if products_shown >= length %}{% break %}{% endif %}
{% endif %}
{% endfor %}

 

Here, we're controlling the flow with if conditions to start showing products only after hitting our start_index and to stop after displaying the desired number of products (length).

 

This approach keeps your product display efficient while adding a dynamic touch to your Shopify collection pages. It's a simple solution that keeps the user experience fresh without requiring complex coding or external tools.

 

Hope this helps!