To enable text-based filtering for your products, follow these detailed steps:
1. Accessing Product Filters
- Navigate to: Go to Product Filters in your admin panel. This section allows you to manage and configure various filtering options for your products.
2. Enabling Search
- Form Management:
- Click on Form Manage within the Product Filters section.
- Here, you’ll find various settings related to the filter forms.
- Turn On Search:
- Locate the option labeled Show Search.
- Toggle this option to enable the search functionality.
- This feature allows users to input text queries to filter products based on titles, descriptions, or any other searchable attributes.
3. Styling the Search Field
If you want to customize the appearance of the search field, you can do so by navigating to:
- Product Filters -> Form Style.
Styling Options
The Search Filter comes with two different style options that you can choose from:
-
Style 1: Input Box with Search Button
A full search bar that includes an input field, search button, and widget title.
This style provides users with a clear and interactive search experience.Customization Options:
- Widget Title: Add a title for the search section.
- Placeholder Text: Add custom placeholder text inside the input.
- Button Text: Define the label for the search button.
Style 2: Simple Input with Icon
A sleek and minimal search field that includes only the input box with a search icon and widget title.
Customization Options:
- Widget Title: Add a title above the search bar.
- Placeholder Text: Customize the placeholder text.
4. Testing the Search Functionality
After enabling and styling the search option, make sure to:
- Test on Front End: Navigate to the product page where the filters are implemented. Enter various search queries to check if the filtering works accurately.
- Check for Results: Ensure that the search results update dynamically as you type or after hitting the search button.
- User Experience: Consider conducting user testing to gather feedback on the search functionality and make adjustments as needed.
By following these steps, you can effectively implement and style a text-based search feature for your product filters. This feature enhances the shopping experience by allowing users to quickly find desired products, ultimately improving user engagement and satisfaction on your website.