Randomize the order of Products in "Features Collection"

[WunderSticker]

Hello,

I have a store where on the Main page the first section is some Hand Picked Collections and after that All Products are listed with "Featured Collection", I have attached a Screenshot.

I have added all Available Collections to this Featured collection and it also shows all Products, however unfortunately it always orders them Alphabetically order and I would love that this is radomized. So each time a user opens or reloads the page it shows a different order of the products. 

I am not able to find any setting to randomise this content.

I am using the Spotlight Theme if this is relevant to this question.

The Store in Question is:

https://wundersticker.com/

[ThePrimeWeb]

Hey @WunderSticker,

I had to go and study up on a whole algorithmn for this 😵. I just learned about it too, so if you are interested, it's called the Fisher-Yates Shuffle Algorithm

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Above the tag "</body>" tag paste the following. Screenshot attached for reference.

<script>
document.addEventListener('DOMContentLoaded', function () {
    var ul = document.querySelector('.product-grid');
    var lis = Array.from(ul.getElementsByClassName('grid__item'));

    for (var i = lis.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        ul.insertBefore(lis[j], lis[i]);
    }
});
</script>

sometimes that may not work, if it doesn't just use this. 

<script>
var shuffled = false;
setInterval(function() {

    if(shuffled) {
        return;
    }
    
    try{
        var ul = document.querySelector('.product-grid');
        var lis = Array.from(ul.getElementsByClassName('grid__item'));
  
        for (var i = lis.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            ul.insertBefore(lis[j], lis[i]);
        }
        shuffled = true;
    } catch {
       console.log('failed') 
    }
    
}, 1000)
</script>

Screenshot for reference

[Ryanbekaert]

Brilliant. ❤️

[DYKCEN]

Is this code theme specific? I'm using the another theme and it doesn't seem to work for me.

[ThePrimeWeb]

It's not theme specific, but since every theme is made by different people, your theme may need a different code. Can you share the link to your store, along with a screenshot of where you want this effect and I'll take a look.

[DYKCEN]

Sure thing.
My store is edyk.dk

I've got a featured collection on the frontpage, currently with 16 products, but set to only show 12. I'd like those products to be randomized in order, like it is on OP's webshop.

For some reason, I can only attach .csv files. So here a link to the screenshot:

https://cdn.shopify.com/s/files/1/0550/9165/8960/files/Featured_collection.jpg?v=1712834953

[ThePrimeWeb]

Hey @DYKCEN,

Try 

<script>
document.addEventListener('DOMContentLoaded', function () {
    var ul = document.querySelector('.product-list');
    var lis = Array.from(ul.querySelectorAll('.product-item'));

    for (var i = lis.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        ul.insertBefore(lis[j], lis[i]);
    }
});
</script>

or 

<script>
var shuffled = false;
setInterval(function() {

    if(shuffled) {
        return;
    }
    
    try{
        var ul = document.querySelector('.product-list');
        var lis = Array.from(ul.querySelectorAll('.product-item'));

        for (var i = lis.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            ul.insertBefore(lis[j], lis[i]);
        }
        shuffled = true;
    } catch {
       console.log('failed') 
    }
    
}, 1000)
</script>

Either one should work, but try the first one before trying the second. The instructions are the same as shown in the previous post.

[DYKCEN]

The first solution works like a charm. Thanks a bunch 🙂

[noblemono]

Do you have code for trade theme?

[noblemono]

https://www.noblemono.com/

[ThePrimeWeb]

You can use this code @noblemono, Instructions are the same as above.

<script>
document.addEventListener('DOMContentLoaded', function () {
    var ul = document.querySelector('.product-grid.contains-card');
    var lis = Array.from(ul.querySelectorAll('.grid__item'));

    for (var i = lis.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        ul.insertBefore(lis[j], lis[i]);
    }
});
</script>

[noblemono]

thank you sir !

[noblemono]

Is it just a random list of the most recently posted products? Do you want it to randomize products all over the website? Now all products are selected in the same category. But it only randomly appears on the products that were just posted.

[ThePrimeWeb]

Only posted products, you can't randomize based on products that are not shown

[noblemono]

Yes, it's randomly sorted by name, right? Do you want it to randomize every product in the listed categories?

[Pede]

Hi there, thanks much but I have an additional question?

I'm using a code with permits me to show all variants in the collection list. Is your code considering only products right? 

Do you think it could be even possible to mix up randomly the collection list with my variants, that actually are all in a row (all colours of the same article in a row)  www.mille-emozioni.com 

I used this code: https://websensepro.com/blog/show-variants-as-separate-products-on-shopify?unapproved=76714&moderati...

[jason_mageau]

amazing - how would I do this for my "new from" section on my home page at fadedblk.com

[ThePrimeWeb]

Hey @jason_mageau

You should use this code. Use the instructions as mentioned above.

<script>
document.addEventListener('DOMContentLoaded', function () {
    var ul = document.querySelector('.featured-collection__container .grid');
    var lis = Array.from(ul.querySelectorAll('.product-grid-item'));

    for (var i = lis.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        ul.insertBefore(lis[j], lis[i]);
    }
});
</script>

[JacJacC]

hi @ThePrimeWeb , just wondering can it apply to the featured collection in the product page as well? Thanks.

[AmericanBison]

@ThePrimeWeb You're an absolute legend. I've spent weeks looking for a solution to this.. 😩

Sucks this isn't a native part of Shopify, and that it can't pull other products that aren't currently visible to shuffle them in as well, but for how simple this is...THANK YOU.

[Vinayfashion]

Hi, I am using the Impulse theme. Here is the link to my website: https://www.vinayfashion.com/collections/shop

Could you please guide me? While it's in the "sort" in sorting bar ( where we select sort like price high to low ), can I make the products shuffle randomly on every refresh using coding?

[Ypomoni]

Hello @ThePrimeWeb Can you please help me! 
My website is ypomoni.ro

I am using Prestige theme

Sems that no code is woking for me. Please Help!