Search

Featured links

1. Company XYZ documentation on predictive search settings
2. Search & Discovery app
3. Company XYZ documentation on the search block
4. Company XYZ documentation on using video
5. Company XYZ documentation on icons
6. Company XYZ documentation on banner colors settings
7. Company XYZ documentation on cards settings
8. Company XYZ documentation on visibility settings
9. Shopify documentation on sections and blocks

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

This block adds a search field with optional live results, curated default suggestions, and promotional banner content. Use it when you want search to do more than accept queries and instead actively guide customers toward products, collections, or key pages. For a broader overview of how blocks work in themes, see Shopify documentation on sections and blocks

Core settings

The main text settings shape the first impression of the search experience. Use the placeholder to tell customers what they can search for, and keep the button label short so it fits comfortably across layouts.

In most cases, simple wording works best. Clear prompts are easier to scan than branded phrases that make the field feel less obvious.

Predictive search settings

This group controls the live search experience that appears while customers type. It also lets you shape the empty state with curated default links so the block remains useful before a query is entered.

Real-time predictive search requires the Search & Discovery app to be installed and configured. See the source-provided references for predictive search settings, the Search & Discovery app, and the canonical Search block reference.

The settings in this group only apply when predictive search is active. If live results are unavailable, these controls will not change the search experience as expected.

Use the default and secondary results menus to turn the empty search state into a helpful discovery panel. Popular collections, seasonal destinations, support pages, or common categories usually work better here than long, deeply nested menus.

If you leave the default results title empty, the menu name is used instead. Check that menu label carefully so the search panel still feels intentional.

The optional banner and features bar can add merchandising and reassurance, but they should support search rather than compete with it. If the panel starts to feel crowded, simplify the surrounding content before reducing result visibility.

Banner background

This group controls the background for the optional banner area. You can use an image or video and adjust how background media fits the space.

Mobile-specific background media is useful when the desktop crop does not translate well to smaller screens. This is especially important when the artwork includes text, people, or products near the edges.

Choose media that still leaves room for readable foreground content. A visually strong asset is only helpful if headings, buttons, and supporting copy remain easy to scan.

Tip

Use dedicated mobile background assets when your desktop media depends on a wide crop. This usually gives you better framing and cleaner text contrast on smaller screens.

For video setup best practices, see using video.

Banner foreground

This group lets you layer promotional content over the banner background. You can add an icon, caption, heading, subheading, and a call to action, then position that content within the banner.

Blank fields are simply hidden, so you can keep this area minimal or build a fuller promotional message. In most cases, one clear heading, one short supporting line, and one action will perform better than a dense content stack.

Choose the heading type to match the surrounding page hierarchy. The goal is to make the banner feel structured without overpowering nearby content.

If you add a button, keep the wording direct and action-focused. Layout, icon, and style settings help refine the presentation, but the link style has the biggest effect on how the banner behaves.

Caution

Choosing a full-block link style removes links from the subheading text. Use it only when you want the entire banner area to act as the main click target.

If you use icons, you can enter an emoji or a supported icon name. For icon guidance, see icons.

Banner foreground media

Use this group to add a foreground image alongside the banner text, such as a logo, badge, product cutout, or campaign graphic. This media appears with the foreground content rather than behind it.

Smaller image widths work well for logos and decorative accents, while larger widths suit product art or bold promotional visuals. If you set the width to 0, the image can stretch across the available space, so review the result carefully on smaller screens.

If you add a link to the image, keep it aligned with the banner message. Separate destinations inside a compact banner can make the block feel less focused.

Banner colors

This group lets you override broader theme color choices for the banner area. Use it when the search banner needs stronger branding or when your background media needs extra contrast support.

Overlay and text colors are usually the most important controls here. A subtle overlay can preserve the look of an image or video while making headings, copy, and actions much easier to read.

Prioritize readability over decorative color matching. If the banner includes text or actions, make sure they remain clear in both desktop and mobile views.

For more on these controls, see banner colors.

Standard block settings

Card settings

These shared settings control how card-based results are presented in this block. Use them to align result cards with the rest of your store or to give search results a more distinct visual treatment.

The most impactful choices are card style, image ratio, and how much text each card shows. If customers are likely to browse several results quickly, favor scannable cards over layouts that make each result too tall.

For the shared reference, see Card settings.

Visibility settings

Use these settings to show or hide the block by device size. They are most useful when you want a different search presentation on desktop and mobile.

If you hide this block on one device size, make sure another clear search entry point is available there. For the shared reference, see Visibility settings.

Editor settings

These settings only affect how the block is labeled in the editor. A custom editor title is helpful when you use multiple Search blocks or want to identify a campaign-specific version more easily.

Usage notes

1. Plan for two search states. The empty state and the typed-query state can serve different goals, so make both feel intentional.
   1. Use curated default content to guide first-time browsing.
   2. Keep live results focused on the most useful matches.
2. Review both viewports. Desktop and mobile controls can change layout, alignment, and media behavior, so check both sizes before publishing.
   1. Confirm banner text stays readable.
   2. Make sure media crops still support the message.
3. Keep styling choices deliberate. Blank or default-style values usually preserve the theme’s fallback look, while explicit colors, gradients, or media overrides make the area feel more custom.
4. Use media with care. Images and videos can affect cropping, loading, fallback, and legibility, especially when desktop and mobile assets differ.
5. Support form clarity. Keep labels, prompts, and any success or error messaging easy to read so customers can search without confusion.