This topic explains how to add and use the category control and the search control. This guide uses articles as an example, and the process is similar for products.
Background
The figure shows the end-to-end workflow for designing articles or products. To display articles using the category or search control, follow these four steps.
-
Create or import articles: See Article Management.
-
Add and configure the category or search control (covered in this topic).
-
Design the results page: See Results Page Related Controls.
-
Design the details page: See Details Page Related Controls.
Differences between list, category, and search controls
The category control, search control, and list control are all used to display articles and products. They differ as follows:
-
List control: Displays articles or products in a list with a variety of appealing styles. It is ideal for showcasing newly added or the most popular content.
-
Category control: Displays products or articles based on the categories you define in the back-end. Ideal for websites with substantial content, it helps visitors quickly find their target categories. After adding a category control, you must also add a list control to the results page. This list control displays the items and links them to their respective details pages.
-
Search control: You must set keywords for your content in the back-end. It is ideal for websites with extensive content, helping visitors quickly search for relevant articles. After adding a search control, you must add a list control to the results page to display the search results and link to the corresponding details pages.
Add category or search control
For a video tutorial on using the category control, click Using the Category Control.
In the designer, click , select category control or search control, and then click a location in the design area to add the control.
Article categories correspond to the article category results page, and product categories correspond to the product category results page. Both are standard pages that you can switch between to view and design. For more information, see III. Switch page categories.
Configure category control
Categories are divided into article categories and product categories. You must define these categories before adding the category control. When you select the control, a quick settings panel appears where you can configure its Style, Edit, Animation, and Layout. After selecting the category control, click the Style tab. On the style configuration panel that appears on the right, you can set the Display Category Level (up to three levels, for example), toggle Show Pointer Icon, and configure the display styles for each category level and the border.
You can edit categories in the following three ways:
-
Add categories in content management. For more information, see Article Management for article categories or Product Management for product categories.
-
Edit categories during data upload.
-
Edit categories on the Article Management page or the Product Management page.
-
Style: Adjust the appearance for the default, hover, and selected states.
-
Edit: Select from your predefined categories.
-
Animation: Configure animation effects.
-
Layout: Adjust the size and position of the control.
Configure search control
When you select the search control, a quick settings panel appears where you can configure its Style, Edit, Animation, and Layout. After selecting the search control, click the Style tab on the toolbar to open the style configuration panel on the right. In the panel, you can switch between the Default and Hover states and configure the text (font, size, color, bold/italic/underline) and background (gradient, solid color, image, and opacity) for the input box, and customize the style of the search button.
-
The search control performs a fuzzy search on titles and keywords.
-
The search function currently supports only on-site searches for products and articles. Article searches lead to an article search results page, and product searches lead to a product search results page.
-
On a multilingual website, a search returns results only from the current language.
-
Style: Adjust the appearance for the default and hover states.
-
Edit: Specify the search type, the text on the search button, and the placeholder text in the input box.
-
Animation: Configure animation effects.
-
Layout: Adjust the size and position of the control.
Delete control
Select the category control or the search control and click the trash can icon to delete it.