In the Integration module of Spotler Activate Search, you might see Site integration v1 and Site integration v2 below eachother. This means that you get to test and use the new v2 template functionalities and eventually switch to v2 completely. The v2 template offers more integration options and can be fully customizable, while having faster responsive times. New features will also be developed on v2.
Not sure which version of Site integration and templating you're using? Ask the admin of your account on how this is set up for you.
Are you just seeing Site integration, without the v1 and v2? This means that you are working with a v2 template only. The admin of an account is able to toggle this on or off.
User Experience
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 you want to customize your fonts data for the specific elements of your Search plugin:
-
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 and tablet. Here you enter at which width in pixels the breakpoint will be between the different overlays. Anything below the tablet breakpoint will be seen as mobile layoout. Also, enter the pixel width of the main Desktop overlay.
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. -
Prices in data feed
- Defines the currency for all prices in the data feed
-
Hide price
- By default, prices 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.
User experience for custom templates
extend: {
screens: {
tablet: `${settings.get("responsive_mobile_width") ?? 640}px`,
desktop: `${settings.get("responsive_tablet_width") ?? 1024}px`,
},
fontFamily: {
main: settings.get("font_family"),
},
fontSize: {
"size-facet-label": [settings.get("font_size"), "1.5"],
"size-facet-value": [settings.get("font_size"), "1.5"],
"size-facet-toggle": [settings.get("font_size"), "1.5"],
"size-result-title": [settings.get("font_size"), "1.5"],
"size-result-description": [settings.get("font_size"), "1.5"],
"size-result-price": [settings.get("font_size"), "1.5"],
"size-result-normal-price": [settings.get("font_size"), "1.5"],
"size-result-discount-price": [settings.get("font_size"), "1.5"],
},
colors: {
"color-facet-label": `#${settings.get("color_primary")}`,
"color-facet-value": `#${settings.get("color_text")}`,
"color-facet-toggle": `#${settings.get("color_secondary")}`,
"color-result-title": `#${settings.get("color_primary")}`,
"color-result-description": `#${settings.get("color_text")}`,
"color-result-price": `#${settings.get("color_text")}`,
"color-result-normal-price": `#${settings.get("color_normal_price")}`,
"color-result-discount-price": `#${settings.get("color_discount_price")}`,
},
scrollMargin: {
custom: settings.get("scroll_margin_top"),
},
},
You can use the general settings of the User Experience by adding the classes below that are available. By default we add sqr-.
Filter title font size
sqr-text-size-facet-title
Filter label font size
sqr-text-size-facet-toggle
Filter value font size
sqr-text-size-facet-value
Result title font size
sqr-text-size-result-title
Result description font size
sqr-text-size-result-description
Price font size
sqr-text-size-result-price
Old price font size
sqr-text-size-result-old-price
Discount price font size
sqr-text-size-result-discount-price
Filter title font family
sqr-font-font-facet-title
Filter label font family
sqr-font-font-facet-toggle
Filter value font family
sqr-font-font-facet-value
Result title font family
sqr-font-font-result-title
Result description font family
sqr-font-font-result-description
Price font family
sqr-font-font-result-price
Old price font family
sqr-font-font-result-old-price
Discount price font family
sqr-font-font-result-discount-price
Link color
sqr-*-color-link
Filter title color
sqr-*-color-facet-title
Filter value color
sqr-*-color-facet-value
Result title color
sqr-*-color-result-title
Result Description color
sqr-*-color-result-description
Price color
sqr-*-color-result-price
Old price color
sqr-*-color-result-old-price
Discount price color
sqr-*-color-result-discount-price