Discovery
A search-first landing section. Shoppers type a question in their own words, such as a gift for a runner, or pick a suggested prompt, and matching products appear in place. When nothing matches, a fallback collection keeps them browsing.
At a glance: Add it to any page with Add section. Holds up to 6 blocks.
Good for
- A homepage hero that invites shoppers to describe what they need
- Landing pages for gifting or seasonal campaigns, with ready-made prompts
- Helping shoppers who don't know your product names find the right thing
How results are found
- There's nothing to connect. The section sends the shopper's words to Shopify's own storefront catalog search, which understands everyday questions and matches them against your product information. It doesn't use product tags or a list you maintain.
- Better product information gives better results. Clear titles, descriptions and product types help the search understand what each product is for.
- Prompt tiles and suggestion chips don't have fixed results of their own. Clicking one puts its text in the search field, and the shopper presses the arrow button or Enter to search, exactly as if they had typed it.
- Choose a Fallback collection, such as best sellers, so a search that finds nothing still shows products.
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Discovery and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Layout
| Enable full width | Stretches the section edge to edge instead of holding it inside the page container.
Off by default. |
| Background color | Solid background color, applied instead of the color scheme background.
Default: #E5F2F3. Only appears when Enable full width is off. |
| Section style | Compact style doesn't support prompt images. Only the prompts you add are shown.
Choose Standard (default) or Compact. |
| Result text color | Color of the matching-results text in the compact style. It only applies when the section isn't full width.
Default: #000000. Only appears when Enable full width is off and Section style is Compact. |
Content
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Desktop text alignment | Aligns the heading and body text left, center or right on desktop.
Default: Center. |
| Mobile text alignment | Aligns the heading and body text left, center or right on mobile.
Default: Center. |
| Hide content on mobile | Hides the heading and description on phones so the search bar is the first thing shoppers see.
Off by default. |
Search
| Placeholder text | Hint text in the empty search field. With Rotating placeholder text filled in, it becomes the fixed start of the hint and the rotating words follow it, as in Ask about any… Products. |
| Rotating placeholder text | Separate each placeholder with a comma. |
Background
| Desktop image | Background image used on desktop.
2880 x 1280px (large) .jpg recommended. Only appears when Section style is Standard. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
800 x 1000px .jpg recommended. Only appears when Section style is Standard. |
| Overlay opacity | Darkens the image behind the text so the text stays readable. Higher values mean a darker image.
Adjustable from 0% to 100% (default 20%). Only appears when Section style is Standard. |
Results
| Layout | Applies to desktop only.
Choose Grid (default) or Carousel. |
| Number of products | The most products a search returns. The same number of products is shown from the fallback collection.
Adjustable from 2 to 12 (default 4). |
No results
| Fallback heading | The heading above the fallback collection's products when a search finds nothing. Only shown when a Fallback collection is selected. |
| Fallback collection | Shown when a search returns nothing. Leave empty to show suggestions only. |
Appearance
| Button shadow color | The colored glow under the round search button.
Default: #FF729E. |
| Prompt background color | The background of the prompt labels on the image tiles and of the suggestion chips.
Default: #E5F2F3. |
| Prompt text color | The text and outline color of the prompt labels and suggestion chips.
Default: #121212. |
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
| Card color scheme | Color scheme for cards inside the section, so they can sit apart from the section background. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Prompt block
| Desktop image | The image for this block.
2880 x 1280px (large) .jpg recommended. |
| Desktop image ratio | Crops images to a fixed shape so a row of mismatched uploads still lines up. Choose Adapt to image to keep each image at its own proportions.
Size is optimized automatically for mobile. Choose Adapt to image, Portrait (3:4) (default), Landscape (4:3) or Square (1:1). |
| Prompt text | The label on this tile. Clicking it puts this exact text in the search field, so write it the way a shopper would ask, such as Energy drink for running. Leave it empty to show the image without a label. |
| Desktop text position | Left and right are chosen automatically from where the prompt sits.
Choose Top (default) or Bottom. |
| Horizontal position | Horizontal position as a percentage across the image, from the left.
Adjustable from 0% to 100% (default 50%). |
| Vertical position | Vertical position as a percentage down the image, from the top.
Adjustable from 0% to 100% (default 50%). |
| Rotation | Tilts the tile by this many degrees for a scattered, hand-placed look. Applies to the Standard style on desktop.
Adjustable from -15deg to 15deg (default 5deg). |
Suggestions block
| Prompt suggestion 1 | A short question shown as a chip under the search bar. Clicking it fills the search field with the text. Leave it empty to hide the chip. |
| Prompt suggestion 2 | A short question shown as a chip under the search bar. Clicking it fills the search field with the text. Leave it empty to hide the chip. |
| Prompt suggestion 3 | A short question shown as a chip under the search bar. Clicking it fills the search field with the text. Leave it empty to hide the chip. |
| Prompt suggestion 4 | A short question shown as a chip under the search bar. Clicking it fills the search field with the text. Leave it empty to hide the chip. |
| Show prompts when no results | Keeps the suggestion chips visible after a search that finds nothing, so shoppers have something else to try. They are always hidden while results are showing.
Off by default. |
Tips
- Write prompts as questions a shopper would ask, such as Something for sensitive skin, not product names.
- Try each prompt on your live store. Change the wording of any prompt that doesn't bring back good products.
- Always set a Fallback collection. It turns a dead end into a set of popular products.
- Place prompt tiles around the edges of the image with the position sliders, so they don't cover the search bar.
Troubleshooting
Clicking a prompt doesn't show results
A prompt or suggestion fills the search field; the search runs when the shopper presses the arrow button or Enter.
A search shows an error message
The catalog search couldn't be reached. Try again on your live, published storefront; if it keeps happening, contact Shopify support, since the search runs on Shopify's servers.
The results aren't what I expected
Results come from Shopify's catalog search and depend on your product information. Improve product titles and descriptions, or reword the prompt.
Prompt images aren't showing
Prompt images only appear in the Standard style. Compact shows the prompts as plain chips.