> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/page-templates/search.md). # Search Customize your search results page — from the page heading and search input to grid layout, filtering, and result counts.
The Search page is where customers find what they're looking for quickly. A well-configured search experience reduces frustration, keeps customers on your store, and helps drive conversions. The Search page shares the same listing structure as the Collection page — both use the same underlying grid and filtering system. The Search page is built from two sections: * **Page Header** — displays the search heading, an optional background, and breadcrumbs * **Search Results Listing** — displays the filtered, paginated grid of search results *** ### What you can customize * **Header** — show or hide breadcrumbs and the result count * **Search input** — customize the search bar appearance and result tabs * **Results per page** — control how many results appear before pagination * **Grid layout** — adjust spacing between result items for desktop and mobile * **Filtering** — enable faceted filtering by product type, price, vendor, and more * **Background and spacing** — customize the visual appearance of each section *** ### How to access this template 1. In the **Theme Editor (Customize)**, click the **template selector** (dropdown at the top). 2. Select **Search** from the template list. 3. The page editor will show both sections: **Page Header** and **Search Results**. {% hint style="info" icon="note-sticky" %} **Note:** The search page is automatically available at `yourstore.com/search`. You don't need to assign it to a specific page — it's always active. {% endhint %} *** ### Page overview | Area | What customers see | Why it matters | | ----------------------- | ---------------------------------------------------------- | -------------------------------------------------------------------------------- | | **Page Header** | Search title, breadcrumbs, and optional background image | Sets the tone and gives customers orientation. | | **Search input & tabs** | A search bar + tabs for Products / Pages / Articles | Lets customers refine what type of result they're looking for. | | **Results grid** | Product cards or article results in a grid layout | The core output — results must be clear, scannable, and relevant. | | **Filters & Sorting** | A sidebar or top bar of filter options and a sort dropdown | Helps customers narrow down results by attribute — important for large catalogs. | *** ### Sections #### Page Header (Search) The top area of the Search page — displays the page heading and optionally an image or video background. Its settings are identical to the Collection Page Header — see the Collection page guide for full details. Key settings: * **Container width** — *Inherit / Full width / Standard / Wide / Narrow* * **Show breadcrumbs** — displays navigation trail (e.g., *Home > Search*) * **Show count** — displays number of results found automatically * **Custom background** — supports color, gradient, image, or video backgrounds * **Media overlay** — add a semi-transparent layer over background images for text readability * **Enable parallax effect** — subtle depth effect on background media * **Padding** — custom top/bottom/left/right padding with mobile overrides *** #### Search Results Listing The main results grid — displays products, pages, and articles matching the customer's search query. {% hint style="info" icon="note-sticky" %} **Note:** This section uses the same listing structure as the **Collection Listing** section. Settings and behavior are nearly identical — layout and spacing changes made here will apply consistently across both pages. {% endhint %} *** **Section settings** **General — Results per page** Controls how many search results appear before pagination begins. A lower number keeps pages fast and easy to scan; a higher number surfaces more results before the customer needs to click through. **Range:** *10* to *30* **Layout — Invisible mode** When enabled, removes the section's background and padding so results sit cleanly on your page background. **Layout — Container width** Controls the maximum width of the results grid. **Options:** *Inherit / Full width / Standard / Wide / Narrow* *** **Inner content layout — Gap** Controls the spacing between result items in the grid. Tight spacing creates a denser look; wider spacing lets each result breathe. **Options:** *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom* **Custom gap** — When Gap is set to Custom, enter a value from 0 to 200px. **Custom on mobile** — Enable different gap values for mobile. **Mobile Gap** — Gap options for mobile. **Mobile Custom gap** — Custom gap for mobile, from 0 to 200px. *** **Style & Background** **Inherit color scheme** — When enabled, uses your theme's default color scheme. **Color Scheme** — When disabled, pick a color scheme. **Custom background** — Enable to add a color background behind the results section. **Background** — When Custom background is enabled: *None* or *Color* **Color style** — When Background is Color: *Solid* or *Gradient* **Color code** — The actual color values. *** **Spacing** **Padding** — Enable custom padding values around the results section. **Top / Bottom / Left / Right** — Padding from 0 to 200px. **Custom on mobile** — Enable mobile-specific padding. **Mobile Top / Bottom / Left / Right** — Padding from 0 to 100px. *** **Available blocks** The Search Results Listing section uses fixed blocks: | Block | What it does | | ----------------------- | -------------------------------------------------------------------------- | | **Search input** | The search bar and submit button at the top of results | | **Result tabs** | Tabs to switch between Products, Pages, and Articles results | | **Filter & sorting** | Filter controls (by product type, price, vendor, etc.) and a sort dropdown | | **Search results grid** | Displays matching products and content in a product card grid | | **Pagination** | Navigation controls at the bottom so customers can page through results |