layout: default title: Recommend related products to your customers sidebar_title: Recommend related products description: Learn about related products and recommendations.

difficulty: intermediate

supported: false

nav: group: products

1. Create a new snippet called related-products, copy the code found here and paste it into your new file.

2. Open your Sections/product-template.liquid file and add {% include 'related-products' %} at the bottom of the file.

3. Add this to the bottom of your Assets/theme.js folder

$(document).ready( function() { 
    $.fn.pick = function(how_many) {

      var how_many = how_many || 4;

      // Picking random numbers without repeating. 
      var index_array = [];
      var original_obj_size = this.size();
      for (var i=0; i<original_obj_size; i++) {
        index_array.push(i);
      }
      //+ Jonas Raoni Soares Silva
      //@ http://jsfromhell.com/array/shuffle [rev. #1]
      var shuffle = function(v) {
        for (var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
        return v;
      };
      var new_index_array = shuffle(index_array).slice(0,how_many);

      // Ditching unpicked elements and removing those from the returned set.
      return this.each(function(i) {
         if ($.inArray(i,new_index_array) === -1) {
            $(this).remove();
         }
      }).filter(function() {
        if (this.parentNode === null) {
          return false;
        }
        else {
          return true;
        }
      });

    };
});