Shopify themes, liquid, logos, and UX
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:
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
Brilliant. ❤️
Is this code theme specific? I'm using the another theme and it doesn't seem to work for me.
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.
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
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.
The first solution works like a charm. Thanks a bunch 🙂
Do you have code for trade theme?
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>
thank you sir !
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.
Only posted products, you can't randomize based on products that are not shown
Yes, it's randomly sorted by name, right? Do you want it to randomize every product in the listed categories?
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...
amazing - how would I do this for my "new from" section on my home page at fadedblk.com
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>
hi @ThePrimeWeb , just wondering can it apply to the featured collection in the product page as well? Thanks.
@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.
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?
@ThePrimeWeb we too using Impulse theme and code seems not working and can you please help on this?
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!
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:
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>
My website is: vietmusic.vn. Please help me. Thanks!
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024