How to add Product Filter & Search to your store

This article will walk you through how to add the Product Filter & Search search bar for your Collection pages on GemPages.

Shopify by default offers a limited filtering system, supported only by tags and a simple search function. This creates difficulties for merchants to organize their stores, and for shoppers to find the product they want as well. However, the barrier can easily be lifted by using a third-party application like Product Filter & Search.

Install Product Filter & Search on your store

On the Shopify App Store

Step 1: Install the Product Filter & Search app from the Shopify App Store

 

Step 2: Go to the Apps section of your Shopify admin and select Product Filter & Search to access their dashboard. 

 

 

Step 3: From the app’s dashboard, select "Tool" from the menu and choose the "Integration" category. 

 

 

Next, hit the three dots button and click on “Page Builder”.

 

Locate GemPages from the list of Page Builder. After that, toggle on the option and choose "Run theme integration". 

 

 

Step 4: Finish the in-app settings to finalize the filter and search layout. For more information, please refer to this link

Kindly keep in mind that GemPages can only show the filter and search layout from the app.

On GemPages Editor

Step 1: From your GemPages dashboard, select the preferred template and enter the Editor.

Step 2: After that, access the Library on the left side of the top bar.

 

 

Step 3: Next, go to the Elements tab and search for Product Filter and Search

 

 

Step 4: Click on the Product Filter & Search element, then hit "Add element".

 

 

Add Product Filter & Search to your page

From your GemPages dashboard, select the preferred template and enter the Editor.

Look for the Product Filter & Search element on the left sidebar. Next, drag and drop the element to your chosen position. 

 

 

When everything is in place, hit “Save” then “Publish.”

Please be noted that Product Filter & Search works only on Collection Pages. The integration already includes the filter tree, product list, and paginator. 

That's it! Seamless search and navigation is just one app away.


Explore the Help Center for more integrations that GemPages offers. For any assistance, feel free to reach out to our dedicated Customer Support Team via email and live chat!


Was this helpful?