Feature a random product on your home page


This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.


This article will show you how to feature one randomly picked product from your front page collection on your home page.

It is far easier to use JavaScript, rather than Liquid, to feature more than one randomly picked products from a collection. If that's what you need, head over to this other tutorial: Featuring a few randomly picked products with JavaScript.

Beware the Caching

There is a caveat to the solution described here: Shopify's web pages are served cached. Unless a shopper adds a product to their cart, they may be served the same cached page for hours at a time, hence our 'random' product may be the same after a page refresh as it is served from Shopify's 'cache' servers. JavaScript does not have that problem because with JavaScript we pick our random products in the browser. The solution outlined here is a server-side solution. Here's a link for more about what caching is.


Make sure that you have a collection with handle frontpage and make sure it contains many products. More than one would be ideal. (The reasons should be obvious.)

Edit your index.liquid template

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. Look under Templates for index.liquid. (The .liquid extension is omitted in that view.)

  3. Click on 'index' to open index.liquid in the online code editor.

  4. Somewhere in there, you'll find code that looks like this:

    <div id="showcase">
    {% if collections.frontpage.products.size > 0 %}
      {% for product in collections.frontpage.products %}
      ... code to feature a product ...
      {% endfor %}
    {% else %}
        <a href="/admin/custom_collections">
          Add a product to the "frontpage" collection to see it here...
    {% endif %}
  5. We'll focus on the for loop that iterates through the products in the frontpage collection:

    {% for product in collections.frontpage.products %}
  6. Before we loop, we will make our draw. We'll use the current time for this:

    {% capture index %}{{ 'now' | date: '%S' | times: collections.frontpage.products.size | divided_by: 60 }}{% endcapture %}
  7. Then, we'll use that random index in our for loop like so:

    {% for product in collections.frontpage.products offset:index limit:1 %}
  8. Click Save.

All you've done, really, was replace this:

{% for product in collections.frontpage.products %}

With this:

{% capture index %}{{ 'now' | date: '%S' | times: collections.frontpage.products.size | divided_by: 60 }}{% endcapture %}
{% for product in collections.frontpage.products offset:index limit:1 %}

Want to discuss this page?

Visit the Shopify Community