Shop Filter Options

Shop Filter Options allow you to add filters to your shop to help colors find products based on things like color, size, sweetness, fabric type, or any other property you can imagine.

For this example, we will use a product called "Pepper, Poblano", and we want customers to be able to find it by specifying the color green.

First, go to the product on the admin side, then click on the new button that says 'edit filter options'

You'll see a blank modal popup title 'store filter options'. We want to create a category called 'Color', so click on the 'add filter category' button.

Type in the word 'Color' in the text input box and then click on the button that saves 'save'

Now we have successfully created a filter category called Color! Next we would like to add some different options to the category, like 'red', 'green', 'blue', or whatever else you think you might want. Click on the link that says 'new option'

Type in 'Green' and click on 'Save'. You can repeat this little step until you've added other colors as well.

Once you are done adding the colors you want, it's time to assign 'Green' to the Pablano Peppers. Click on the checkbox next to 'Green', and you'll see a message that says 'added'. If you change your mind, just click the checkbox again and the filter option will be removed from the Pablano Peppers.

Now let's go to the front side of our website and see what it looks like now that we've added the 'Color' category and assigned 'green' to our Peppers. We can see that there is a new section on the left sidebar named 'Color', and because we've only used 'green' so far, 'Green' is the only option that comes up.

If we want to see only products that have been assigned the filter option of 'green', we just click the checkbox, and the page will automatically refresh to show us... Pablano Peppers! If you have multiple products assigned to the filter option of 'Green', those products will also show up.

These filter options can be used in conjunction with the other side menu filters, like in this example we also use it with the 'Price' filter to see any options 'less than $10'. Of course, all we have still is Pablano Peppers.

If we want to clear out the filters we've selected thus far, we have a few options:

• Click on the blue 'clear all' link
• Click on the blue 'x' next to each filter under the word 'Vegetables'
• Un-check the boxes on the left sidebar next to 'Green' and 'Less than $10'

These filters were built with mobile-first in mind, but for documentation, it was just easier to show all of this on a desktop layout. Here is an example of the shop screen with those filters selected:

Shortcut to Edit/Create Filters

On the 'Products' page, there is a new button under each product that will say 'Edit Filter Options'. Click this to easily bring up the modal window that will allow you to add, edit, delete filter categories and options.

We hope this article has been helpful. Please let us know if you have any questions or comments by sending an email to hello@kivalogic.com.