SquareWebsites Plugins Basics 2.5: Step-by-Step Guide: Filtering a Product List or Directory

Learn to implement product filters on SquareWebsites for an efficient shopping experience and improved sales conversions.

Quick Guide to Filtering Product Lists on SquareWebsites

Learning Objectives

By the end of this chapter, you'll be able to:

  1. Understand why filters matter for your product listings
  2. Choose and install the right filter plugin for your needs
  3. Set up basic filters that help visitors find products quickly

Introduction

Product filters help your visitors find what they're looking for without scrolling through endless lists. When someone visits your shop and wants to see only blue jumpers under £50, a good filter system makes that happen in seconds.

This chapter shows you how to add filters to your SquareWebsites product pages using plugins. We'll cover choosing the right tool, getting it installed, and making sure it works well for your visitors.

Lessons

Finding the Right Filter Plugin

Before you start, you need to pick a plugin that does what you need. Think about how your visitors shop – do they filter by price, colour, size, or category?

Steps to choose your plugin:

  1. Go to your SquareWebsites admin area
  2. Click on 'Plugins' in the main menu
  3. Search for 'product filter' or 'directory filter'
  4. Read the plugin descriptions and check they support your filter types
  5. Look at user ratings and recent updates

What to look for:

  • Clear setup instructions
  • Good user reviews
  • Recent updates (shows the developer is still working on it)
  • Support for the filter types you need

Installing Your Filter Plugin

Once you've picked your plugin, getting it running is straightforward.

Installation steps:

  1. From your SquareWebsites dashboard, go to 'Plugins'
  2. Find your chosen plugin and click 'Install'
  3. Wait for the installation to complete
  4. Click 'Activate' to turn the plugin on
  5. Look for the plugin's settings page (usually under 'Settings' or 'Tools')

First setup:

  1. Open the plugin settings
  2. Connect it to your product pages
  3. Choose which filters to show (price, category, etc.)
  4. Set any default options
  5. Save your settings

Making Filters Look Right

Your filters should fit with your site's design. Most plugins give you options to change colours, fonts, and layout.

Basic customisation:

  1. In the plugin settings, find 'Appearance' or 'Design'
  2. Match your site's colours and fonts
  3. Choose where filters appear (sidebar, top of page, etc.)
  4. Test different layouts to see what works best
  5. Save changes and check your live site

Quick design tips:

  • Keep filters visible but not overwhelming
  • Use clear labels like 'Price Range' not 'Cost Parameters'
  • Test on mobile devices – filters need to work on small screens
  • Make sure the 'Clear All' button is easy to find

Testing Your Filters

Before your visitors see the filters, test them yourself.

What to check:

  1. Do all filter options work properly?
  2. Can you combine filters (like 'blue' and 'under £20')?
  3. Does the 'Clear All' button reset everything?
  4. Do filters work on mobile devices?
  5. Are the results accurate?

Try different combinations and see if you get the results you expect. If something doesn't work, check the plugin documentation or contact their support team.

Practice

Set up a basic category filter on a test product page. Add at least three different product categories and test that the filter shows the right products for each category. Try it on both desktop and mobile to make sure it works everywhere.

FAQs

Can I use multiple types of filters together?
Yes, most filter plugins let visitors use several filters at once. Someone could filter by both 'blue' and 'under £30' to narrow down their search.

What if the filter doesn't match my website design?
Check the plugin's appearance settings first. Most plugins offer customisation options for colours, fonts, and layout. If that doesn't work, you might need a different plugin or custom CSS.

Do filters slow down my website?
A well-coded filter plugin shouldn't slow your site noticeably. If your site feels slower after adding filters, try a different plugin or contact your plugin developer for help.

Can I hide certain products from appearing in filters?
Most plugins let you exclude specific products or categories from appearing in filtered results. Check the plugin settings for 'exclude' or 'hide' options.

Jargon Buster

Filters – Tools that let visitors narrow down product lists by specific criteria like price, colour, or category

Plugin – A piece of software that adds new features to your website without needing to write code

Product List – A page showing multiple products, usually in a grid or list format

Clear All – A button that removes all active filters and shows all products again

Wrap-up

You now know how to add filters to your SquareWebsites product pages. Start with basic category or price filters, then add more options as you learn what your visitors need most.

Remember to test your filters regularly, especially after adding new products or updating your site. Good filters make shopping easier for your visitors, which usually means more sales for you.

Ready to take your SquareWebsites skills further? Check out more tutorials at https://www.squarewebsites.org/?peachs_apc=elwyn-davies