💡 Below is our complete guide to finding your Shopify expert.
💡 We also invite you to read our guide to choosing your Shopify agency.

 

You may have encountered a barrier while coding in Liquid, generating random numbers is almost impossible, so you had to use Javascript instead and may have had to change the logic of your interface.

Did you know that you can generate numbers in SCSS?

The random(param:max) is available in SCSS, unfortunately the current version of Shopify's SCSS processes is V3.2.x, which is the version before the release including this feature. Hopefully in the near future we'll have access to the newer releases, and be able to use this feature along others.

Well, it seems there is a good reason for this. The following is a reply from Shopify's CEO in a thread about this question in particular:

 

The good news is that regardless of JS and SCSS, you can actually generate random numbers in Liquid through a simple trick: making use of both the liquid's date filters & modulo filter. Follow these steps:

• Get the current date, using 'now'
• Extract the nanoseconds value from the date, using "%N" date filter.
• Use the modulo filter to get your random value between the min & max of your random number.
• finally, add your min to the result.

And here is an example, generate a random number from 65 to 80.

{% assign min = 65 %}
{% assign max = 80 %}
{% assign diff = max | minus: min %}
{% assign randomNumber = "now" | date: "%N" | modulo: diff | plus: min %}