Shopify Dawn Theme CSS to Randomize Product Order

[Mel_C]

Have searched through tons and tons of posts, not looking to randomize the featured products, looking to randomize all products within their categories, not by date or alphabetical but so when you load each category it randomizes the entire list every time it reloads, thinking it is some CSS coding but am unable to find something to do this.

Considering I may have to buy a new theme, which is not what I want to do for various reasons, anyone have a solution for coding that can help with the CSS code?

Thanks in advance.

[Small_Task_Help]

Hi,

Add JavaScript for Randomization (at bottom collection-template.liquid)

Code example 

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Select the product list container
    var productGrid = document.querySelector('.product-grid'); // Update this selector if necessary
    var products = Array.from(productGrid.children); // Get all product items

    // Shuffle function to randomize array elements
    function shuffle(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }

    // Randomize the products
    var randomizedProducts = shuffle(products);

    // Clear the product grid and append the randomized products
    productGrid.innerHTML = '';
    randomizedProducts.forEach(function(product) {
      productGrid.appendChild(product);
    });
  });
</script>

[Mel_C]

Thank you - willing to try however, do not see "(at bottom collection-template.liquid)" - do not see anything close to this, please advise.

Thanks for helping though, appreciated!

[Mel_C]

found where to put it I think but returns an error "invalid JSON in templates/collection.json"

so not sure this works 😞

[PaulNewton]

Your trying to put code in a JSON file while the contributor specifically highlight a .liquid template file type.

The JSON file should list section names and that is likely where to look.

[Mel_C]

Thank you very much some trial and error but did succeed - my only question is when the pages load it kind of stutters to change the collection order, any way around that or nope?