Search Page

The search page is an essential part of any website as it allows visitors 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, so it inherits the Blog/Archive design by default. Check this doc to view the options available for Blog/Archive design.

You can follow the steps shared below to design the search page differently from the Blog/Archive page. To view the available customizations, navigate to the Customize > Post Types > Search Page.

Search Page Title

The search page title option allows you to modify the following elements with colors, typography, and spacing controls.

• Banner Layout: Choose a default banner layout for the appearance of the search results page title and subtitle.
• Heading: You can enable/disable the main search page heading and change the text “Search results for:”.

• Breadcrumb: Show or hide the breadcrumbs on the search results page.
• Subheading: Change the text that appears when results are found or not.

• Horizontal Alignment: Align the title area left, center, or right.
• Design options: The design tab under the search page title allows you to modify the colors, typography, and spacing for the elements added in the title area. Here are options that you can find in the design tab:
  • Container background for the title area banner
  • Inner elements spacing
  • Title color
  • Text color
  • Link/hover color
  • Title and text typography
  • Spacing – Margin and padding

Container and Sidebar Layout

The container and sidebar layout allows you to override the default container layout from the 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.

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 layouts and list or cover only for the search results.

Posts per page

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

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.

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