Search Page

The search page is an essential part of any website as it allows visitors to find the posts and products they are looking for. A good search page improves the user experience.

Astra provides built-in customization for the search page, so you can modify its design and give it a neat, modern look for your visitors.

This guide provides step-by-step instructions for customizing the search page with Astra and controlling key elements such as the title area, search results layout, live search, number of posts, etc.

Customize Search Page with Astra

The search page is an archive page that allows visitors to find posts and products on your site. Astra gives you dedicated customization options to style it independently from the rest of your Blog/Archive pages.

The search page inherits the Blog/Archive design by default. Check this doc to view the options available for Blog/Archive design.

To access the Search Page customization settings, navigate to Customize → Post Types → Search Page.

The Search Page settings are split into two areas:

• Search Page — controls the results layout, container, sidebar, and live search behaviour
• Search Page Title — controls the banner/title area that appears above search results

Search Page

The Search Page section lets you control how search results are displayed — the layout, sidebar, number of results per page, and live search behaviour. Navigate to Customize → Post Types → Search Page.

Container and Sidebar Layout

The container and sidebar layout allows you to override the default container layout from Customize → Global → Container and the default sidebar from Customize → General → Sidebar. You can enable/disable the sidebar on the search results page and change the container layout and styles.

• Container Layout: Override the global container layout specifically for the search results page. Options: Default (inherits global), Full Width, Padded, Narrow.
  
• Sidebar Position: Set the sidebar position for the search results page. Options: Default (inherits global), Left Sidebar, Right Sidebar, No Sidebar.
  

Results Layout

When no layout is selected, the search page inherits the results layout from the Blog/Archive. You can override it in the search page results layout to show a different layout for the search results. For example, you can show the grid layout for other Blog/Archive pages and list or cover only for the search results.

• Results Layout: Choose the display style for search results. Options: Default (inherits Blog/Archive layout), Grid, List, Cover.
  
  

Posts per page

With the results layout, you can also change the number of posts per page appearing on the search results page. To do so, use the option below the results layout under Customize → Post Types → Search Page.

• Posts Per Page: Set the number of search results to display per page. Use the +/– stepper to adjust the value (default: 10).
  

Live Search

This feature enables live search on the search results page search box when no results are found. You can start typing in the search box, and the related search results will appear. For live search, the feature lets you display it within post types such as products, posts, or pages.

• Enable Live Search: Toggle on or off to activate live search functionality on the search results page.
  
• Search Post Types: When live search is enabled, choose which post types appear in the live search results. Options: Posts, Pages, Products. Multiple post types can be selected simultaneously.
  

Search Page Title

The Search Page Title section controls the banner/title area that appears above your search results — including the layout, heading text, breadcrumbs, alignment, and visual styling. Navigate to Customize → Post Types → Search Page → Search Page Title.

General Tab

• Banner Layout: Choose a banner layout for the appearance of the search results page title area. Options: None, Default.
• Heading: Enable or disable the main search page heading. When enabled, you can also edit the heading text (default: “Search Results For:”).
  
  

• Breadcrumb: Show or hide the breadcrumbs on the search results page.
• Sub Heading: Customize the subheading text that appears when results are found or when no results are found.
  
  

• Horizontal Alignment: Set the alignment for the title area content — Left, Center, or Right.
• Container Width: Controls the width of the content within the title banner. Options: Full Width (stretches across the entire viewport), or a custom pixel/percentage value to constrain the inner content area independently of the container layout.
• Vertical Alignment: Sets the vertical position of the content within the title banner area. Options: Top, Middle, Bottom. Useful when the banner has a fixed height set and you want to control where the heading and subheading sit within it.

Design Tab

The Design tab lets you modify the colors, typography, and spacing for the elements in the title area.

• Container Background: Set the background color or image for the title banner area.
• Inner Content Gap: Adjust the spacing between elements inside the title area.
• Title Color: Set the color for the main search page heading.
• Text Color: Set the color for general text in the title area.
• Link Color / Hover Color: Set the color for links and their hover state within the title area.
• Typography: Control the font family, size, weight, and style for the title and body text.
• Spacing: Adjust margin and padding for the title area container.
  

Restrict search results

With Astra, you can also restrict search results to blog posts or products. This is helpful when you want to use the search functionality for either post type. Please check the docs below for detailed instructions on restricting search results.

• Restrict Search Results to Posts Only
• Restrict Search Results to WooCommerce Products Only

We hope the above information has been helpful. If you have any feedback or need support, please feel free to reach out to us.

Related docs:

• Search Shortcode to Add Search Box in Astra
• Blog / Archive