Search

Author: An Do 2652 views

The Search element allows you to add a search box to your page, helping visitors quickly find products, blog posts, pages, or other content in your store. This element works with your Shopify theme’s search function, so the search results and behavior may depend on the theme settings you are currently using.

You can use this element to improve navigation and make it easier for customers to discover the content or products they are looking for.

1. How to add the Search element in EComposer

You can find the Search element in EComposer editor > Elements > Advanced. Then, simply drag and drop the Search element to the position where you want it to appear on your page.

2. Content

The Content tab allows you to customize the main settings of the Search element, including Placeholder text, Button text, Button position, Icon, Icon position, and result types.

Placeholder text: Set the placeholder text displayed inside the search input field.
Button text: Set the text displayed on the search button.
Button position: Choose whether the search button appears on the left or right side of the search bar.
Icon: Select an icon for the search button.
Icon position: Set the icon position to the left or right of the button text.
Icon spacing: Adjust the spacing between the icon and the button text.
Specifies the type of results requested: Choose which content types can appear in the search results, including Product, Page, and Article. For example, if you enable all three options, Product, Page, and Article, the search results can display matching items from all selected content types. In the example below, the search results include product, page, and blog post/article.

Partial search allows you to control how the search handles incomplete or partial keywords when customers enter a search query. For example, if a customer searches for “winter snow”, the search behavior will depend on the selected option:
– With the “No partial search” option, the search will not include partial keyword matches. It will only look for results that match the entered keywords more strictly, such as content containing “winter” and “snow”, without matching longer words that start with “snow”, such as “snowboard” or “snowshoe”.
– With the “For last search term” option, the search will include partial matches for the last word in the query. For example, when customers search for “winter snow”, the search can find results that contain “winter” and words starting with “snow”, such as “snow”, “snowshoe”, or “snowboard”.
– With the “Show last” option, the search will prioritize and display results based on the last search term in the query. For example, if customers search for “winter snow”, the search will focus more on results related to “snow”, because it is the last keyword entered.

Unavailable products display: Choose how unavailable products are displayed in the search results. You can hide unavailable products, show them, or show them last. This option is only available when Product is selected in Specifies the type of results requested.
Sort by: Set the order of product results in the search results. This option is only available when Product is selected in Specifies the type of results requested.

Note: If you are using the Search function of the Flash Search app, it will automatically work with the Search element of EComposer.

Enable search suggestions: Enable or disable search suggestions when visitors enter a keyword in the Search form. You can choose which suggestion types to display, including Query suggestions, Collection suggestions, Page suggestions, and Article suggestions. If you do not want to show a specific suggestion type, simply uncheck the corresponding option.

This is how search suggestions appear on the live page. When visitors enter a keyword in the search field, relevant suggestions will be displayed below the search bar.

“No product found” text and other labels: Customize the text displayed in the search suggestion popup, such as the message shown when no products are found, as well as labels for Suggestions, Pages, Articles, Products, and Search for.

3. Design

The Design tab allows you to customize the appearance of the Search element, including the overall style, input field, submit button, icon, and predictive search dropdown.

General: Customize the main style of the Search element, such as Background, Box Shadow, Border, and Border Radius.

Input: Customize the style of the search input field, including text alignment, typography, text color, placeholder color, width, height, background, box shadow, border, border radius, outline, and spacing. You can also adjust the input style for different states, such as Normal and Focus.

Submit button: Customize the style of the search button, including typography, text shadow, box shadow, width, height, text color, background, border, border radius, and spacing. You can also adjust the button style for different states, such as Normal and Hover.

Icon: Customize the search icon style, including color, size, rotation, margin, and padding. You can use these settings to adjust the icon appearance and spacing inside the search button.

Predictive search: Customize the style of the predictive search dropdown that appears when visitors enter a keyword in the search field. You can adjust the overall dropdown style, as well as the display styles for different result details, including Heading typography, Heading color, Title typography, Title color, Price typography, and Price color. You can also customize the Normal and Hover states for the result title to match your store design.