Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Setting up the Search Results Page in the Flex theme
The Flex theme includes plenty of built-in settings for you to set up and have a great looking search results page on your storefront!
Check out our full guide on the search features and functionality within Flex
Within the Search Page settings, you can configure settings for a banner image, sidebar, and select options for your search results listing. Additionally, you can select width and spacing options and also add in your own custom CSS through the theme editor.
In order to navigate to your Search Results page within the theme editor, you'll need to head into Customize > Ensure that search has been enabled in your shop (Sections > Header > Show Search) > then type in a search query to bring you to your Search Results page!
Alternatively, you can also link up the Search Results page to a main menu item in your navigation.
You can determine what items return in your search results under Theme Settings > Search. You can choose either products or everything.
When your search results are set to products the results will display as thumbnail images (just like on a Collection page or Featured collection section):
When your search results are set to everything, the results will display 1 per row along with an excerpt from the product/page/blog post:
Search Results Page Settings
The Search Results Page includes settings for the banner, page and sidebar in the theme editor.
-
Search Results Page
Within the Search Results Page settings (Sections > Search), you can choose options for your search results listing and configure the layout and advanced CSS settings for the page content.
Results per row
The results per row setting is only used for when you have your search results set to products. You have two options for your search results: products and everything, which you can select under Theme Settings > Search.
If you do have your search results set to products, you can select your results per row to be between 2 - 5.
Results per row on mobile
Just like the results per row setting, results per row on mobile only applies when you have your search results set to products. You can choose 1 or 2.
Results per page
The 'results per page' setting allows you to choose how many items you'd like to appear on the Search Results page. Depending on how many items you have and what to choose here, pagination will kick in! Choose from 2 to 50.
Align to height/Product image height
You might have some images that are a little different in size! If you enable the 'align to height' setting, this will match the height of all the search results thumbnail images, which you can adjust with the 'product image height' slider. This will help if your images look unaligned. Note: this also only applies when search results are set to products.
Blog posts - Show Author/Show Date
If your search results are set to everything, this will also include blog posts! For the blog posts in your search results, you can decide whether you'd like the author and date to display by checking off the "show author" and "show date" settings.
Width
You can choose between 'wide' and 'standard' for the width of the search results area. Selecting 'wide' will spread this section out full-width. Choosing 'standard' will keep the section in a container and not spread the full-width.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
CSS Class/Custom CSS
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
More information about using the Advanced CSS feature.
-
Search Banner
The Search Results Page banner image (Sections > Search Banner) is completely optional! If you choose to enable the banner image, the settings include options for the layout and advanced CSS as well.
Show banner/Image
To enable the banner image, you'll need to check off the 'show banner' setting. The Search title will then display on top of the banner image. A 1800 x 800px image size is recommended.
Darken banner image
You can enable the 'darken banner image' setting to add a subtle overlay on top of you banner image. This comes in handy if you have a 'busy' banner image as it will improve legibility!
Width
The 'width' setting can be set to 'standard' or 'wide.' If you'd like your banner image to spread full-width, you can select 'wide.' If you'd like your banner image to be contained/not full-width, you can select 'standard.'
Banner height
You can select small, medium, or large for the banner image height.
Top/Bottom spacing
You can adjust the space above and below your banner image with the 'top spacing' and 'bottom spacing' settings.
CSS Class/Custom CSS
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the banner, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
-
Search Results Sidebar
A Sidebar can be added to the left side of the Search Results page under Sections > Search Sidebar, simply check off the 'Show sidebar' setting. The sidebar content can be built by clicking 'Add content' and making selections from the list.
The sidebar content options are:
- Featured Promotion
- Menu
- Newsletter
- Page
- Text
In addition to adding the content, you can also include custom CSS for the sidebar specifically under the advanced settings!
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Mobile Layout
When viewed on a mobile device, if you have a 'sidebar' enabled, it will display at the bottom of the search results page. If your search results are set to 'products' then you can choose either 1 or 2 for the results per row on mobile setting. If your results are set to 'everything' then they will display 1 per row.
