{"id":7533,"date":"2017-11-13T11:37:22","date_gmt":"2017-11-13T11:37:22","guid":{"rendered":"https:\/\/www.mconnectmedia.com\/blog\/?p=7533"},"modified":"2025-07-31T18:38:04","modified_gmt":"2025-07-31T13:08:04","slug":"help-the-online-buyers-to-find-the-right-product-by-filtering-attributes-in-magento-2","status":"publish","type":"post","link":"https:\/\/www.mconnectmedia.com\/blog\/2017\/11\/13\/help-the-online-buyers-to-find-the-right-product-by-filtering-attributes-in-magento-2\/","title":{"rendered":"Help the Online Buyers to Find the Right Product by Filtering Attributes in Magento 2"},"content":{"rendered":"<h3>Pain Points of Large E-commerce Shoppers<\/h3>\n<p>Today, the majority of Magento eCommerce stores selling tons of products and allied products like accessories, parts, and so on. These e-commerce sites have a plenty of categories and sub-categories in its navigational architecture.<\/p>\n<p>It renders any standard or advanced navigation scheme or a combination of schemes obsolete. It makes finding the desired products from deep product pages tough even for tech-savvy visitors relying on advanced search field build for in-site search.<\/p>\n<p>It is becoming more intricate when visitors looking the item based on some specific product attributes like size, color, product code, or part number. The above-described scenario is common in the case of manufacturing e-commerce sites, machinery product sites, automobile sites, clothes and apparel sites, and sometimes on big grocery sites of retailers.<\/p>\n<h3>Best Product Filtering Solution by M-Connect Media<\/h3>\n<p>To cope with the depicted problems, <a href=\"https:\/\/www.mconnectmedia.com\/magento-developers-for-hire\">Magento eCommerce developers<\/a> have developed some modules or extensions with filtering capabilities to find the product or item based on their attributes. Fortunately, M-Connect Media has created the extension on the same line and ease the life of Magento merchants considerably.<\/p>\n<blockquote><p><strong><a href=\"https:\/\/www.mconnectmedia.com\/product-part-finder-extension-m2.html\">Mconnect Product Part Finder<\/a> &#8211; Best Magento 2 Extension to Filter Product with Custom Attributes<\/strong><\/p><\/blockquote>\n<p>The front-end module of the extension appears as a table with titles of attributes and below each title, a field with the drop-down selection. The easy to use and simplified UI allows any level of users to find the intended product or the parts\/accessories of the main product quickly and with the least hurdles.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-7536\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/cloth-parts-1024x479.png\" alt=\"Part FInder for Category Page\" width=\"780\" height=\"365\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/cloth-parts-1024x479.png 1024w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/cloth-parts-300x140.png 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/cloth-parts-768x359.png 768w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/cloth-parts.png 1349w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/p>\n<p>Part finder extension module at front-end of bags and accessory.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7537\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/bags-part.jpg\" alt=\"Bags Part Finder\" width=\"947\" height=\"525\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/bags-part.jpg 947w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/bags-part-300x166.jpg 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/bags-part-768x426.jpg 768w\" sizes=\"auto, (max-width: 947px) 100vw, 947px\" \/><\/p>\n<p>&nbsp;<\/p>\n<blockquote><p><strong>Watch Video: Configuration of M-Connect Part Finder Magento 2 Extension before create new Part finder.<\/strong><\/p>\n<p><iframe loading=\"lazy\" width=\"780\" height=\"439\" src=\"https:\/\/www.youtube.com\/embed\/kaQflJ2_mu4?feature=oembed\" frameborder=\"0\" gesture=\"media\" allowfullscreen><\/iframe><\/p><\/blockquote>\n<h2>Steps to Add a or Create New Part Finder Extension in Magento 2 Store<\/h2>\n<p>If you are a bit more interested to know that, how the extension is working, and what is possible with it on a Magento site, I am going to illustrate things with some screenshots taken from the back-end of the site.<\/p>\n<p>1. Navigate to M-Connect and Part Finders.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7538\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/select-Part-finders.jpg\" alt=\"Select Part Finders\" width=\"294\" height=\"429\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/select-Part-finders.jpg 294w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/select-Part-finders-206x300.jpg 206w\" sizes=\"auto, (max-width: 294px) 100vw, 294px\" \/><\/p>\n<p>2. Now, click on the Part Finders button, the following screen will appear.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7540\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Add-New-Part-Finders.jpg\" alt=\"Add New Part Finder\" width=\"1001\" height=\"358\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Add-New-Part-Finders.jpg 1001w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Add-New-Part-Finders-300x107.jpg 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Add-New-Part-Finders-768x275.jpg 768w\" sizes=\"auto, (max-width: 1001px) 100vw, 1001px\" \/><\/p>\n<p>3. On the user interface, you will find a big button \u2018Add Part Finder\u2019 on the top-right of the page. Just click on the button, it will lead you to a \u2018New Part Finder\u2019 dialog box where the Magento merchants have to fill up the required information, such as<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7539\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Save-Part-Finder.jpg\" alt=\"Save Part Finder\" width=\"990\" height=\"447\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Save-Part-Finder.jpg 990w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Save-Part-Finder-300x135.jpg 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Save-Part-Finder-768x347.jpg 768w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><\/p>\n<ul>\n<li>General Tab<\/li>\n<li>Fields Tab<\/li>\n<li>Import Tab<\/li>\n<li>Products Tab<\/li>\n<\/ul>\n<p>4. Let\u2019s see each tab with required info.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7544\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/General-information.jpg\" alt=\"General Info\" width=\"918\" height=\"471\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/General-information.jpg 918w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/General-information-300x154.jpg 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/General-information-768x394.jpg 768w\" sizes=\"auto, (max-width: 918px) 100vw, 918px\" \/><\/p>\n<p>5. It consists of following fields to provide the general info regarding the Part Finder Extension module.<\/p>\n<ul>\n<li><strong>Title<\/strong>: To give a title to the front-end module.<\/li>\n<li><strong>No of Dropdowns<\/strong>: To define how many options a Magento merchant need to display in the dropdowns of the front-end module.<\/li>\n<li><strong>Status<\/strong>: To define enable or disable status of the module on front-end.<\/li>\n<li><strong>Position<\/strong>: To give the location of the module on front-end page.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7543\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Field.jpg\" alt=\"Field\" width=\"942\" height=\"627\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Field.jpg 942w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Field-300x200.jpg 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Field-768x511.jpg 768w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/p>\n<p>6. It consists of three common fields in all dropdowns.<\/p>\n<ul>\n<li><strong>Name<\/strong>: To give a name to the corresponding drop-down.<\/li>\n<li><strong>Sort<\/strong>: To define sorting order for dropdowns like ascending or descending.<\/li>\n<li><strong>Range<\/strong>: To make a selection for import of the redundant data as a range.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7542\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Import.jpg\" alt=\"Import\" width=\"934\" height=\"468\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Import.jpg 934w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Import-300x150.jpg 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Import-768x385.jpg 768w\" sizes=\"auto, (max-width: 934px) 100vw, 934px\" \/><\/p>\n<p>7. It consists of following fields.<\/p>\n<ul>\n<li><strong>Import Behavior<\/strong>: To select options for appended data or deleted existing data.<\/li>\n<li><strong>Select CSV File<\/strong>: to select the CSV file to apply to the extension.<\/li>\n<li><strong>Export Data<\/strong>: To export data to the local system.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-7541\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Products-1024x506.jpg\" alt=\"Products\" width=\"780\" height=\"385\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Products-1024x506.jpg 1024w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Products-300x148.jpg 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Products-768x379.jpg 768w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/Products.jpg 1199w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/p>\n<p>8. It provides an opportunity to check all product details with drop-down options and SKUs. Moreover, it provides an opportunity to add the missing product manually by clicking on \u2018Add New Record\u2019 button.<\/p>\n<p>9. The \u2018New Option Value\u2019 dialog box will appear with various field pertaining to product attribute options and SKUs.<\/p>\n<h3>Steps to Activate Part Finder Module on the Category or Search Page of Magento Store<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7548\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/product-category.jpg\" alt=\"Product Category\" width=\"255\" height=\"270\" \/><\/p>\n<ol>\n<li>The screenshot has taken by navigating to admin panel of the site to Products side menu where Categories section\/button is located.<\/li>\n<\/ol>\n<p>2. Now, click on the Categories button, the following screen will appear.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7547\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/save-category.jpg\" alt=\"Save Category\" width=\"970\" height=\"510\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/save-category.jpg 970w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/save-category-300x158.jpg 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/save-category-768x404.jpg 768w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><\/p>\n<p>3. On the category page, Magento merchant needs to select the appropriate category from the sidebar navigation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7546\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/bags.jpg\" alt=\"Select Bag Category\" width=\"221\" height=\"351\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/bags.jpg 221w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/bags-189x300.jpg 189w\" sizes=\"auto, (max-width: 221px) 100vw, 221px\" \/><\/p>\n<p>4. Suppose you have selected Gear as main directory and Bags as the sub-directory, you will find following dialog box.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7545\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/select-part-finder.jpg\" alt=\"Select Part Finder Dropdown\" width=\"772\" height=\"430\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/select-part-finder.jpg 772w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/select-part-finder-300x167.jpg 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/select-part-finder-768x428.jpg 768w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>5. Now, you can select the part finder for filter and click on \u2018Save Category\u2019 button to save your option to display at front-end.<\/p>\n<h3>Steps to Display the Part Finder Module on the Front-end of Magento 2 Store<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7551\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/content-page.jpg\" alt=\"Select Page\" width=\"251\" height=\"516\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/content-page.jpg 251w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/content-page-146x300.jpg 146w\" sizes=\"auto, (max-width: 251px) 100vw, 251px\" \/><\/p>\n<ol>\n<li>Navigate to \u2018Content\u2019 side menu where \u2018Pages\u2019 section\/button is located.<\/li>\n<\/ol>\n<p>2. Now, click on the \u2018Pages\u2019 button, the following CMS screen will appear.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-7550\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/add-new-part-finder-1024x424.jpg\" alt=\"Add New Page\" width=\"780\" height=\"323\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/add-new-part-finder-1024x424.jpg 1024w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/add-new-part-finder-300x124.jpg 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/add-new-part-finder-768x318.jpg 768w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/add-new-part-finder.jpg 1233w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/p>\n<p>3. Now, select the \u2018Edit\u2019 option under the \u2018Action\u2019 menu for the page where you wish to display the Part Finder extension\u2019s front-end module.<\/p>\n<p>4. Now, suppose you select the About Us page to display part finder module, the edit screen for the About Us page will appear.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7549\" src=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/save-page.jpg\" alt=\"Save Page\" width=\"942\" height=\"404\" srcset=\"https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/save-page.jpg 942w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/save-page-300x129.jpg 300w, https:\/\/www.mconnectmedia.com\/blog\/wp-content\/uploads\/2017\/11\/save-page-768x329.jpg 768w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><\/p>\n<p>5. The next step is to select the Content Tab in the left sidebar. A CMS dialog box for content will appear where you need to add the following code to begin the display of Part Finder module on the About Us or any selected module.<\/p>\n<blockquote><p><strong>{{block class=&#8221;Mconnect\\Partfinder\\Block\\Partfinder&#8221; template=&#8221;Mconnect_Partfinder::cms_partfinder.phtml&#8221; pf_id=&#8221;1&#8243;}}<\/strong><\/p>\n<p>In the code, mention the id of the part finder against \u201cpf_id\u201d.<\/p><\/blockquote>\n<p>6. Finally, click on \u2018Save Page\u2019 button to apply the changes on the front-end of the Magento site. That&#8217;s all. You have done it.<\/p>\n<blockquote><p>Still have any doubt? We have shared video tutorial also for our customers learn from the visual presentation.<\/p>\n<p><iframe loading=\"lazy\" width=\"780\" height=\"439\" src=\"https:\/\/www.youtube.com\/embed\/3WBqWTPUZqs?feature=oembed\" frameborder=\"0\" gesture=\"media\" allowfullscreen><\/iframe><\/p><\/blockquote>\n<p>Any questions? Don&#8217;t hesitate to ask anything regarding this post or Product Part finder extension. Share your reviews regarding this blog post by posting comments below or <a href=\"https:\/\/www.mconnectmedia.com\/contact\">contact us<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pain Points of Large E-commerce Shoppers Today, the majority of Magento eCommerce stores selling tons of products and allied products like accessories, parts, and so<\/p>\n","protected":false},"author":1,"featured_media":7553,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[2048,2043,2042,2049,2045,2046,2044,639,2040,2041,2047],"class_list":["post-7533","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce","tag-custom-attributes","tag-filter-product","tag-find-products","tag-find-products-in-magento","tag-magento-filter-extension","tag-magento-filter-products-by-attribute-dropdown","tag-magento-product-part-finder","tag-magento-products","tag-mconnect-part-finder","tag-product-parts-finder-magento","tag-spares-finder"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/posts\/7533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/comments?post=7533"}],"version-history":[{"count":8,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/posts\/7533\/revisions"}],"predecessor-version":[{"id":14721,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/posts\/7533\/revisions\/14721"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/media\/7553"}],"wp:attachment":[{"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/media?parent=7533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/categories?post=7533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mconnectmedia.com\/blog\/wp-json\/wp\/v2\/tags?post=7533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}