Generate random numbers using liquid (shopify)

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:

Tobias Lütke's answer to generating random numbers in Shopify

 

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 %}

 

 

 

Get your free conversion tips

We scrape the internet for best practices, we test them & we help clients build 6/7 figurs stores. Don't miss out, maybe you'r next big hit will come from our emails.

You can start for free

Only with Shopify you can launch store, your brand within few clicks. It's never been easier.
14-day trial.

start risk-free

stu
dio

we are ecommerce specialists

we are Shopify certified experts

we design to convert

we are ecommerce specialists

we are Shopify certified experts

we design to convert