Html div elements random order on page reload

Store Design

Topic summary

A user is integrating RSS feeds into product pages and wants the feed items to display in a random order on each page reload. The feeds are structured as multiple <div> elements with unique IDs.

Solution Provided:

  • Wrap all RSS feed <div> elements in a container: <div id="your-container-id">
  • Add JavaScript code that shuffles the child elements on page load
  • The script uses Math.random() to randomize the order of divs within the container

Implementation Challenge:
The original poster has no coding experience and initially struggled with placement. After trial and error, they successfully:

  • Placed all RSS divs inside a container div
  • Replaced the generic "your-container-id" with their actual container ID
  • Confirmed the randomization works as intended

Current Status:
The solution is working successfully. A follow-up question remains about adding fixed spacing between the divs within the container so they don’t appear too close together on the webpage.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I’m pulling content from rss provider and put the rss feeds on my products page so I put the rss code on the product html editor to show up on product page and everything went smooth, the rss feed looks like:

They looks like that with nothing before or after them, I want some piece of code to put it on the editor so it randomly shuffle the divs each time the page loads or it will shuffle them each time period, I want my website visitors to see the rss feeds in different order each time.

P.S I have zero knowledge with coding so please give my a detailed solution

Thank you in advance

2

  1. Access the product HTML editor in your Shopify admin for the desired product page.

  2. Insert the following JavaScript code snippet within tags:
3

Thank you very much my brother Nouman

I maybe will look a bit stupid but I really have no coding skills at all
What I’ve done is going to the html editor of the desired product and make the full code like this:

So far after doing the above step the rss feeds are lost and don’t appear on the page, I’m sure I have done it wrong, please let me know how correctly put the full code using the divs I provided above and if there is any thing need to be written or amended

Thank you very much, I highly appreciate your time

4

It worked it worked it worked, thank you very much brother I’m very appreciated really

after my previous reply I played with the code and from some searches I learned that I have to put my ALL original divs into some thing called a container so I added:

before the divs list and still not working after that and when I was about to give up I noted that you wrote: (your-container-id) so I replaced the head of the code before the divs list with:
and then is works very well and exactly as needed
I believe that many on here will need this solution and will be happy to have it done

Thanks you very much brother I really can’t find the words may Allah reward you on my behalf

5

Hello Brother, @NomtechSolution
Wishing you doing well,

In reference to the solution for my request, could you please let me know how to add fixed space between divs within the container so they don’t appear closed to each other on the web page.

Thank you very much.