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.
Tip: If a layout does not come with the section, it can be added manually by pressing the "Add section" button and choosing it from the proposed list of sections.
Note! Before adding this section and starting customizations, check whether the search feature is enabled in Theme settings -> Search. Turn on the "Enable search" option if it is currently inactive.
Search popup
Collection blocks
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.
Select the appropriate image aspect ratio in the "Image ratio" drop-down. 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 "Left" or "Center" using the "Alignment".
Use the "Link underline" drop-down to decide whether to underline the title on mouse hover:
"Global settings". Applies configurations from Theme settings -> Animations -> Hover animation.
"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:
Banner
Title the banner section using the "Heading" field.
Tip: Add each block by pressing the plus icon. The blocks can be used multiple times.
Collection or product
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 replaced in the "Image" picker.
The block title will be changed once a new text is entered in the corresponding field.
Here is how the block might be displayed in the Search popup:
Banner
Block link
Choose the destination after pressing a banner in the "Link" source selector.
Media
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.
Media overlay
Note! The "Image" settings described below will only apply to the desktop mode.
Turn on the "Enable" option to display the related settings.
Adjust the transparency of an image color overlay using the "Opacity" scale, which ranges from 0 to 100%.
In the "Type" picker, select one of the options: "Background" or "Gradient".
By selecting the "Background" option, change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.
Press the "Gradient" option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option here.
Content
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:
Last updated