Tuesday, June 11, 2013

Random Product Order in Shopify [a coding post]

Pretty stoked about this (relatively) simple solution to displaying products in random order on the Collection page in Shopify. Hat tip to the Stack Overflow community for pointing me to the Fisher Yates shuffle.

Notes:

When adding html to your products array, don't use liquid-generated image tags — they'll automatically use double quotes and break your javascript.

Shopify forloops start with n=1. So you need to either begin your javascript loops with n=1 or create an n=0 array with your liquid for loop. I chose the latter by writing collection[0]="{{ collection.products.first.title }}"; before initiating the liquid forloop.