Suppose you own a clothing company and your customers often search for fairly vague terms like "T-shirt," "underwear," or "gloves." This may easily return hundreds of results. By adding a "Find by Price" or "Find by Brand" option to the page, you provide an easy way to refine their search to a particular price range or brand.
You can also create custom filters, which enable you to filter search results by any attribute(s) you want to apply besides price and brand. For example, if you sell DVDs you could filter search results by genre or rating. This is covered in a separate article: How to Create a Custom Filter.
- Turning on Search Refinement
- Configuring Search Refinement in Your Template
- Renaming the Filter Labels
Turning on Search Refinement
To start using Search Refinement on you site:
- From your Admin Area, go to Settings > Config Variables.
- Enable the Enable Search Refinement variable.
- Click Save.
Now that the Search Refinement function is active, customers viewing categories or searches that produce more than one result will find one or more search refinement lists near the top of the page. These will have the titles Find by Brand and Find by Pricing and list the brands (manufacturers) or price ranges these results can be further broken down into.
You can use the configuration variables mentioned earlier to change the look and feel of the search refinement. You can make them appear as dropdown lists rather than links, choose to show the number of results in each set of results and choose to hide the Find either or both of them.
Find by Pricing
The price ranges shown in the Find by Pricing filter will depend on the number of results and the total range of prices. For example, if you have products ranging in price from $12 to $105, products might be broken down into the following:
The numbers in parenthesis show the number of different products in each price range. Clicking on a range will filter the products to display just those in that range, and will also break down the price ranges further. For example, if a customer clicked on "69 to 79.99 (19)", he or she would see something like this:
Find by Brand
The Find by Brand filter displays a list of brands (manufacturers) that exist for products in the search results. By default, your products do not have a specific brand assigned to them. You can designate a product's brand within each product record by doing the following:
- Go to Inventory > Products and click to edit a product.
- In the Advanced Info section, select the Misc tab.
- In the Manufacturer field, enter the name of the brand or manufacturer associated with this product.
- If you have a small logo image for your Manufacturer, you can click Upload Logo to add it. Make sure that your image file is in .gif or .jpg format. You must name the file with the exact manufacturer name, keeping capitalization consistent. The system will automatically insert hyphens in place of any spaces in your image file name, so if your manufacturer name is more than one word, it's a good idea to add hyphens between the words so you can easily name your file to match.
- Click Save.
The manufacturer name you assigned to this product will now appear in the Find by Brand list. If you uploaded a manufacturer logo, it displays directly above the product's main image on the product page.
Note that if a customer tries to filter results by brand and the Manufacturer field is blank for all products, results will be sorted by the system-generated Product ID. This also applies when a category's Default Sort By mode is set to Manufacturer.
If you don't typically assign manufacturers to your products and want to remove this filter option, enable the Hide "By Manufacturer" Filter In Search Refinements variable at Settings > Config Variables.
Renaming the Filter Labels
Like most text on your storefront, you can customize the text used by the search refinement feature to suit your needs. For example, you might want to change Find by Brand to Find by Manufacturer.
- Go to Design > Site Content.
- Select Page Text from the Article Group menu.
- Select SearchResults from the Category menu.
- Locate article ID numbers 710, 714, and 716.
Here, you can edit the Find by Pricing, Find by Brand, and Find by Category labels.
If you want to replace the "Find By" part of the text, you should also change article ID number 245 (select SearchRefinement from the Category drop-down menu. Leave the "(0)" part of the text unchanged, however, because it is required in order to show the option category name.
Please note that it is not currently possible to edit, delete, or add to the default selections within these refinement categories.
Configuring Search Refinement in Your Template
By default, the search refinement links or dropdowns appear on your storefront above the search results. If you understand HTML, you can configure them to appear somewhere else on the page.
Remember to archive your theme before you make any changes!
1. Go to Settings > Config Variables.
2. Make sure Manually Code Search Refinement In Template is selected. This will hide the built-in links or drop-downs for Search Refinement and allow you to position them where you want.
3. Go to Design > File Editor.
4. Select your active store template from the Template Files section of the Shortcuts column on the right.
5. You should now see the HTML code for your active store template.
6. The code you need to enter will depend on what filters you want to be displayed.
If you want to show the Price Range, Brand, and any custom filters you've set up in a row, enter the following code into the appropriate location of the store template:
<div id="search_refinement_filters"> </div>
If you just want to show the Price Range filter, insert this code:
<div id="DropDown_ShopBy_Price" param_defaultvalue="Shop By Price"></div>
If you just want to include the Brand filter, insert this code:
<div id="DropDown_ShopBy_Manufacturer" param_defaultvalue="Shop By Brand"></div>
In both cases, you can change the filter title by editing the param_defaultvalue parameter.
7. Save your template. When you next view your store the search refinement links/dropdown should appear corresponding to where the code was inserted.
Note that you may also need to modify your CSS or HTML to integrate these lists or drop-down menus with your store's overall design.