If you have numerous product models with complex parameters, a powerful multi-condition filter will be a magic weapon to improve inquiry conversion rates. In the SX-Creval system, you don't need any development; simply combine input boxes like building blocks to deploy an industrial/e-commerce-grade parameter selection engine for your product portfolio. After customer filtering, the system automatically presents a high-quality search results page.
SX-Creval Product Multi-Condition Filter Configuration Guide
Multi-condition filters help customers quickly locate target products within a product library with complex parameters. This guide will show you how to quickly build a practical product selection engine through modular configuration.
When configuring for the first time, it is strongly recommended to first build a simple, usable version according to the "basic template" in this article . After confirming that the front end can search normally, you can gradually add filter items according to business needs.
I. Must Read Before Configuration: Standardize Product Parameters
For filters to work, the product itself must have standardized parameter names and values . Before configuring filters, please ensure your product library meets the following rules:
- Specify the parameter names : such as "weight", "material", and "voltage".
- Distinguish between different ways of writing parameter values (very important):
- For parameters that require "range filtering" : the value must be a pure number (e.g., enter 200 for weight, not 200kg).
- The parameter that requires a "drop-down selection" can be text, letters, or content with units (e.g., fill in 304 stainless steel for material and CE for certification).
II. Getting Started Quickly: Building a Basic Filter (Recommended Template)
In most cases, an efficient B2B product selection tool for foreign trade only needs three core boxes: one keyword box, one dropdown box, and one range box . Please add the three filter options in the backend according to the following parameters:
1. Add a "keyword input box" (for searching by name/model number)
- Type selection : Keyword input box
- Front-end title : Search for products
- Placeholder message : Please enter the product name or model (or SKU/Keyword)
2. Add a drop-down menu (for selecting a fixed specification).
- Type selection : Drop-down radio button
- Front-end title : Material
- Product parameter name : Material (Note: This must be exactly the same as the parameter name in the product library)
- Option configuration :
- Option 1 - Display Name: 304 Stainless Steel | Query Value: 304 Stainless Steel
- Option 2 - Display Name: 316 Stainless Steel | Query Value: 316 Stainless Steel
3. Add a "double input box for numerical range" (for filtering numerical values).
- Type selection : Numeric range double input box
- Front-end title : Weight range
- Product parameter name : Weight
After saving, the front end will automatically generate these three components. The conditions entered by the customer (such as: containing pump, material is 304 and weight is between 150-250) will be combined and filtered to accurately match the results.
III. How to use the various filtering components (scenario comparison)
Once you have successfully implemented the basic template, you can refer to the following instructions to add other filter options:
1. Keyword input box
- Examples of applicable parameters : product name, model, SKU, core keywords.
- Applicable Scenarios and Explanation : The most common search method, suitable for global fuzzy search when customers have specific keywords.
2. Drop-down radio button
- Examples of applicable parameters : material, voltage, explosion-proof rating, color, certification (e.g., CE, IP65, 220V).
- Applicable Scenarios and Explanation : This applies to parameters for "fixed text options." This type of content typically cannot be compared in size; customers simply need to select from the dropdown list, and the system will perform an accurate match.
3. Dual input boxes for numerical range
- Examples of applicable parameters : weight, power, inner diameter, flow rate, length (e.g., 200, 15, 500).
- Applicable Scenarios and Description : Specifically designed for "purely numeric" parameters. After selecting this component, the front end will automatically generate two input boxes, Min and Max, for customers to enter values to define ranges and compare sizes.
IV. Common Problem Troubleshooting and Avoidance Guide
If you find that you can't find products after configuring the system, don't panic. In 99% of cases, this is due to the following three reasons. Please check them in order:
1. Check if the "product parameter names" are absolutely consistent (most common mistake)
The product parameter name entered in the filter backend must be exactly the same as the one entered in the product details, including capitalization and spaces .
- ❌ Incorrect example: The product name says "Voltage", but the filter name says "voltage" (lowercase first letter or an extra space).
2. Check if the query value in the drop-down list matches the product.
- ❌ Incorrect Example: The product parameter value is listed as 304 stainless steel, but the search value in the dropdown menu is only 304. The system will not find it because it cannot be a complete match.
3. Check if the value bound to the "range box" contains letters/Chinese characters.
- ❌ Incorrect example: A range box was used for the "Voltage" parameter, but the value in the product is written as 220V/50Hz.
- ✅ Correct approach: The system cannot compare values containing letters or symbols; these parameters can only be selected using drop-down radio buttons .
V. Configuration Recommendations (Pro Tips)
- Restraint is key (simplify) : Don't configure your filters like internal engineering software. Keep one search box and two to three core parameters that buyers care about most. Too many filters not only take up page space but also reduce the patience of ordinary buyers.
- To complement the UI animations : Since this is the core interactive area of the page, it is recommended to add a gradual upward entrance animation in the module's "animation settings," which can significantly improve the quality and professionalism of the front-end page.