Before you begin, make sure that you have installed and activated Sastra Addons Pro plugin on your website. Without the Sastra Addons Pro activated, you cannot use this elements.
How to Configure and Style Product Filters #
Product Filters is a handy tool on e-commerce sites, helping users quickly refine their search results. With options like price range, brand, size, and more, it streamlines the shopping experience, letting users find exactly what they need with ease.
How to Activate Product Filter #
First, navigate to the Sastra Addons -> Widget Settings tab. Here, you can type Product Filter inside the search bar on your right and find the widget. Then turn on the widget’s switcher.
To use this Sastra Addons element, find the ‘Product Filters‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Product Filter’ into the ‘Drag widget here‘ or the ‘+’ section.
After you are successfully done with step 1, this is how the element is going to look like.
How to Configure the Content Settings #
Under the content tab, you will see several options like ‘General’ & ‘Title’. You can configure these settings to customize the content of your Product Filters.
General #
From this section, you can use the drop-down to select one of these as your filter type: Active, Search, Price, Rating, Product categories, Product tags, Product Brand, Product Color & Product Size Selection.
Afterward, you can adjust additional settings to your liking, such as count, relation, icon, layout, alignment, and more, depending on the filter type.
Title #
This section allows you to establish the title text, select an option from the dropdown to modify the title HTML tag and adjust the alignment as needed.
Search #
Note: This segment is visible exclusively during a Filter type search.
From this section, you can set placeholder text. You can use toggle for enable or disable search button.
If button toggle is enable than you can use toggle for enable or disable button click, use drop-down for style, type and set button text or set icon as per your preference.
Click to see Live Demo #
How to Style Product Filters #
To customize Product Filters, click on the ‘Style’ tab, and you will find many different options here.
Title #
From this section, you can set title color, typography and distance.
Search #
Note: This section and it’s customization options will appear depending on the Content → General → Filter Type you choose.
From this section, you can set color, background color, icon styles and spacing, button styles, label styles, border related styles, alignment, box shadow, customize input field and many more option based on your filer type.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Product Filters as per your preference.
The product filter widget has significantly improved the user experience by simplifying product search and increasing engagement.
If you face any difficulties, feel free to contact our support team for further assistance.
