Display options

The Search UI Designer provides a number of different display options, helping you to create a unique Search UI that matches your brand.

Search Mode

You have the choice of two popular search modes. "Result page" and "Overlay". Both modes generally feature a prominent search bar (or button) in the header of the site, used for the initial search. However, the 'mode' decides how the search behaves once a search is triggered.

Result Page

'Result page' is the most common search mode today. The search will re-direct the user to a dedicated search page which will display the results.

The result page mode gives more control over the appearance of the search results and filters. You can choose to fill the full page width, or have a fixed width for your search results. It also allows for showing other information on the search result page if required.

To use this mode, you will have to create a dedicated search page (eg. /search) and ensure you point the Result page URL setting to the page.

Overlay

In overlay mode, the global search bar or icon will trigger a search overlay on top of the current page (hence the name).

The advantage of the overlay mode is that it doesn't require an additional page load and the user can search in the context of the current page. Another advantage is that it doesn't require a dedicated page and therefore is slightly easier to embed. You only have to edit one page instead of two.

However, since the content of the overlay is entirely powered by the search widget, it is less customisable than the result page.

List vs Grid View

Choose between list or grid as the default view to display results.

The list view was made popular by Google and other search engines before it and is commonly used for content websites. It allows for longer titles and descriptions as well as displaying a longer URL if required.

The grid view is more commonly used in the context of e-commerce. It's more compact and features product images more prominently than the content.

Colors

To create a seamless experience for your users, you should match the color of the search components to the colours of your site and brand. The Search UI Designers enables you to adjust 3 UI colors.

• Primary background: Defines the background color of selected buttons, sliders and 'Show more' links.

• Primary foreground: Defines the color of fonts and icons in selected buttons. If you have a dark 'Primary background' color, you should choose a lighter foreground colour for readability.

• Active background: Defines the background color on hover for selected buttons and 'Show more' links.

Images

Images can come in all kinds of sizes and formats. Therefore it's important to let Search.io know what format works best for your images. Image formats can be specified for both list and grid view as a different format might be preferable in one or the other.

There are two image properties that can be adjusted.

Aspect Ratio

The aspect ratio of an image is the ratio of its width to its height. It is expressed as two numbers separated by a colon. For an x:y aspect ratio, the image is x units wide and y units high. A ratio of '16:9' would give you the same ratio as HDTV and a ratio of 1:1 would give you an exactly square image.

Cropping

Cropping is the removal of unwanted areas of an image. This setting allows you to decide what happens to the parts of the image that don't fit into the above aspect ratio. The options are:

• Cover: Scales the image to fit the width or height (whichever is smaller), and crops the parts of the image that expand beyond the aspect ratio. Cover generally looks the best as it fills the entire aspect, but also can lead important parts of the image being cut off.

• Contain: Scales the image to be fully contained in the available aspect, potentially leading to white bars on the side or the top.

• None: Does not scale the image at all. Unless the images are designed specifically for this aspect and size, it will be cut off.

Field Mapping

For website collections and Shopify, Search.io automatically detects the fields and populates the UI with the right data. For API integrations Search.io will do it's best to infer the fields from their name, but might require a bit of help to ensure the right fields are displayed.

It is recommended to map all applicable fields. However, only "Title" and "Subtitle" are required to get started.