> 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/other-pages/search.md).

# Search

## Search page

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 drives conversions.

The Search page shares the same listing architecture as the Collection page — both use the same underlying grid and filtering system. Changes you make to one often apply to the other.

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**.

> **💡 Tip:** The search page is automatically available at `yourstore.com/search`. You don't need to assign it to a specific page.

***

### 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 — critical 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 area — displays products, pages, and articles matching the customer's search query.

> **📌 Note:** This section uses the same listing architecture as the **Collection Listing** section. Settings and behavior are nearly identical, and any layout or spacing changes made here will apply consistently across both pages.

***

**Section settings**

**General — Results per page**

Controls how many search results appear before pagination kicks in. Higher values show more at once; lower values keep the page fast and focused.

**Range:** *10* to *30*

**Default:** *10*

**Layout — Invisible mode**

When enabled, removes the section's background and padding so results sit cleanly on your page background.

**Default:** *Disabled*

**Layout — Container width**

Controls the maximum width of the results grid.

**Options:** *Inherit / Full width / Standard / Wide / Narrow*

**Default:** *Inherit*

***

**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*

**Default:** *Default*

**Custom gap** — When Gap is set to Custom, enter a value from 0 to 200px.

**Default:** *4px*

**Custom on mobile** — Enable different gap values for mobile.

**Default:** *Disabled*

**Mobile Gap** — Gap options for mobile.

**Default:** *Default*

**Mobile Custom gap** — Custom gap for mobile, from 0 to 200px.

**Default:** *4px*

***

**Style & Background**

**Inherit color scheme** — When enabled, uses your theme's default color scheme.

**Default:** *Enabled*

**Color Scheme** — When disabled, pick a color scheme.

**Default:** *Scheme 1*

**Custom background** — Enable to add a color background behind the results section.

**Default:** *Disabled*

**Background** — When Custom background is enabled: *None* or *Color*

**Color style** — When Background is Color: *Solid* or *Gradient*

**Color code** — The actual color values.

**Default:** *Solid — #ffffff*

***

**Spacing**

**Padding** — Enable custom padding values around the results section.

**Default:** *Disabled*

**Top / Bottom / Left / Right** — Padding from 0 to 200px.

**Default:** *0px*

**Custom on mobile** — Enable mobile-specific padding.

**Default:** *Disabled*

**Mobile Top / Bottom / Left / Right** — Padding from 0 to 100px.

**Default:** *0px*

***

**Available blocks**

The Search Results Listing section uses fixed private blocks:

| Block                            | What it does                                                 |
| -------------------------------- | ------------------------------------------------------------ |
| **\_blck\_search\_page\_input**  | The search input field and search button at the top          |
| **\_blck\_search\_result\_tabs** | Tabs to switch between Products, Pages, and Articles results |
| **\_blck\_filter\_sorting**      | Filter controls and sort dropdown                            |
| **\_blck\_search\_page\_grid**   | Displays matching products and results in a grid             |
| **\_blck\_page\_pagination**     | Pagination controls at the bottom                            |

***

### Tips & best practices

> **💡 Tip:** Keep the **Results per page** at 10 or fewer for the search page. Search results are often less curated than collection browsing — customers scanning for something specific benefit from seeing more results at once rather than paginating through many pages.

> **💡 Tip:** Enable **Result tabs** (Products / Pages / Articles) if your store has both a blog and a product catalog. This helps customers who search for something ambiguous find what they need by switching between tabs.

> **💡 Tip:** Add a **Search** block to your **404 page** so lost visitors can search for what they need rather than leaving the store. See the 404 page guide for details.

> **⚠️ Warning:** If your search results look cluttered with mixed result types, consider disabling the **Pages** and **Articles** tabs. For stores that only sell products, showing only product results creates a cleaner, more conversion-focused experience.

***

### Common questions

**Q: How do I change the search bar placeholder text?**

A: The placeholder text is controlled by Shopify's language settings. Go to **Store Admin** → **Settings** → **Store languages** → search for "search" to edit the placeholder text.

**Q: Can I show only products in search results?**

A: Yes — configure the **Search result tabs** block to show only the Products tab. Customers can still access pages and articles via your store's navigation menu.

**Q: How does Shopify search work?**

A: Shopify's search only searches your store's own content (products, pages, blog articles). It does not connect to Google. For a Google-powered search experience, consider a third-party search app from the Shopify App Store.

***

### Related pages

* Collection Template — shares the same listing and filtering architecture
* Global Theme Settings — configure default typography and layout settings
* Custom Section guide — add custom sections to your search page
* 404 page — add a search block to your 404 page for better error recovery