00:00
Buy Me a Beer
CMS

Randomly sort items on page load

Randomly sort CMS lists, grid items or any children with one simple attribute when you refresh your page

Blog Category G
Blog Category F
Blog Category E
Blog Category D
Blog Category C
Blog Category B
Blog Category A

How to Randomly Order Webflow List Items on Every Page Refresh

Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.

Add Short Random Attribute

Copy this attribute:

vdx-sort-random

Select the Collection List of a Webflow CMS Collection and paste the attribute into the Custom Attributes Name field of a Webflow Collection List

Collection List Wrapper
Collection List
Collection Item
Blog Category G
Collection Item
Blog Category F
Collection Item
Blog Category E
Collection Item
Blog Category D
Collection Item
Blog Category C
Collection Item
Blog Category B
Collection Item
Blog Category A
Collection List
Style
Settings
Interactions
Collection List Settings
Custom Attributes
Name
vdx-sort-random
Value

OPTION Limit number of Coection Items

Limit the number of displayed items by adding a value. In this example we are displaying only two Collection Items by adding the number 2 to the Custom Attribute Value input

Collection List Wrapper
Collection List
Collection Item
Blog Category G
Collection Item
Blog Category F
Collection Item
Blog Category E
Collection Item
Blog Category D
Collection Item
Blog Category C
Collection Item
Blog Category B
Collection Item
Blog Category A
Collection List
Style
Settings
Interactions
Collection List Settings
Custom Attributes
Name
vdx-sort-random
Value
2

Publish and refresh page

Blog Category G
Blog Category F
Blog Category E
Blog Category D
Blog Category C
Blog Category B
Blog Category A

How to Randomly Order Webflow List Items on Button Click

Copy this attribute:

vdx-sort-button

Paste the attribute into the Custom Attributes Name field of Button, Link, or Custom Element

Collection List Wrapper
Collection List
Collection Item
Blog Category G
Collection Item
Blog Category F
Collection Item
Blog Category E
Collection Item
Blog Category D
Collection Item
Blog Category C
Collection Item
Blog Category B
Collection Item
Blog Category A
Button
Style
Settings
Interactions
Link Settings
Custom Attributes
Name
vdx-sort-button
Value

Publish

Blog Category G
Blog Category F
Blog Category E
Blog Category D
Blog Category C
Blog Category B
Blog Category A

Sponsor the Magic and
Buy Me a Beer

Ailín Tobin
Ireland

VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.

Think of it like buying me a pint for keeping your Webflow spells flowing.

You can support it here.

Cheers, legend!

This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.