Product Filters & Search


Product enables you to build highly customisable on-site search based on your existing products, options and attributes plus new “product tags”. This is often used instead of Advanced Search Manager which is not as flexible.


Users can use multiple selections to find the specific products they want and results can be displayed and sorted in different ways (Price High To Low, Low To High, A-Z, Rating & Popularity)


For example, if you sell kids clothing and some of your products feature characters from different franchises such as Disney, Spongebob Squarepants and so on, you could create a product tag group called “Favourite TV Characters” which will then display all those products tagged to appear in that category.


NB Product filters is not available for use on auto parts sites, which have a specialised search facility already in place. 


Using Product Tags Instead Of Other Standard Searches


Because of the level of flexibility that product tags introduces, you may decide to use these in place of other standard searches such as options and attributes. If so, you will need to go through and tag all your products individually before removing the standard search options.


Setting Up Product Filter Tags


1. Go to  Product Filter Tags 


2. Create tag groups via Manage Tags > Add Tag Group (e.g. TV Characters).

This will now automatically display at the bottom of the tag groups


3. Add individual tags within the new tag group using Add Tag


4. Upload an icon for this tag, which will appear in search results e.g. if you are selling food, you could show how spicy it is with different "red chilli" symbols, a 1 chilli image, 2 chilli image and so on.


4.Click Save


Once you have saved the new tags, you can then drag and drop them into your preferred display position.


Deleting Product Tag Groups & Tags Within The Group


You can delete tags within tag groups by simply clicking on them and they will be deleted. If you delete all tags within a group then the group will automatically be deleted when you click Save because it is empty.


Adding Product Tags To Your Products


Via Product Manager, select each product in turn and click on the new Filter Tags tab. You will see all available tags within their respective groups.


Click a tag to add it, a tick will appear. Tick it again to deselect it.


Click Update to save your product tags. 


This will then pull through all tagged products when visitors select the associated tag when

they search on the website. 


Setting Up The Product Filter


Access the program Product Filters App Manager (this feature has to be turned on by ) and add a Title and Tag Line which will display on the website when the app is added to the site via Page Manager.


Setting Up Search Blocks


To set up a search facility click Add Block and select which part of the store will be used for the search from the drop down list available in the Type field e.g. options, attributes, brands, categories, product tags (filter tag groups), summary selection, custom page content (this enables you to pull in content from a custom page and display it, for example you may have image links on the page) and text search. Most of the blocks are self explanatory, the table below helps describe the following blocks:


Summary Selection

Display a summary of the options selected by the visitor so far, use the Summary Selection block.

Custom Page Content

Allows you to insert content from a page set up in Page Manager, giving you the flexibility to add further linked content rather than being restricted to product-specific data. For example, links to special offer pages or specific landing pages.

Text Search

Allows you to search on text fields including product name, product code and also product ID.


Settings Within Each Search Block


When you set up each block you are able to configure how the search can be selected and results displayed. Most are self-explanatory, the table below helps describe the rest.


Range

Allows you to set a min / max price range and the start / end positions of the sliders which the visitor will see displayed by default

Minimised

Only show the search group name and reveal the options within it when clicked

Remove not found

Tick this to hide any options which don't have any products to show

Multi-select

Allow customers to select multiple search options within a group

Display type

In-line block (show results wrapped around on a line)

Vertical text

A list of search options

Drop down

A drop down list of search options

Colour blocks

Display colours in blocks
Taken from a pre-defined list:
Blue
Light Blue
Dark Blue
Black
Red
Green
Grey
Gray
Cream
White
Purple
Violet
Brown
Orange
Yellow
Pink
Denim
Dark Denim
Light Denim

Note to developers: Colours can be extended for different colour ranges/combinations/multicolour via CSS by inspecting and targeting the element in the template CSS file.


Ordering Search Blocks


You can order the sequence in which Search Blocks are displayed on the web page using the normal drag'n'drop techniques used in the site.


Adding The Product Filter App To Your Website Page(s)


The Product Filter can be added to the shop_layout page and shop_product_layout page as a sidebar app in Page Manager.


Product Filter API Access


Developers can now access the product filter via the REC API .


/products/filter api sub resource -> E.g. /api/v1/products/filter/category,boxes/ (Returns all products from the "boxes" category)


/product-filter-blocks resource -> E.g. /api/v1/product-filter-blocks?prefilter=category,boxes&remainingOnly=true (Returns all blocks that remain after filtering by a "category" of "boxes")