Filterable product grid with Isotope plugin

A responsive and cross-browser product grid layout, with touch-friendly galleries and Isotope-powered filter functionality.

Filterable product grid with Isotope plugin

This Blueprint is a responsive product grid layout where each grid item is a Flickity image slider. A small cart icon animation indicates that a product was added to the shopping cart. Some example media queries are used to show how to make the layout adaptive.

Browser Support: Chrome, FF, Safari, Opera, IE (IE9 does not support animations).

Filtering by type works perfectly, thanks to Isotope extension.

Isotope plugin in action - filterable product grid with
Isotope plugin in action – filterable product grid with

Demo:

http://tympanus.net/Blueprints/FilterableProductGrid

Full tutorial and download:

http://tympanus.net/codrops/2015/06/16/filterable-product-grid

GitHub:

https://github.com/codrops/FilterableProductGrid

Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1
 
  • Syed Kazimi

    what if we have to select multiple filters, e.g. Shoes | Men | Black