Search Builder

The Search Builder lets you craft your own search experience and style the pages that show results. You control the intro area (what visitors see when there are results — or none — for their query), the content area that lists the results, and the look of each individual result item, down to spacing, colors, and typography.

Find it under Theme Settings » Search.

The builder is organized into three parts:

• Intro Section — the top area that greets the search query and its outcome.
• Content Area — the container that holds the list of results.
• Post Item — the styling of each individual result.

Intro Section

The Intro Section responds to the visitor’s search. Each element lets you set content for both cases — when results are found and when they are not — so your messaging always fits the situation.

Element	What you control
Heading	Content for the results and no-results cases, plus color and typography.
Search Term	Color and typography of the searched term.
Description	Content for both cases, plus color and typography.
Button	Background, Background Hover, Text Color, and typography.
Field	Background, Background Hover, Text Color, and typography.

Speak to the “no results” case

Give the no-results heading and description friendly, helpful wording — for example, suggesting different keywords. It turns a dead end into a good experience.

Content Area

The Content Area is the container that lists matching posts.

Group	Setting	What it controls
Section Layout	Max Width	The maximum width of the results container.
Section Layout	Vertical Padding	Space above and below the results.
Section Layout	Columns	The number of columns the results are arranged in.
Section Color	Background	The background color behind the results.

Post Item

The Post Item controls how each individual search result looks, including hover states.

Element	What you control
Block	Color and typography of the result block, with hover states.
Heading	Color and typography of the result title, with hover states.
Excerpt	Color and typography of the result’s excerpt, with hover states.
Link	Color and typography of the result link, with hover states.

Related

• 404 Page Builder — style the page shown when content is not found.
• Global Style — the defaults your search pages inherit.