Feature multiple random products on your home page

Caution

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.

Note

See how to feature several randomly picked products from your frontpage collection on your homepage. We will use JavaScript for this.

It is far easier to use JavaScript, rather than Liquid, to feature more than one randomly picked products from a collection. If you need to feature only one random product, you can do without JavaScript following the instructions in this other tutorial: Featuring one randomly picked product.

Preparation

To show randomly picked products on the page, we will let Liquid show all the products in the collection, then we will randomly remove some of those products with JavaScript.

We'll be using jQuery. Make sure your theme includes it.

Your theme can't use tablerow to display products on your home page for this tutorial to work. If it does, you'll need to change that. By floating elements, you can mimic a table structure. If you remove cells from a table, you'll end up with a table with holes in it. If you remove a floated element, the next element will float into its place.

Upload jquery.pick.js to your theme

Go to the carolineschnapp/jquery-pick GitHub page and download the jquery.pick.js plugin.

Upload the file jquery.pick.js to your Shopify Theme Assets on the Edit HTML/CSS page:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

  3. Click on the Assets folder to open it.

  4. Scroll down to the bottom of the folder and click on the Add a new asset button.

    Add asset link

Include the plugin in theme.liquid

Under Layouts, click on 'theme' to open your theme.liquid layout in the online code editor.

Find the head element and include your plugin:


{{ 'jquery.pick.js' | asset_url | script_tag }}

Wrap your elements and make your pick

Don't select the parent element but the children, i.e. those very elements you will draw from.

For example, in some themes that will be #products > li. Still in theme.liquid, still in the head element, you would add this code:

<script>
  jQuery(function() {
    jQuery('#products > li').pick(3);
  });
</script>

In plain English, what that does is:

When the DOM is ready, pick the li elements that are children of the element with id products and only keep 3 out of all those elements, ditching the rest.

My product grid is broken

The result may not look so good if your theme was adding an 'end' class to the last element on each row.

In other words, your theme may be using code like this:


<li{% cycle '', '', ' class="last"' %}>

... applying some CSS rules to every nth item in the grid.

Now that we removed some of those items, the class end is no longer applied where it should, resulting in an uneven gutter between 'boxes' of products. Oh no!

Don't worry: what has been broken with jQuery will be fixed with jQuery.

On the returned set of elements, let's apply the “last” class where it should go:

<script>
  jQuery(function() {
    jQuery('#products > li').pick(3).each(function(i) {
      if ((i+1)%3 === 0) {
        jQuery(this).addClass('last');
      }
      else {
        jQuery(this).removeClass('last');
      }
    });
  });
</script>

The 3 in the expression %3 is the number of products your theme shows per line in the grid. If your theme shows 4 products per line, then use %4 instead. You get the idea. By the way, % is the modulo operator.

Want to discuss this page?

Visit the Shopify Community