Product Search: Working with Pictograms

Knowledgebase Articles: Product Search: Working with Pictograms

The main article: Working with the Guided Navigation Settings page section

There is an option to configure a filter to have a Pictogram display type. This means that the filter options will be displayed as images instead of text which makes a refinement by colour for example, a more visual experience for the customers. This functionality can be customized for other uses - shoe sizes, brand names, etc.

To configure a filter with Pictogram display type:

1.    Login to your Swifty platform site Control Panel, go to Website > Edit Website > Page Sections > Product Catalogue > Guided Navigation..
2.    Drag and drop the 'Guided Navigation..' section to a Category, Brand or Product Search Results pages (it is present by default on this page for site accounts to which a standard template is applied)
3.    Click on the ‘pencil’ icon to open the section in edit mode
4.    Click ‘Add’ to add a new filter
5.    On the next screen, choose a ‘Custom attribute’ radio button (if product colours are stored in the custom attribute field) and click ‘Next’
6.    Enter the Filter Label – this is the filter name that will be visible to the customer. It will also appear under the 'You have searched by' section after the filter has been applied by the customer.
7.    Select an Attribute Name from the list of values in the dropdown that stores product colours
8.    Select ‘Pictogram’ from the Display Type drop down. If the ‘Pictogram’ display type is selected and an attribute/option name is specified, a button ‘Upload Pictograms’ will appear.
9.    If the ‘Allow Multiple Selection’ check box is checked, it will allow the customer to filter by more than one option within a filter, for example 'Blue' and 'Red' within filter by 'Colour'.
10.  Click the ‘Upload Pictograms’ button which will open up a new dialog window.
11.  The list of available filter options is auto-generated based on the data in the product database.
12.  Please upload pictograms for all options by clicking on the image. You can delete a pictogram by dragging and dropping it into the recycle bin. Pictograms will be resized by the application to fit 18px x 18px in size. File size should not exceed 50 KB and must be in JPEG, PNG or GIF format.
13.  If an image for an option is not uploaded, a default pictogram will be used instead. A default pictogram can be edited, but cannot be deleted.
14.  When a customer filters by a specific option, a transparent image overlay (Selected Pictogram tick box) will be displayed over a pictogram to indicate that it's been filtered by. Overlay image to represent a 'selected' state can be edited via CSS, alternatively if no image is uploaded, CSS can be amended to use border=1 instead.
15.  Once all pictogram images are uploaded, click the ‘Done’ button to return back to the Guided Navigation Settings dialog window.
16.  Click ‘Done’ on the Filter Settings dialog box to save your changes.

Pictograms will be displayed next to each other on the front end as part of the guided navigation section. Each pictogram will have an Alt text displayed when a customer hovers over them.

Important note for developers and shop owners who use bespoke templates:

1. This functionality is only available for templates that have the generic template version id=9 or greater. Please see Template Version Control for more information on the generic template version.
2. If needed, default dimensions of pictograms (the 'Pictogram' display type) can be changed in the config.xml file


Have more questions? Submit a request


Article is closed for comments.