How to Add Sections Shopify Search Page with 3 Methods

Managing a Shopify store means constantly improving the shopping experience, yet the search page is often overlooked. Adding sections like promotional banners, featured collections, FAQs, or recently viewed products can turn a basic search page into a more engaging sales tool. This guide shows you how to add sections to your Shopify search page using the Theme Editor, custom code, and theme app extensions.

Why add sections to your shopify search page?

Optimizing your search page layout yields immediate benefits for user experience (UX) and conversion rates:

• Reduce Drop-off Rates: When a customer searches for something with zero results or ambiguous queries, custom sections (like Featured Collections or Best Sellers) guide them back into your sales funnel.
• Boost Cross-Selling: Displaying a Recently Viewed or Recommended Products section directly on search result pages keeps buyers engaged.
• Highlight Promotions: Strategic placement of promotional banners or discount blocks leverages high-intent search traffic.
• Improve Content Hierarchy: Organizing filters, grids, and banners cleanly helps desktop and mobile users digest search results quickly.

Method 1: Adding Sections via Shopify Theme Customizer (No Code)

For Online Store 2.0 themes, the Theme Customizer is the easiest way to add and organize sections on your Shopify search page without editing code.

Step 1: Open the Search Template

In your Shopify Admin, go to Online Store > Themes and click Customize next to your active theme. Open the top-center dropdown menu, which shows Home page by default, then search for and select Search.

Shopify Admin → Themes → Customize → Top Dropdown → Search

Step 2: Add and Arrange Sections

The template already includes the main Search results section. To customize the page, click Add section in the left sidebar and choose an available section, such as Featured Collection, Image Banner, Rich Text, Video, or Recently Viewed. Use the six-dot handle to drag and reorder sections above or below the search results.

Step 3: Configure Search Results and Filters

Click Search results to customize how results appear. Depending on your theme, you can adjust the number of products per page, desktop and mobile columns, filtering and sorting options, and color swatches. If blog articles appear in search results, you may also have options to display the author, date, category, and comment count.

Step 4: Add Promotional Blocks to the Search Grid

Some advanced OS 2.0 themes let you add Promotion Image and Promotion Video blocks directly to the search results grid. You can control their position, add headings and CTAs, and link to collections or promotions. Video blocks can use Shopify-hosted, YouTube, or Vimeo videos with customizable covers, alignment, and CTA overlays. 

Method 2: Customising search results via Shopify search and discovery app

While theme sections handle presentation, filtering logic and content visibility are managed via Shopify's native app.

1. Install the free Shopify Search & Discovery app from the Shopify App Store.
2. Go to Apps > Search and discovery > Search configuration.
3. Hide Unwanted content types: If you do not want pages or blog posts cluttering your product search results, simply uncheck Pages or Blog posts.
4. Custom filters & synonyms: Create custom filter groups (like Material, Size, Vendor, Availability) and search synonyms (e.g., mapping "jacket" to "coat").

Method 3: Adding sections via code (search.json / Liquid)

If your theme does not natively offer section addition on the search page, or if you need custom section zones, you can modify your theme code. Caution: Always duplicate your theme (Actions > Duplicate) before editing theme code.

Option A: Unlocking JSON Template Sections

If your theme relies on templates/search.json, open the code editor (Online Store > Themes > Actions > Edit Code). Ensure your JSON file defines sections and orders like this structural example:

{
  "sections": {
    "main-search": {
      "type": "main-search",
      "settings": {}
    },
    "promo_banner": {
      "type": "image-banner",
      "settings": {}
    },
    "recently_viewed": {
      "type": "recently-viewed",
      "settings": {}
    }
  },
  "order": [
    "promo_banner",
    "main-search",
    "recently_viewed"
  ]
}

Option B: Inserting Custom Liquid Code

For legacy themes using templates/search.liquid:

1. Go to Edit Code > Sections > Click Add a new section (e.g., search-promo-banner.liquid).
2. Build your custom HTML/Liquid markup and CSS settings.
3. Open templates/search.liquid or snippets/search-bar.liquid.
4. Render your newly created section where desired using:

{% section 'search-promo-banner' %}

Key best practices for high-converting search pages

• Optimise the "no results found" state: Ensure your search template displays a helpful fallback section, such as Popular Categories or an FAQ Accordion, so users never hit a dead end.
• Keep mobile usability first: Over 60% of ecommerce search traffic happens on mobile devices. Stick to 2-column product grids and collapsible filter drawers.
• Balance load speeds: Avoid placing more than 2 high-resolution video blocks or heavy sliders on the search template to preserve site performance.