Search Modules

The Search Modules extension enhances your store’s header with advanced search functionality, allowing customers to quickly find products, collections, or pages.

Key features:

• Instant or predictive search suggestions

• Search by product title, tag, or collection

• Customizable layout and style options

• Seamless integration with the header design

Location: Header → Header Extensions → Search Modules

---

Search Modules — Options Overview

The Search Modules section adds additional blocks (Collections, Products, and Banners) to the search popup header. It works when the search feature is enabled in the header section and always functions on mobile devices. When predictive search is used, the additional content automatically hides during typing to ensure a clean search experience.

Option	Values / Range	Description
Heading alignment	Left, Center	Sets the alignment of the section title in the search popup.
Collections – Image ratio	Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9)	Defines the shape and proportions of collection images.
Collections – Text align	Left, Center	Aligns collection titles relative to the image.
Collections – Underline on hover	—	Adds an underline effect when hovering over collection text.
Collections – Show products count	—	Displays the total number of products in each collection.
Products – Image ratio	Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9)	Controls the size and ratio of product images.
Products – Quantity displayed	2 – 50	Determines how many products are shown in the search results block.
Products – Text align	Left, Center	Sets text alignment for product titles and info.
Products – Image action	Only image, Show second image on hover, Gallery	Defines what happens when the user hovers over a product image.
Products – Show second image on hover	—	Displays a secondary image on hover for products with multiple images.
Products – Underline on hover	—	Adds an underline effect when hovering over product titles.
Products – Show vendor	—	Displays the product vendor name below the title.
Products – Show price	—	Shows product price in the block.
Products – Truncate product name	—	Shortens long product names to maintain layout consistency.
Products – Enable review stars	—	Displays review stars for products if available.
Banners – Number of columns (desktop)	1 – 6	Sets how many banners appear per row on desktop.
Banners – Number of columns (tablet)	1 – 3	Defines banner layout for tablets.
Banners – Mobile grid	1 – 2	Determines how banners are displayed on mobile.
Banners – Image ratio	Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9)	Controls proportions of banner images.
Banners – Image hover effect	Basic theme settings, Disable, Zoom in #1, Zoom in and rotate, Zoom in #2, Zoom out #1, Zoom out #2, Slide, Shine	Selects a hover animation style for banner images.
Colors – Base block	—	Sets the base color for all block elements.
Colors – Accent	—	Applies accent color to highlight elements.
Search modal – Heading color	—	Sets the text color of modal headings.
Search modal – Background	—	Defines the modal’s background color.
Search modal – Background overlay	—	Adds a semi-transparent overlay behind the popup.
Search modal – Close button color	—	Changes the color of the close icon.
Search input – Background	—	Sets background color of the search input field.
Search input – Border	—	Defines border color around the input.
Search input – Text	—	Adjusts input text color.
Search input – Icon	—	Sets the color of the search icon.
Search input – Hover states	Background hover, Border hover, Outline hover, Text hover, Icon hover	Defines hover color behaviors for input and icons.
Predictive search – Heading	—	Sets heading color for predictive search suggestions.
Predictive search – Link / Link hover	—	Controls link and hover colors for suggested items.
Predictive search – Product vendor	—	Sets color for vendor names in predictive search results.
Predictive search – Product name / hover	—	Defines colors for product names and their hover state.
Predictive search – Price / Sale price / Old price	—	Customizes colors for standard, discounted, and old prices.
Predictive search – Show all / Show hover	—	Adjusts colors for “Show all results” links and hover effects.
Predictive search – Lines	—	Sets the color for divider lines.
Predictive search – Review stars	Stars active, Stars base	Defines colors for active and inactive review stars.

To optimize user experience, keep the number of products and banners moderate to ensure fast loading and clear navigation. Use consistent image ratios across collections, products, and banners for a visually aligned design.