Feature multiple random products on your home page in Shopify


Feature multiple random products on your home page in  Shopify

Be cautious:

This tutorial is advanced and Shopify does not support it. This requires knowledge of languages used in you are not comfortable in proceeding the tutorial, we suggest you to hire a Shopify expert.


From your frontpage collection on your homepage, look how to feature numerous randomly picked products. We will utilize Javascript for this.
It is distant easier to utilize Javascript, rather than Liquid, to attribute picked products from a collection. If you require feature only one random product, in this other tutorial you can do devoid of JavaScript following the commands: Featuring one randomly chosen product.

In this article

• Preparation
• To your theme upload jquery.pick.js
• In theme.liquid, include the plugin.
• Wrap your elements and create your pick
• My product grid is broken


On the page, to show random picked products, in the collection we will allow liquid show all the products, then with Javascript we will randomly eliminate some of those products.
Make certain that your theme includes jQuery as we will be using it.
For this tutorial to work, on your home page your theme cannot utilize tablerow to display products. You will need to change that if it does. You can mimic a table structure by floating elements. If cells from a table are removed, you will finish up with a table with holes in it. The next element will float in to its place if you eliminate the nest float in to its place.
To your theme upload jquery.pick.js
Visit carolineschnapp/jquery-pick GitHub page and download the jquery.pick.js plugin.
To your Shopify theme, upload the file jquery.pick.js, assets on the edit HTML/CSS page.

Desktop                                               iPhone                                          Android

1. Click online store and then click Themes (or press G W T) from your Shopify admin.
2. Find the theme you want to edit, click the … button, and then click Edit HTML/CSS.
3. Click on the Assets folder to unlock it.
4. Scroll down to the base of the folder and click on the Add a new asset button.
Add asset link.


Comprise of the plugin in theme.liquid :

Under Layouts, click on ‘theme’ to unlock your theme.liquid layout in the online code editor.
Find the head element and comprise your plugin:

{{ ‘jquery.pick.js’ | asset_url | script_tag }}

Wrap your elements and create your select
Select the children element not the parent element, that is those very elements you would draw from.

For instance, in few themes that would be #products> li. Still in theme.liquid, still in the head element, you would insert this code.

jQuery(function() {
jQuery(‘#products > li’).pick(3);

In simple English, what that does is:

When the DOM is prepared, choose the li elements that are children of the element with id products and solely keep three out of all the elements while ignoring the rest.

My product grid is wrecked:

The outcomes might not look so amazing if your theme was counting an ‘end’ class to the end element on every row.

Your theme might be using code like these:

<li{% cycle ”, ”, ‘ class=”last”‘ %}>

… Applying a few CSS set of laws to each nth entry in the grid.

Now that we detached some of those objects, the class end is no longer useful where it is supposed to, resultant in an rough gutter between ‘boxes’ of products. Oh no!
Don’t be troubled: what has been busted with jQuery will be rigid with jQuery.
On the arrival set of elements, let’s relate the “last” class where it is ought to go:
jQuery(function() {
jQuery(‘#products > li’).pick(3).each(function(i) {
if ((i+1)%3 === 0) {
else {

The three in the expression %3 is the number of products your theme demonstrates per line in the grid. If your theme shows four products per line, then employ %4 instead. You obtain the idea. By the means, % is the modulo operator.


About Author

Leave A Reply