Search popup
Add the current section to customize the Search popup when it is opened. The section contains blocks to display promotional banners or highlight collections and products within the popup.
Last updated
Add the current section to customize the Search popup when it is opened. The section contains blocks to display promotional banners or highlight collections and products within the popup.
Last updated
Note! Before adding this section and starting customizations, check whether the search feature is enabled in Theme settings -> Search -> Product suggestions. Turn on the "Enable search" option if it is currently inactive.
The current sub-section contains settings to adjust the general configurations for all "Collection or product" blocks.
In the "Heading" field, enter a section title.
Choose the appropriate aspect ratio of the images in the "Image ratio". You can use one of the options that display well on both desktop and mobile views: "Portrait", "Square", "Landscape" or "Circle". Check each image ratio here.
Set the block's title alignment to the "Left" or "Center" by operating the "Title align".
Use the "Title link underline" drop-down to decide whether to underline the title on the mouse hover:
"Global settings". Applies configurations from Theme settings -> Styles -> Animations.
"Enable". Activates the underline effect for titles on the desktop.
"Disable". Deactivates the underline effect for titles.
Adjust the color of titles operating "Title" and "Title hover" items.
The background color of the arrow can be set in the "Icon" picker. The arrow appears when hovering over the block’s image.
The next example demonstrates the title and arrow settings:
Title the banner section using the "Heading" field.
Tip: Add each block by pressing the plus icon. The blocks can be used multiple times.
In the following block, one can decide whether to display the list of collections or products in the section. Use one of the corresponding source selectors to place the desired content:
Select the needed collection in the "Collection" selector.
Add a product by using the "Product" selector.
Change the default link by applying a new URL from the "Link" source selector or add an external link to the field.
The default image can be resigned in the "Image" picker.
The block title will be changed once a new title is entered in the corresponding field.
Here is how the block might be displayed in the Search popup:
Choose the destination after pressing a banner in the "Link" source selector.
An image for all screen sizes can be applied by pressing the "Select" or "Explore free images" button.
To display a specific image for mobile, use the "Mobile image" picker.
Note! The "Image" settings described below will only apply to the desktop mode.
If you need to set the "Image overlay background", select the color from the color picker. By default, the color is set to transparent.
Press "Image overlay gradient" to apply the gradient vector. Read details on how to use the option here.
Adjust the transparency of an image gradient overlay using the "Image overlay opacity" scale from 0 to 100%.
Use the "Title" input field to add text over a banner. Style your text using the formatting options at the top of the input field.
The color of the text can be changed in the "Title" color picker.
The background color of the arrow can be customized using the "Icon" color picker. The arrow becomes visible when hovering over the block's image.
In the following examples, you can view how the block might display in the Search popup:
