Loading

Get In Touch
Get In Touch

The way the world shops has changed drastically in the last few years. Nowadays people can order anything they wish via a quick tap on the screen of their smartphone on-the-go. Although a major chunk of the market is covered by big players like Amazon among others, it is the daring actions of small business owners with launching their own e-commerce stores targeting their defined target audience that has really boosted the e-commerce market.

This growth for businesses of varied range has been facilitated by the numerous e-commerce platforms in the market that enable merchants to build, launch and grow a profitable online store with ease. Just so you know, we have compared two of the most popular e-commerce platforms in the past. The results we quite exciting.

One such E-commerce platform is Shopify. Shopify is a complete E-commerce solution that enables businesses to set up their online stores to sell their products and services with ease. It helps businesses organize products/services, personalize their E-commerce storefront, process payments, track and manage their orders.

Now when it comes to online shopping, Findability and Discoverability are two very important terms that growth hackers are very familiar with.

Discoverability is when you find the perfect jeans even when you weren’t looking for it and findability is when you find the exact jeans you were looking for, even if all you knew about the jeans was the style.

E-commerce Product Filtering when done right, can help you resolve both the aspects with ease and help you enhance the user experience and ultimately boost online sales.

E-commerce product filtering helps users zero in on the particular product they are looking for or find products they may be looking for based on certain filters such as size, color, brands etc. To put things into perspective, we’d urge you to go through a blog that we’ve written about the influence of colors on e-commerce buying decisions.

In the grand scheme of things, product filtering is what allows visitors on your online store enjoy the experience of browsing through your offerings instead of cursing it.

However if you wish to incorporate product filters into your Shopify store you will have to shell out at least a recurring amount $30 – $40/Month for a decent filter with bare bone features.

We recently came across this situation ourselves and decided that instead of going with buying the plugins off the market where in we do not have control over the feature listing why not go with developing custom coded product filters that not only provide us as developers a complete control over the feature listing but also for the merchant/business owner – it gives them a complete access to customize the filters befitting their target audience and niche.

Product filtering is contextual, that ‘Perfect combination’ depends upon various factors such as vertical, products, target audience and region among others. However after taking into consideration some basic guidelines and principles we narrowed it down to the following filters that were a fit for E-commerce store.

> Collections

Collections filter in Shopify

> Vendor
> Price
> Size
> Color

Vendor filter interface on Shopify website

Here’s a sneak peak into the development side of the product filters.

 

Shop By Vendor

HTML code to set up filters in shopify

 

Shop By Type

HTML Code for setting up shop by type filter

 

Shop By Size

{% if settings.shop_by_catalog_enable and template == ‘collection’ %}

<div id=”catalog_block” class=”block ajax-filter block_shopby”>

{% if settings.shop_by_catalog_title != blank %}

<h4 class=”title_block”>

{{ settings.shop_by_catalog_title }}

</h4>

{% endif %}

<div style=”” class=”block_content”>

<!– SHOP BY SIZE –>

{% if settings.shop_by_size_enable %}

<div class=”catalog_filters lft_sc”>

{% if settings.shop_by_size_title != blank %}

<div class=”catalog_subtitle_heading”>

<h4 class=”catalog_subtitle”>{{ settings.shop_by_size_title }} <i class=”ico”>[-]</i></h4>

{% endif %}

<ul id=”ul_catalog_price” class=”col-md-12 catalog_filter_ul list-unstyled”>

{% assign list_size = settings.shop_by_size_list | split: ‘,’ %}

{% for size in list_size %}

{% assign custom_tag = size | strip %}

{% assign check = false %}

{% for ct in current_tags %}

{% if ct == custom_tag %}

{% assign check = true %}

{% endif %}

{% endfor %}

{% if check %}

<li class=”advanced-filter active-filter” data-group=”{{ settings.shop_by_size_title }}” data-handle=”{{ size | handleize }}”>

{{ size | link_to_remove_tag: size }}

</li>

{% else %}

<li class=”advanced-filter” data-group=”{{ settings.shop_by_size_title }}” data-handle=”{{ size | handleize }}”>

{{ size | link_to_add_tag: size }}

</li>

{% endif %}

{% endfor %}

</ul>

</div>

</div>

{% endif %}

Shop By Price

<!– SHOP BY PRICE –>

{% if settings.shop_by_price_enable %}

<div class=”catalog_filters lft_sc”>

{% if settings.shop_by_price_title != blank %}

<div class=”catalog_subtitle_heading”>

<h4 class=”catalog_subtitle”>{{ settings.shop_by_price_title }} <i class=”ico”>[-]</i></h4>

{% endif %}

<ul id=”ul_catalog_price” class=”col-md-12 catalog_filter_ul list-unstyled”>

{% assign list_price = settings.shop_by_price_list | split: ‘,’ %}

{% for price in list_price %}

{% assign custom_tag = price | strip %}

{% assign check = false %}

{% for ct in current_tags %}

{% if ct == custom_tag %}

{% assign check = true %}

{% endif %}

{% endfor %}

{% if check %}

<li class=”advanced-filter active-filter” data-group=”{{ settings.shop_by_price_title }}” data-handle=”{{ price | handleize }}”>

{{ price | link_to_remove_tag: price }}

</li>

{% else %}

<li class=”advanced-filter” data-group=”{{ settings.shop_by_price_title }}” data-handle=”{{ price | handleize }}”>

{{ price | link_to_add_tag: price }}

</li>

{% endif %}

{% endfor %}

</ul>

</div>

</div>

{% endif %}

With only 16% of top e-commerce sites having “reasonably good” product filtering, there’s a lot of room for improvement. Even an inch of improvement could do wonders for discoverability and findability.

Now this is just tip of the iceberg. Our developers employed their keen technical insights into developing a robust product filtering functionality for the e-commerce store.

Conclusion

Product filters are of huge importance, thus, when done right, they enhance users experience and help them narrow it down to the exact product they are looking for. Which translates to better conversion rates for the merchants.

Have a project in mind?
We’d love to help make your ideas into reality.