Musk Documentation

Search Results

image

The Search Results section is used to render the result of a search query.

Key Settings and Styling

Tab Image

image

The Tab Image settings enable you to set an image to be rendered to the Product, Articles, and Pages tabs while active.

Tab Normal

image

The Tab Normal settings enable you to set a background color, border radius, and border color to the tabs within the Search Results section, that are in a normal state, or else not active.

Tab Active

image

Within the Tab Active settings, here you can set the overlay color and border color to the active tab within the Search Results section.

Tab Title

image

The Tab Title Settings enable you to adjust the styling of the titles rendered within the tabs of the Search Results section. Various changes can be applied to the titles such as adjusting the font size, font weight, line height, and the color under normal and active states.

Product Setting

Badge

image

If a search result returns a product item with a badge, the Badge settings enable you to apply styling to the badge in terms of altering its background color, border radius, as well as the color of the text within the badge.

Product Image

image

The Product Image settings enable you to set a border radius to the product images of the products rendered in the search results.

Product Title

image

Within the Product Title settings, here you can carry out adjustments to the titles of the products returned in the search result. These adjustments include altering the font size, line height, and color of the titles.

Product Price

image

The Product Price region enables you to adjust the rendering of the prices to the products returned in the search results. You can alter the font size, line height, normal price color, and offer color to the prices.

Bar Settings

image

The Bar settings enable you to adjust the background color and border color to the bar rendered above the search results.

More Filter and Product Count

image

Within the More Filter and Product Count settings, here you can set your desired fillter text, as well adjust the rendering of the product count in terms of font size, line height, and color, as well as the color of the filter icons to the right.

Filter Setting

image

The Filter settings enable you to set a background color, border radius, and border color to the filter region within the search results section.

Filter Text

image

Within the Filter Text settings, here you can set your desired Filter Text as well as carry out adjustments to it such as altering its font size, line height, and color.

Title Text

image

The Title Text settings enable you to adjust the font size, line height, and color of the titles rendered within the filters panel.

Title Item (Checkbox)

image

The Title Item (Checkbox) settings enable you to make adjustments to the titles with checkbox options within the filter panel. You cna adjust the font size, line height, and color to these titles.

Item Show More

image

Within the Item Show More settings, here you can make adjustments to the font size, line height, and color of the ‘Show More’ link within the Filter panel.

Color Item

image

If the products returned in the search have set color values, it is possible to filter such products using color.

The Color Item settings enable you to set a border color to the color filters in both normal and active state.

Price Navigation

image

The Price Navigation settings enable you to set a normal color and also an active color representing the active price range within the pricing range slider.

Price Button

image

Within the Price Button settings, here you can set the border radius and border color to the pricing input buttons within the filter panel, as well as set a line color to the line separator between the two buttons.

Articles

Image

image

The Image setting within articles enable you set a border radius to the images of the articles in the Search Reasults.

Title

image

Within the Title settings, here you can carry out adjustments to the font size, line height, and color of the article titles in the search results

Author/Date

image

The Author/Date settings enable you make adjustments to the article author name and publishing date rendered within the articles in the search results. You can make alterations to the font size, line height, and color of the items.

Pages

Box

image

If pages are returned in the search results, the box settings enable you to set a background color and border radius to the box holding each of the pages.

Title

image

The Title settings enable you to alter the rendering of the page titles in the Search results. You can alter the font size, line height, and color of the titles.

Title Sub Text

image

Within the Title Sub Text settings, here you can carry out adjustments to the font size, line height, and color of the subtext rendered beneath the page title.

404

Image

image

If there are no results returned from a search query, a 404 image is rendered. Within the Image settings, you can hence set your desired 404 image.

Title

image

The Title settings enable you to modify the “No Result Found” text, as well as carry out styling changes to it in terms of the font size, line height, and color.

Sub Title

image

Within the Subtitle settings, here you can modify the subtitle text rendered on the search results section and also carry out various styling customizations to it in terms of the font size, line height, and color of the text.

Navigation

image

The Navigation settings enable you to make adjustments to the normal and active color of the pagination numbers rendered beneath the search results.

Spacing (Desktop & Mobile)

image

The Spacing settings enable you to add some padding to the Search Results section within both Desktop and mobile devices.