The product filters widget allows you to add filters for products to a column. The widget shows up on a product category page and displays filters based on the product attributes defined on the products within the product category that’s currently being viewed.
Adding the Widget
If you're looking to show product filters on a left column, you can use the following short code.
- Name A-Z
- Name Z-A
Standardizing Attributes
If you’ve had your ecommerce store for a while, it’s highly likely that certain attributes may be named differently across your products. You may use the product attribute merger to mass update the attribute names and attribute value names across all your products.
You can access the Product Attribute Merger in the Webadmin by going to eCommerce -> Advanced -> Product Attribute Merger.
Let’s say you had the color attribute named three different ways: Color, Colors, and T Shirt Colors. You can rename them all to Color.
Likewise, lets say you had a product attribute for size for some of your products and had a few different ways to display the small size: Small, S, Sm. You can rename them all to “Small” so it’s consistent across all your products.
Color Filter
To show the color filter, you’ll need to set up the color swatch. The color swatch lets you group similar colors together and define the color code that will show to the user.
For example, here’s the entire list of colors from one of our eCommerce stores that sells t shirts.
Aubergine, Black, Blue, Brown, Burgundy, Cardinal, Cardinal Red, Charcoal, Charcoal Heather, Cool Blue, Cream, Deep Heather, Forest, Forest Green, Gold, Golden Yellow, Gray, Gray/Black, Green, Grey, Heater Indigo, Heath Blue, Heather Autumn, Heather Black, Heather Blue, Heather Blue Ice, Heather Brown, Heather Cardinal, Heather Charcoal, Heather Gray, Heather Green, Heather Ice, Heather Ice Blue, Heather Indigo, Heather Maroon, Heather Military Green, Heather Moss, Heather Navy, Heather Purple, Heather Red, Heather Royal, Heather Salmon, Heather Slate, Heather Storm, Heather White, Heather Charcoal, Hot Pink, I’m Feeling Lucky, Indigo, Irish Green, Ivory, Kelly Green, Light Blue, Light Pink, Maroon, Military Green, Mint, Mustard, Natural, Navy, Navy Blue, New Test, Orange, Pink, Purple, Raspberry, Red, Red Roper, Red/White/Blue, Royal, Royal Blue, Sand, Scarlet, Silver, Sport Gray, Tan, Turquoise, Vintage Black, Vintage Dad Hat, Vintage Green, Vintage Royal, White, White/Red, Yellow
Having the customer scroll through the list to find the color they’re looking for is not very user friendly. Plus, those are descriptive names for colors but customers may not always be familiar with the names. What colors do Aubergine and Heather Storm represent?
Instead, you can organize the colors into groups with a color name that users will be familiar with. So you can have a Purple color group that has Aubergine, Purple, Heather Purple, etc., a Gray group with Charcoal, Gray, Heather Storm, etc, and likewise for all the other color values.
To the customer, we’ll present a simple, easy to use color swatch with a few select color groups representing all the colors instead of a long list of unfamiliar names.
