Search results page
Overview
The Main Search section powers the storefront search results page layout. It typically includes a search bar, optional heading/header content, and a product grid for results. You can control card media ratio, tags display style, grid columns/rows, spacing, filters + sorting, pagination type, container width, color schemes, text alignment, and responsive padding.
Section Configuration:
Card settings
| Setting | Description |
|---|---|
| Media ratio | Sets the aspect ratio used for product card media (Adapt / Square / Portrait / Landscape). |
| Variant row index | Optional index used for rendering variant options in a specific row format (theme-specific). |
| Tags show view | Controls how product tags appear on cards: Static (in layout) or Overlay (on image). |
Grid settings
| Setting | Description |
|---|---|
| Desktop columns | Number of product columns on desktop (2–4). |
| Desktop rows | Number of visible product rows on desktop (2–6). |
| Mobile columns | Number of columns on mobile (1–2). |
| Gap | Spacing between grid items. |
Layout & behavior
| Setting | Description |
|---|---|
| Enable filters | Enables filtering UI on the search results page. |
| Enable product counts | Shows product counts in filter UI (e.g., “Color (12)”). |
| Enable sort | Enables sorting dropdown for results. |
| Pagination type | Controls paging behavior: Pagination, Click load, or Load more. |
| Container layout | Section width behavior: page-width, contained-content, or container-fluid. |
| Container size (Desktop) | Max section width on desktop (50%–100%). |
| Color scheme | Applies section theme color scheme. |
| Filter color scheme | Applies a separate color scheme to the filter UI area. |
| Text alignment (Desktop) | Aligns section text on desktop. |
| Text alignment (Mobile) | Aligns section text on mobile. |
Inner padding
| Setting | Description |
|---|---|
| Top (Desktop) | Space above inner content (desktop). |
| Bottom (Desktop) | Space below inner content (desktop). |
| Left (Desktop) | Space left of inner content (desktop). |
| Right (Desktop) | Space right of inner content (desktop). |
| Top (Mobile) | Space above inner content (mobile). |
| Bottom (Mobile) | Space below inner content (mobile). |
| Left (Mobile) | Space left of inner content (mobile). |
| Right (Mobile) | Space right of inner content (mobile). |
Outer padding
| Setting | Description |
|---|---|
| Top (Desktop) | Space above section (outside content) on desktop. |
| Bottom (Desktop) | Space below section (outside content) on desktop. |
| Left (Desktop) | Space on section outside left edge (desktop). |
| Right (Desktop) | Space on section outside right edge (desktop). |
| Top (Mobile) | Space above section (outside content) on mobile. |
| Bottom (Mobile) | Space below section (outside content) on mobile. |
| Left (Mobile) | Space on section outside left edge (mobile). |
| Right (Mobile) | Space on section outside right edge (mobile). |
Blocks Configuration:
Heading
| Block | Description |
|---|---|
| Heading head | Optional section header group (commonly includes tagline, heading, description). |
Search bar
| Block | Description |
|---|---|
| Search bar | Renders the search input and submit controls for the search page. |