Online store

Add sort and filter options

Add a Sort and Filter button so shoppers can narrow a product page by category or price, or sort by name, price or newest.

  • Add-on: ask us about adding it

A Sort & Filter button lets shoppers narrow a long list of products by price or category, or put it in order by name, price or newest first.

Online stores are an add-on. If your site doesn't have one yet, ask us about adding it; we quote it in writing first.

Before you start

The button only works on a page that already has a Product Gallery, and it only works on the products that gallery shows, not on categories. If a page has several galleries, the button covers all of them. A gallery set to show categories gives it nothing to sort. See Show products on any page.

Add the button

  1. Log in to your site editor and open the page.
  2. In the side panel, click Add, then Elements.
  3. In the Store section, drag Sort & Filter to where you want the button.
  4. Publish. If you don't see a Publish button, tell us and we'll publish it for you.

Choose the options

  1. Right-click the button and choose Edit Content.
  2. In Display name, change the wording on the button if you like. It says Sort & Filter unless you change it.
  3. Filter By is on to start with. Choose from:
    • Category. This is left out on category pages, which are already one category.
    • Price.
    • Product attributes. If your products have details such as material or gender, tick the ones shoppers can filter by. Only attributes made of plain text work here.
  4. Sort By is also on to start with. The choices are Newest, Price (low to high), Price (high to low), Name (A-Z) and Name (Z-A). Each price pair, and each name pair, switches on and off together.
  5. Publish. If you don't see a Publish button, tell us and we'll publish it for you.

With both Filter By and Sort By switched off, the button still shows but does nothing when tapped. If a choice you want is missing, ask us.

Change the look

  1. Right-click the button and choose Edit Design.
  2. Open the Button tab to style the button, or the Filter panel tab for the panel shoppers use to filter.
  3. For the panel you can set which side it opens on, its width, the space between sections, checkbox and divider colors, the price slider, the close icon, and the text for the title and options.
  4. Publish. If you don't see a Publish button, tell us and we'll publish it for you.

Tips

  • Turn on only what you need. A few clear choices are easier to use on a phone.
  • Test the button on your phone after you publish.

Need a hand?

If your site doesn't have this yet, ask us about adding it. We quote it in writing first, and nothing is billed unless you approve. Email hello@zossoz.com.

Already have a store and want us to add the button? Email your business name and the page, and we'll take care of it. We reply within one business day.

Last reviewed