How to create a Shopify product filter popup

Nina De la Cruz Nina De la Cruz 5 min read

Product filters help create a more personalized shopping experience, and there are many ways to implement them.

Between sliders, radio buttons, and checkboxes, there is a less common, yet very efficient type of product filters: popups.

This is what a typical product filter popup for Shopify looks like 👇


Unlike the embedded filters you might be using in your Shopify store, this one is fundamentally different because it’s proactive. It encourages customers to commit to taking the next step by specifying what type of product or price range they’re looking for.

You can filter products by price, by collection they belong to, by audience segment, purpose, or any other characteristic.

Here is another common example of a pop-up product filter for Shopify:

Filters like this one are designed to prevent customers from analysis paralysis by narrowing down the number of products they’re going to look through.

In this tutorial, we’ll show you how to quickly add a pop-up product filter to your Shopify store using Getsitecontrol – an intuitive, no-code popup builder.

How to create a simple product filter popup for Shopify

When you’re ready to get started, remember to find the Getsitecontrol app on the Shopify App Store and add it to your website. Then follow the steps below.

Step 1. Select a template

First, you’ll need to select a template that looks appealing to you. You can simply click on one of the templates featured above or visit the template gallery to see what else is available 👇

Template gallery featuring Shopify product filter popups

Once you find the template, follow the prompts to add it to the Getsitecontrol dashboard.

Step 2. Change the copy

On the first screen, you can start editing the copy. Click on the title and description to change the text. Then click on each button to type the names of the filters you’re planning to implement. In our example, each filter is a price range.

How to change the text on a pop-up product filter

In a couple of minutes, we’ll talk about assigning product collection URLs to these buttons.

Step 3. Adjust the design

Chances are, you’ll want to customize the look of the popup as well. At a minimum, you should set the same font you’re using on the website. To do that, use the Theme menu at the top.

How to adjust the design on the product filter popup

Notice that you can also change the style of the form, spacing, and color theme. Feel free to toggle the controls and see what happens!

If you’ve selected a template with an image, and you want to change it, click right on the image and replace it with another one from the gallery.

Step 4. Create product collections in your Shopify store

Now that you’ve worked out the appearance of the popup, it’s time to turn the buttons into actual filters. To do that, you first need to create product collections in your store. Then, we’ll assign product collection links to these buttons.

Enter your Shopify store admin dashboard, navigate to Products, and select Collections. From there, you can:

  • create a collection manually by adding products one by one,
  • create a collection automatically by selecting a set of conditions.

How to create a collection in a Shopify store

Once you’ve created and saved your collection, you’ll see a pop-up message prompting you to see the collection in your store.

How to copy product collection URL in Shopify

Follow the link and copy the collection URL. The next step will be assigning this URL to the corresponding button on your pop-up product filter.

Obviously, you’ll need to do the same for each collection: create them in your store and copy their URLs.

Step 5. Assign URLs to button clicks

Go back to your Getsitecontrol dashboard and click on the first button. On the next screen, remove the default button action and proceed to add a new one. Select ‘Open URL’ and paste the URL of the product collection you’ve created.

How to assign product collection URLs to the buttons on the product filter popup

Notice that we’ve unchecked the box saying ‘Open the page in a new tab.’ This means that customers will be redirected to the collection page under the same tab. If you want the collection to open in a new tab, leave the box checked.

Go through the remaining buttons and assign corresponding URLs.

Step 6. Decide when and where the filter should pop up

Lastly, you need to specify where and when your Shopify product filter should pop up. The most common practice is displaying it on the home page as soon as a visitor arrives there. However, every store is unique, and your scenario may be different.

To set things up, open the Targeting tab and find the Include field. Hit + Add URL and either select ‘Home page’ or paste another URL that makes sense in your case.

How to set up page targeting for the Shopify pop-up product filter

Now, by default, the popup will be instantly displayed to every store visitor landing on the page you’ve indicated.

Another condition you may want to create is for when to stop displaying the popup. For example, you may want to stop displaying the popup to the same visitor if they chose to close it or if they’ve already used it once. However, again, only you know what your customer journey is, and what the best conditions will be.

How do I know if customers use the filter?

Once your product filter starts collecting views and hits, you’ll be able to view the stats in the Getsitecontrol dashboard. Just open the Statistics report and you’ll get a clear idea of how many of those who view the popup, actually click on one of the buttons 👇

How to track pop-up product filter performance in Getsitecontrol

Notice that you can also break down the stats by country, device, and page on your website (in case you’ve added the pop-up filter to multiple pages).

Personalize your customer journey with a pop-up product filter for Shopify

Product filters are must-haves for any ecommerce store. However, unlike the standard filters at the top or on the side of the page, popups allow you to spice things up and help navigate customers from the get-go.

Is it worth implementing?

Well, according to Omniconvert, a simple pop-up product filter can increase ecommerce conversions up to 74,51%, so we can safely assume this tactic is worth trying. And given that Getsitecontrol offers a free plan that allows you to create a non-targeted pop-up filter, you don’t really lose anything!

Go ahead and give it a spin. If you have any questions, you can email us at help@getsitecontrol.com

Nina De la Cruz is a content strategist at Getsitecontrol. She is passionate about helping small and medium ecommerce brands achieve sustainable growth through email marketing.

You’re reading Getsitecontrol usecase collection where we talk about the best practices for using website popups. This usecase is a part of Grow on Shopify section.

Get the print version

Download a PDF version of our use case for easier offline reading and sharing with coworkers.

Download PDF