The standard layout and interaction of Spotler Activate Search can be adjusted to the look and feel of your own website. You can specify the width of the main Search container, and you can modify the primary colors of the Search plugin.
Look & feel
First thing you want to customize are your fonts:
-
Font family
This is the font that’s used in the interface. Please add a @font-face CSS definition on your own site for if you want to use custom fonts. -
Font size
You can use px, pt, or em. For example: 12px
Then, go ahead and customize your colors. You can assign different colors to headers, text, and links. You can also specify colors for your displayed prices, normal ones, and discount prices. It is possible to directly paste the HEX code, or click on the color block to select anything from the color panel.
Layout
Next, customize the breakpoints of the Search overlay on desktop, tablet, and mobile. Here you enter at which width in pixels the breakpoint will be between the different overlays.
Note: The responsive design features only work if your own website is responsive or at least has some basic responsive settings enabled.
Now you can change the following layout settings:
-
Results per page
Specify how many results you want to show per page. How many results would you like to show at first, and each following batch when lazy loading? -
Keypress delay
Provide the delay in milliseconds between the last keypress and the execution of the search result. Too low will affect the number of queries, too high can make your visitors wait too long for results. The default is set to 200. -
Default view
Pick the default view of your results list.
- Detail: list of details and images
- Grid: grid view with images, title and price
- List: list without images
-
Scroll margin top
Adds a scroll margin top to the container to compensate for headers with a fixed position -
Default no image url
Provide us with the URL of an image that will be shown when there is no image for a product. -
Format of result counts
Bracket type around filter result counts.
- Only show number: 23
- Parenthesis around count: (23)
- Curly brackets around count: {23}
- Square brackets around count: [23]
-
Default language
- Set the wished default interface language
-
Prices in data feed
- Defines the currency for all prices in the data feed
-
Hide price
- By default, prices are shown.
-
Hide brand
- By default, brands are shown.
Navigation
Lastly, you have slider options for the navigation of your search query:
| Floating filters | Keeps the filters in view when scrolling down |
| Load results on scroll | Loads extra results when reaching the bottom of the results list |
| Highlight query on click | Highlight the search query when a user focusses the search field |
| Enable back button history | Allows to return to the search results after clicking a result |
| Store current search in hash | Allows to bookmark or share a search query |
| Disable auto scrolling to top | Disable auto scrolling to top when a new query is entered |
Don't forget to click Save after changing any settings.