Search page
The Search page in Seventh shows search results for products, articles and pages, with filters and sorting. This page lists its settings.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Search page shows the full results of a store search at /search: the matching products, blog posts and pages. Customers reach it when they submit a search, for example by pressing Enter in the search drawer.
Where to find it: in the theme editor, open the template picker and select Search. The template has two sections, Search header and Search results.
The live results that appear while a customer types are a different feature: see Search drawer section and Predictive search theme settings.
Search header
- The Search title block shows the heading "Search results", the search form and a line such as "12 results found for "dress"".
- You can add any theme block, a Content group or an app block.
Search results
The Search results section shows up to three groups, each with its own heading and count:
- Products: the product results as product cards, with the filter and sort bar.
- Blog Posts: the article results as article cards.
- Pages: the page results as page cards.
Each group uses a card block inside the Search results section. Select Product card, Article card or Page card in the section to style that group. The product and article cards are documented in Product card and Article card.
The filter and sort bar appears only above the product results. The filters are the store's filters from the Shopify Search & Discovery app. The Search page always shows filters in a drawer: the Show filters as sidebar option exists only in the Collection grid. See Collection filters and sorting.
Page card
The Page card shows one page result and is used only on the Search page. It holds a Page title and a Page excerpt block by default.
Results come from Shopify
Shopify controls the search results, not Seventh: which products, articles and pages match a search term, and their order. Seventh shows the results Shopify returns. To change search behaviour, for example synonyms or product boosts, use the Shopify Search & Discovery app.
Why does the Search page not show collections?
Because Shopify does not let a theme show collections on the search results page. Seventh 4.0.0 shows only product, blog post and page results there. Use predictive search instead: the search drawer shows matching collections while the customer types. See Search drawer section and Predictive search theme settings.
Why are there no filters on my search results?
Because filtering is off, or the search found no products. Check that Enable filtering is on in the Search results section, and that filters exist in the Shopify Search & Discovery app. The filter bar only shows when the search returns products.
All Search page settings
Every setting on this page, one list per section or block, with its type and default.
Accepts these blocks: Content group, Search title, any theme block and app blocks.
Text alignment (alignment, default: Left): Sets the alignment of the blocks in the Search header: left, center or right.
Spacing (dropdown, default: Small): Sets the vertical space between the blocks in the Search header. Options: XXSmall, XSmall, Small, Regular, Large, XLarge.
Text container width (dropdown, default: Large): Sets the maximum width of the Search header content on screens 1024 px wide and larger: Small 50, Medium 70 and Large 100 percent of the section width. Options: Small, Medium, Large.
Search header section: Section design
Where to find it: Search → Search header → Section design
The Search header section uses the standard Section design settings, listed in General section styling. Not available in this section: Extend section width to the edges of the screen.
Color scheme (color scheme, default: Scheme 1).
Top padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Bottom padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Show media background (checkbox, default: off): Shows a background image or video behind the section content.
Background image (image). Shown only when Show media background is on.
Background image (mobile) (image): Replaces the background image on screens narrower than 768 px. Shown only when Show media background is on and Background image is set.
Background video (video): Plays a muted, looping video behind the section content. When both a video and an image are set, the video is shown. Shown only when Show media background is on.
Media overlay (dropdown, default: Color): Sets the layer over the background media: a flat color or a gradient. Options: Color, Gradient. Shown only when Show media background is on.
Overlay color (color with transparency). Shown only when Show media background is on and Media overlay is Color.
Overlay gradient (gradient, default: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)). Shown only when Show media background is on and Media overlay is Gradient.
Parallax effect (dropdown, default: Medium): Moves the background media at a different speed than the page while customers scroll. Subtle, Medium and Strong move it by up to 5, 10 and 20 percent. Options: None, Subtle, Medium, Strong. Shown only when Show media background is on.
Push content down (checkbox, default: off): Replaces Top padding with a larger top space, so more of the background media shows above the content. Shown only when Show media background is on.
Make section full height (checkbox, default: off): Makes the section at least as tall as the screen and centers the content vertically.
Where to find it: Search → Search header → Search title.
Search title block: Typography
Where to find it: Search → Search header → Search title → Typography
Font (dropdown, default: Headings): Sets the font of the heading Search results: the body, headings or accent font from Typography theme settings. Options: Body, Headings, Accent.
Text size (dropdown, default: Heading 3). Options: Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6. Shown only when Font is not Body.
Text size (dropdown, default: Medium). Options: XXSmall, XSmall, Small, Medium, Large, XLarge, XXLarge. Shown only when Font is Body.
Line height (dropdown, default: Default). Options: Default, Smallest, Smaller, Larger, Largest.
Apply accent font to (dropdown, default: None): Shows part of the heading in the accent font: the first word, the first letter or the last word. Options: None, First word, First letter, Last word. Shown only when Font is Headings.
Text weight (dropdown, default: Normal). Options: Normal, Bold.
Case (dropdown, default: Default). Options: Default, Uppercase.
Reduced text opacity (checkbox, default: off): Shows the heading at a lower opacity, for a softer look.
Custom text color (color, default: transparent): Sets a color for the heading that overrides the color scheme. Leave it transparent to use the color scheme text color.
Search title block: SEO
Where to find it: Search → Search header → Search title → SEO
HTML tag (dropdown, default: Heading 3): Sets the HTML tag of the heading. The text looks the same; search engines read the tag as the page structure. Options: Heading 1, Heading 2, Heading 3, Heading 4, Paragraph.
Where to find it: Search → Search results.
Results per page (slider 4 to 248, step 4, default: 48): Sets how many results show on each page of the search results. The other results are on the next pages, linked by page numbers.
Search results section: Layout
Where to find it: Search → Search results → Layout
Cards size (dropdown, default: Medium): Sets how many cards fit in one row on desktop: XSmall 5, Small 4, Medium 3, Large 2. Seventh shows fewer cards per row on smaller screens. Options: XSmall, Small, Medium, Large.
Cards size on mobile (dropdown, default: Small): Sets the card size on mobile: Small shows 2 cards per row, Large shows 1. On screens narrower than 375 px, cards always show one per row. Options: Small, Large.
Cards alignment (dropdown, default: Top): Sets how cards of different heights line up in a row. Stretch makes every card in a row as tall as the tallest one. Options: Top, Center, Bottom, Stretch.
Stretch alignment type (dropdown, default: Space between): Sets where the blocks sit inside each stretched card. Space between pins the first block to the top and the last block to the bottom. Options: Top, Center, Bottom, Space between, Space around. Shown only when Cards alignment is Stretch.
Grid gap (dropdown, default: Default): Sets the space between the cards. None places the cards edge to edge. Options: None, Default, XXSmall, XSmall, Small, Regular, Large, XLarge, XXLarge. Shown only when Scatter cards is off.
Search results section: Cards arrangement
Where to find it: Search → Search results → Cards arrangement
The Search results section uses the standard Cards arrangement settings, listed in General section styling. Not available in this section: Randomize card sizes and Randomize card sizes on mobile devices.
Scatter cards (checkbox, default: off): Turns on the scattered (editorial) layout: each card moves up or down by a different amount, so the cards no longer sit in straight rows.
Scatter cards on mobile devices (checkbox, default: off): Keeps the scattered layout on mobile, with half the desktop offset. When off, cards line up in regular rows on mobile. Shown only when Scatter cards is on.
Horizontal spacing (dropdown, default: Medium): A larger value will make the cards smaller. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on.
Vertical scattering (dropdown, default: XSmall): Sets how far each scattered card moves up or down. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on.
Gap between rows (dropdown, default: XSmall): Sets the vertical space between rows of scattered cards. Options: XSmall, Small, Medium, Large, XLarge. Shown only when Scatter cards is on.
Search results section: Filtering and sorting
Where to find it: Search → Search results → Filtering and sorting
Enable sorting (checkbox, default: on): Shows the sort dropdown above the product results. The sort options come from Shopify.
Enable filtering (checkbox, default: on): Shows a Filter button above the product results that opens the store's filters from the Shopify Search & Discovery app in a drawer.
Filter labels case (dropdown, default: Default): Sets the case of the filter labels: Default keeps the names as written in Search & Discovery, Uppercase shows them in capital letters. Options: Default, Uppercase.
Search results section: Section design
Where to find it: Search → Search results → Section design
The Search results section uses the standard Section design settings, listed in General section styling. In this section the group has only Color scheme, Top padding and Bottom padding.
Color scheme (color scheme, default: Scheme 1).
Top padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Bottom padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Where to find it: Search → Search results → Page card.
Accepts these blocks: Page title, Page excerpt, any theme block and app blocks.
Page (page picker): Not used in search results: each Page card shows the page that the search found.
Page card: Card style
Where to find it: Search → Search results → Page card → Card style
Text alignment (alignment, default: Left).
Inner blocks spacing (dropdown, default: Small): Sets the vertical space between the blocks inside the card. Options: XXSmall, XSmall, Small, Regular, Large, XLarge.
Padding (dropdown, default: Regular): Sets the space between the card edge and its content. Options: XSmall, Small, Regular, Large, XLarge, XXLarge. Shown only when Remove card background is off.
Add padding to media elements (checkbox, default: on): Adds the card padding around Image and Video blocks inside the card. Shown only when Remove card background is off.
Remove card background (checkbox, default: off): Removes the card background color and the padding around the card content.
Corner radius (dropdown, default: None): Sets the corner rounding of the card itself, not of the blocks inside it. Options: None, Slighty rounded, Rounded, Fully rounded. Shown only when Remove card background is off.
Color scheme (color scheme, default: Scheme 2): Sets the background, text and button colors of the card.
Where to find it: Search → Search results → Page card → Page title.
Displays title from parent page.
Page title block: Typography
Where to find it: Search → Search results → Page card → Page title → Typography
Font (dropdown, default: Headings): Sets the font of the page title: the body, headings or accent font from Typography theme settings. Options: Body, Headings, Accent.
Text size (dropdown, default: Heading 3). Options: Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6. Shown only when Font is not Body.
Text size (dropdown, default: Medium). Options: XXSmall, XSmall, Small, Medium, Large, XLarge, XXLarge. Shown only when Font is Body.
Line height (dropdown, default: Default). Options: Default, Smallest, Smaller, Larger, Largest.
Apply accent font to (dropdown, default: None): Shows part of the title in the accent font: the first word, the first letter or the last word. Options: None, First word, First letter, Last word. Shown only when Font is Headings.
Text weight (dropdown, default: Normal). Options: Normal, Bold.
Case (dropdown, default: Default). Options: Default, Uppercase.
Reduced text opacity (checkbox, default: off): Shows the title at a lower opacity, for a softer look.
Custom text color (color, default: transparent): Sets a color for the title that overrides the color scheme. Leave it transparent to use the color scheme text color.
Page title block: SEO
Where to find it: Search → Search results → Page card → Page title → SEO
HTML tag (dropdown, default: Heading 3): Sets the HTML tag of the title. The text looks the same; search engines read the tag as the page structure. Options: Heading 1, Heading 2, Heading 3, Heading 4, Paragraph.
Where to find it: Search → Search results → Page card → Page excerpt.
Displays excerpt from parent page.
Number of words (slider 15 to 100, default: 30): Sets how many words of the page content the excerpt shows, from 15 to 100. Pages have no manual excerpt, so the excerpt is always the start of the page content as plain text.
Page excerpt block: Typography
Where to find it: Search → Search results → Page card → Page excerpt → Typography
Text size (dropdown, default: Medium). Options: XXSmall, XSmall, Small, Medium, Large, XLarge, XXLarge.
Line height (dropdown, default: Default). Options: Default, Smallest, Smaller, Larger, Largest.
Text weight (dropdown, default: Normal). Options: Normal, Bold.
Case (dropdown, default: Default). Options: Default, Uppercase.
Reduced text opacity (checkbox, default: off): Shows the excerpt at a lower opacity, for a softer look.
Custom text color (color, default: transparent): Sets a color for the excerpt that overrides the color scheme. Leave it transparent to use the color scheme text color.
Related pages
- Search drawer section: the search that opens from the header.
- Predictive search theme settings: what the live search matches.
- Collection filters and sorting: how filters and sorting work.
- Product card: the card used for product results.
- Article card: the card used for blog post results.
- General section styling: Section design and Cards arrangement settings.