Align v1.7 is out now! Learn more about the best release yet →
The Predictive Search block enhances search functionality by providing real-time suggestions and results as users type, improving the overall user experience. It allows customization of the search input field and button, including placeholder text, button text, and input style. Users can choose from various layout and alignment options to ensure the search block fits seamlessly within the theme design.
Predictive search settings enable the display of potential matches and a features bar to highlight key announcements. Default and secondary results can be configured to guide users when no search terms are entered. Banner and background settings offer additional customization options, including the use of images or videos.
Usage examples include enhancing user experience by enabling predictive search, customizing appearance to match the theme design, and highlighting features through the features bar. These functionalities make the Predictive Search block a versatile tool for improving search efficiency and user engagement.
Overview #
The Predictive Search block is designed to enhance the search functionality by providing users with real-time search suggestions and results as they type. This block is particularly useful for improving user experience by making it easier and faster for users to find what they are looking for.
Key components and functionality #
Search settings
The search settings allow you to customize the appearance and functionality of the search input field and button.
Placeholder text
Customize the placeholder text that appears in the search input field. The default value is "Enter your search terms".
Button text
Define the text displayed on the search button. The default value is "Search".
Input style
Determine the appearance of the search input field. Available options include:
- Stretch to fill
- Full width
- Icon only
- Small field
The default option is Stretch to fill.
Layout settings
Layout settings control the overall arrangement and alignment of the Predictive Search block.
Fill available space
Enable this option to allow the search block to fill the available space.
Centered block
Choose to display the search block centered within its container.
Predictive search settings
Predictive search settings enhance the search experience by showing potential matches as the user types.
Show predictive results
Enable this option to display predictive search results. By default, this setting is enabled.
Show features bar
Display a features bar to highlight key features or announcements. By default, this setting is enabled.
Default results
Specify a default menu to display when no search terms are entered. The default menu is main-menu.
Title for default results
Set a title for the default results section. If left empty, the menu name will be used. The default title is "Trending Searches".
Secondary default results
Specify a secondary menu to display in the search window's secondary container. The default menu is main-menu.
Banner settings
Banner settings allow you to display a banner within the navigation item.
Show banner
Enable this option to display a banner within the navigation item.
Background settings
Background settings control the appearance of the background image or video.
Background image fit
Control how the background image is displayed. Options include:
- Contain
- Cover
- Default
The default setting is Cover.
Background image
Select a background image for the search block.
Background video
Add a background video to the search block.
Alignment settings
Alignment settings determine the positioning of content within the block.
Horizontal alignment
Determine the horizontal alignment of the content. Options include:
- Left
- Center
- Right
Vertical alignment
Control the vertical alignment of the content. Options include:
- Top
- Center
- Bottom
The default setting is Bottom.
Button settings
Button settings allow you to customize the appearance and layout of the search button.
Button style
Customize the appearance of the search button. Options include:
- Primary
- Secondary
- Extra large
- Plain
- Small
- Small secondary
Button layout
Determine the layout of the button in relation to the icon. Options include:
- Icon left
- Icon right
- Icon only
Link settings
Link settings allow you to choose how links are displayed.
Link style
Choose how links are displayed. Options include:
- Button
- Full block
- Full block with button
Available in sections #
- Main navigation
- Hero
Usage notes #
- Responsive design: Ensure that the search block is optimized for both desktop and mobile devices by testing the layout and appearance across different screen sizes.
- Performance: Keep the background images and videos optimized for web use to ensure fast loading times and a smooth user experience.
- Accessibility: Make sure that the text and background colors meet accessibility guidelines to ensure that the search block is usable by all users, including those with visual impairments.
Usage examples #
-
Enhancing user experience: By enabling predictive search, users can quickly find products or content as they type, reducing the time spent searching and improving overall satisfaction.
-
Customizing appearance: Use the input style and button style settings to match the search block's appearance with the overall theme design, ensuring a cohesive look and feel.
-
Highlighting features: Utilize the features bar to draw attention to special promotions or important announcements, enhancing the visibility of key information.
Align v1.7 is out now! Learn more about the best release yet →