Search

Add customizable predictive search with trending suggestions, branded visuals, and flexible alignment for better product discovery and a seamless user experience across navigation and hero areas.

Last updated 2 months ago

Overview

The Search block provides a predictive search experience within your storefront, allowing users to access suggestions, trending topics, and key promotions directly from navigation or hero areas. With its versatile customization options, you can seamlessly blend search into your branding and streamline how visitors discover content.

💡 Tip: Predictive search helps customers explore content and highlights promotions or collections before they even begin typing.

Input and layout settings

These settings let you define how the search bar is displayed and how visitors interact with it. You can create a minimal icon-only search, a compact input field, or tailor the placeholder and button text for clarity.

Block layout and alignment

Adjust how the Search block fits and aligns in different areas for a consistent, responsive appearance on both desktop and mobile.

  1. Fill available space

    1. Makes the block stretch to occupy its container

    2. Default: off

  2. Desktop alignment

    1. Left (default)

    2. Center

    3. Right

    4. Full width

  3. Mobile alignment

    1. Left (default)

    2. Center

    3. Right

    4. Full width

Predictive search and results settings

Fine-tune how predictive suggestions, trend menus, or features appear when users click the search bar. These settings amplify discoverability and streamline promotion.

📝 Note: Setting up default and secondary results gives curated, campaign-driven exposure within search suggestions.

  1. Show predictive results

    1. Display instant suggestions as visitors type

    2. Default: enabled

  2. Default results

    1. Primary menu shown before users enter a search

    2. Default: main-menu

  3. Show banner

    1. Highlights important content with a banner

  4. Banner background settings

Optimize the banner area using background images or video for both desktop and mobile. These settings allow for immersive brand visuals and can differentiate the search experience across devices.

💡 Tip: Use separate files for mobile and desktop backgrounds to guarantee quick load time and a crisp display.

  1. Background image fit

    1. Contain

    2. Cover (default)

    3. Default

  2. Background image (desktop)

    1. Set a banner image for desktops

  3. Background image (mobile)

    1. Supply a mobile-first image for optimal results

  4. Background video (desktop)

    1. Play a video as the search background on desktops

  5. Background video (mobile)

    1. Offer a separate video background for mobile screens

Banner foreground content

Overlay headlines, captions, icons, and action buttons directly onto your search area to increase engagement and drive users to key messaging or actions.

💡 Tip: Combine foreground headings and calls-to-action to maximize the search area’s impact on page navigation and campaign performance.

  1. Horizontal alignment

    1. Left

    2. Center

    3. Right

  2. Vertical alignment

    1. Top

    2. Center

    3. Bottom (default)

  3. Icon

    1. Place a visual symbol beside your heading or button

  4. Caption

    1. Give context or introduce branding with a short supporting line

  5. Heading

    1. Main headline, drawing attention to search or promotions

  6. Heading size

    1. Extra small

    2. Small

    3. Medium

    4. Large

    5. Extra large

    6. Jumbo

  7. Heading type

    1. Paragraph

    2. H1

    3. H2 (default)

    4. H3

    5. H4

    6. H5

    7. H6

  8. Subheading

    1. Detailed text or secondary call-to-action below the main heading

  9. Button icon

    1. Reinforce your button with an accompanying icon

  10. Button text

    1. Specific label for your call-to-action button

  11. Button link

    1. The page or offer your button directs users to

  12. Open link in a new tab

    1. Launch the button link in a new browser tab

    2. Default: off

  13. Button style

    1. Primary

    2. Secondary

    3. Extra large

    4. Plain

    5. Small

    6. Small secondary

    7. Circle

  14. Button layout

    1. Icon left

    2. Icon right

    3. Icon only

  15. Link style

    1. Button

    2. Full block

    3. Full block with button

Banner foreground media

Enrich the Search block’s impact with images and optional links, creating an engaging, interactive visual centerpiece.

📝 Note: Making the main image clickable can direct attention to products or featured collections.

  1. Image

    1. Add brand graphics or campaign visuals to the foreground

  2. Image style

    1. Default

    2. Rounded corners

    3. Circle

  3. Maximum image width

    1. Choose image width up to 1600px in 16px increments

    2. Default: 160px

  4. Link

    1. Make the image open a page when clicked

Visibility controls

Limit Search block visibility by device. This helps you avoid redundancy or create a focused experience for users on different platforms.

💡 Tip: Use hide-on-mobile or hide-on-desktop options to tailor search utility and reduce distractions on select devices.

  1. Visibility

    1. Do not hide (default) — visible on all devices

    2. Hide on desktop — visible only on mobile

    3. Hide on mobile — visible only on desktop

Available in sections

The Search block can be added in the following sections:

  1. Main navigation

Usage notes

📝 Note: To maximize usability:

  1. Write short, descriptive placeholder text and button labels for accessibility.

  2. Compress image and video assets for optimal speed.

  3. Adjust contrast and overlays for readability and compliance.

  4. Test alignments, button actions, and predictive results across devices to ensure smooth performance.