Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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 24 (24)

ThePrimeWeb
Shopify Partner
2139 616 512

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
2139 616 512

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
2139 616 512

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
2139 616 512

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
2139 616 512

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?

Pede
Visitor
3 0 0

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
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
2139 616 512

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?

pv9
Visitor
1 0 0

@ThePrimeWeb we too using Impulse theme and code seems not working and can you please help on this?

Ypomoni
Visitor
1 0 0

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!

coremicro
Visitor
1 0 0

At first, I copied and pasted the ThePrimeWeb code into my theme.liquid, but it didn't work because querySelector(xxxx) and querySelectorAll(xxxx) are different for every theme.

 

To fix this:

  1. Go to collection.liquid.
  2. Locate the product list container and product item classes.
  3. Update the code accordingly to match your theme’s structure.

If you’re having trouble, you can ask ChatGPT for help. Simply upload your collection.liquid text file and ask ChatGPT to identify your product list and product item classes and modify the code for you.

my working code is:

 

<script>
document.addEventListener('DOMContentLoaded', function () {
    var ul = document.querySelector('.grid-products'); // Target the main product list container
    if (ul) {
        var lis = Array.from(ul.querySelectorAll('.gitem')); // Select all product items

        // Shuffle all items
        for (var i = lis.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            [lis[i], lis[j]] = [lis[j], lis[i]];
        }

        // Clear the product grid and append all shuffled items
        ul.innerHTML = '';
        lis.forEach(item => ul.appendChild(item));
    }
});
</script>

 

dangkhiem
Shopify Partner
20 0 10

My website is: vietmusic.vn. Please help me. Thanks!