Randomize the order of Products in "Features Collection"

Randomize the order of Products in "Features Collection"

WunderSticker
Tourist
6 0 2

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/

 

Screenshot 2024-02-11 at 6.34.34 PM.png

Replies 19 (19)

ThePrimeWeb
Shopify Partner
2138 615 494

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

ThePrimeWeb_0-1707674398548.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Ryanbekaert
Visitor
1 0 0

Brilliant. ❤️

DYKCEN
Tourist
6 0 2

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

ThePrimeWeb
Shopify Partner
2138 615 494

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.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
DYKCEN
Tourist
6 0 2

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
Shopify Partner
2138 615 494

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.

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
DYKCEN
Tourist
6 0 2

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

noblemono
New Member
5 0 0

Do you have code for trade theme?

noblemono
New Member
5 0 0
ThePrimeWeb
Shopify Partner
2138 615 494

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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
noblemono
New Member
5 0 0

thank you sir !

noblemono
New Member
5 0 0

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
Shopify Partner
2138 615 494

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

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
noblemono
New Member
5 0 0

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

jason_mageau
Visitor
1 0 0

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

ThePrimeWeb
Shopify Partner
2138 615 494

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>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
JacJacC
Excursionist
42 0 9

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

 

AmericanBison
Tourist
5 0 0

@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
Visitor
2 0 0

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?