Search

Written in stage 2

What this is for, when to use it, its layouts, screenshots and examples. Everything below is generated from the theme’s schema, so it always matches the theme editor.

Where you can add it

Not in the Add section list: it comes with its template or section group.

Blocks

• Journal card — part of this section; fixed: always present, can’t be removed or moved
• Page result — part of this section; fixed: always present, can’t be removed or moved
• Where to start — part of this section; fixed: always present, can’t be removed or moved

Journal card

Setting	Type	Default	Options and range
Image ratio Adapt keeps the photo’s own proportions.	Select	Portrait (4:5)	Portrait (4:5) Portrait (3:4) Portrait (2:3) Square (1:1) Landscape (4:3) Landscape (16:9) Adapt to image
Image corner radius	Range	28 px	0–40 px, step 2
Zoom image on hover	Checkbox	On
Show tag Shows the post’s first tag on its image.	Checkbox	On
Text on glass Auto picks dark or light text for each glass element from the brightness of the photo behind it. Shown when Show tag is on.	Select	Auto	Auto Light Dark
Show date	Checkbox	On
Show reading time Estimated from the length of the post, at 200 words a minute.	Checkbox	On
Show author	Checkbox	Off
Show excerpt Uses the post’s excerpt, or the start of its content.	Checkbox	On

Page result

Setting	Type	Default	Options and range
Show group The menu item the page sits under in the section’s breadcrumbs menu. A page the menu doesn’t place shows “Page”.	Checkbox	On
Show text snippet A passage of the page’s text around the first match, with the search words in bold.	Checkbox	On
Snippet length Shown when Show text snippet is on.	Range	220 ch	120–320 ch, step 20

Where to start

Accepts: Recent searches, Search menu, Shop by collection.

Setting	Type	Default	Options and range
Heading Shown when a search finds nothing, and before anything is searched. Make a word italic to set it on the pill.	Inline rich text	Where to start
Color scheme The sheet at the foot of the page. Its chips and capsules keep the page’s own white.	Color scheme	Scheme 2

Settings

Setting	Type	Default	Options and range
Heading
Highlighted word The word sits on a pill in the highlight color.	Select	Last word	None First word Last word
Show breadcrumbs	Checkbox	On
Show home link Shown when Show breadcrumbs is on.	Checkbox	On
Menu The breadcrumb trail follows this menu’s hierarchy. Each page result is also labeled with the menu item it sits under.	Menu	main-menu
Toolbar
Show the Journal tab	Checkbox	On
Show the Pages tab	Checkbox	On
Filter layout “Same as collection pages” follows Theme settings › Filters and sorting › Desktop layout. Tablets and phones always use the drawer.	Select	Drawer	Drawer Same as collection pages
Show grid density buttons Two buttons in the toolbar: larger images (one column fewer) or the columns set here.	Checkbox	On
Panel color scheme The toolbar and the panel shown when no products match.	Color scheme	Scheme 2
Products
Products per page	Range	8	8–48, step 2
Columns on desktop Narrow content holds four columns at most, so product cards keep a readable width.	Range	4	2–6, step 1
Columns on tablet	Range	3	2–4, step 1
Columns on mobile	Select	2	1 2
Space between columns The widest the gaps get. They narrow with the screen, as in the design.	Range	20 px	8–48 px, step 2
Space between rows	Range	48 px	16–96 px, step 4
Product card
Image ratio	Select	Portrait	Adapt to image Square Portrait Landscape
Content alignment	Select	Start	Start Center End
Show the image gallery on hover On hover the card moves through the product’s images, as set in Theme settings › Product card › Image on hover. Touch screens show the first image.	Checkbox	On
Show vendor	Checkbox	Off
Show color swatches Shows swatches for the first option that has them set up in your product settings, or sibling products when they are turned on in theme settings.	Checkbox	On
Show add to cart Adds to cart from the card for products with a single variant. Products with options link to the product page instead.	Checkbox	On
Pagination
Style	Select	Load more button	Load more button Page numbers Infinite scroll
Load to the end Products keep loading until the last one, so customers may never reach the footer. Shown when Style is Infinite scroll.	Checkbox	Off
Automatic loads Then a Load more button appears, so customers can reach the footer. Shown when Style is Infinite scroll and Load to the end is off.	Range	3	1–10, step 1
Stories per page Shown when Show the Journal tab is on.	Range	6	3–24, step 3
Pages per page Shown when Show the Pages tab is on.	Range	10	5–30, step 5
Settings every section has — Layout, spacing, motion and visibility — the same in every section. Not in this section: Section width. Defaults here: Top spacing 68 px (everywhere else: 64 px); Bottom spacing 144 px (everywhere else: 64 px); Top spacing on mobile 24 px (everywhere else: 40 px); Bottom spacing on mobile 96 px (everywhere else: 40 px); Stagger 90 ms (everywhere else: 0 ms).