Apollo product filter

1. Apollo product filter

Apollo product filter is a helpful module that we have been developed to simplify the task of searching and finding ideal products when you are among a bunch of stuff with your head spinning around, feeling confused and lost. The products can be categorized with any criteria you built, such as product type, product vendor, color, size and price,…. All of the conditions exist for one purpose, increase the sorting procedure speed and aid you to find the product you need as quick as possible with some simple clicks, making the searching process more convenient and comfortable.

2. Demonstration

For illustration, we provide a series of pictures to help you understand what exactly we want to show. The user interface resembles the image depicted below:

As the image shown, there are two criteria available : product type and color. But keep in mind that the number of criteria you want to appear actually depends on your choice, you can customize as many conditions as you wish just by following our procedure(which will be instructed in the next section).

On each condition, a list of choices that match with their title was displayed in a selective type allow you to click on the circle to classify products as the name it suggests. In addition, you can also see the product quantity belong to that choice, which is convenient to track from.

After selecting a choice, next option in other criteria will be sorted automatically to match with the first, everything is not derived from the first will be fade out and cannot be selected. This will narrow down the search result, help you find out the product you need swiftly.

3. How to implement

Source code is provided at the end of the article. Go into details, you will see a hundred lines of code. Unless you know what you are doing, we recommend following these steps in order to work:

Step 1: HTML code

Find the block of HTML code, while class stays the same, the ID expresses the filter you want to build. As can be seen from the snapshot, those are “product type,product event,product color,product theme”. You can add many filters as you want(price,size,etc…), make sure the ID is unique and it has the same HTML structure.

Step 2: Javascript function

Search “create_filter” function, there are five arguments registered :

The first must match with the HTML ID you create above.
Second argument is prefix, which will be written in the shopify’s back-end > product tag section.
data_value is a variable serving algorithm, write the same as the image shown.
The boolean value indicates whether you want to show the image belongs to that filter or not.
The last argument is the name of the filter.

Step 3: Insert tag

After completing two first steps, go to Shopify > Products > Tags, register all products to all filters with the prefix you created above. Example as the image shown.

If everything set up properly, it should be good to go right now. Note that this module is theme independent, so you don’t have to worry about what theme you are using, just make sure you are on Shopify e-commerce platform and use shopify theme, complete all the steps and insert sourcecode in the collection page, the image above is example only, name will vary accordingly :

Source code can be downloaded here. The article’s intention is to give and share ideas, so you can download, edit, and distribute freely to anyone without concerning about copyright issue, just attach the download source at the end so it would be a meaningful act to us and let the community knows who apollotheme really is.

Thank you for reading our blog. Stay tuned for another post later! For any questions about our products and services, please shoot us an email at apollotheme@gmail.com. Helping you all is our great pleasure!

December 2, 2016 By Apollo Theme Released Themes News & Updates 1 Comment

About the author

Apollo Theme is the most modern provider of Shopify Template. With 9 years experience, we bring many modern and perfect themes to everyone. With the aim of providing high-quality products for customers, our talented team always tries to work hard and catch up the new trend of technology and design to give you more valued template with a unique combination of new ideas, flexible architecture and easy-to-use product. We are really appreciated it and hope that you enjoy it! Apollo Template want bring the highest customer satisfaction, we have professional supporting team to assist all our buyer. All support will be conducted through our support ticket "https://apollotheme.com/ticket/", send your problems to our email: "apollotheme@gmail.com" or at our facebook with name “Apollo Theme”. We usually get back to you within 24hours. (except holiday seasons which might take longer).