1. Create a page for displaying search results

Create a page and add this shortcode

CleanShot 2023-05-20 at 10 30 07@2x

2. Enable Fast Simon integration & Sync products

CleanShot 2023-05-20 at 10 31 05@2x

After you enter all information, you can hit the Sync All Products button for the initial syncing. After that, every time you create/update/delete a product, CMS Max will automatically sync that product to Fast Simon, you don't need to do it manually.

After the sync is finished, you will get an email from Fast Simon.

You can also check the sync progress in your Fast Simon dashboard at: https://dashboard.instantsearchplus.com/settings

Note: You must enable the REST API from Fast Simon dashboard to see the API Key.

3. Test if the search result page works

Add the ?q={search prompt} to the page URL we created in step 1. For example: https://master.cmsmax.com/search-results?q=tie.

Then visit the page to see the result.

CleanShot 2023-05-20 at 10 49 59@2x

4. Optional: Add an instant search bar in the header (For the frontend team).

CleanShot 2023-05-20 at 10 35 32@2x

Here is an example of /custom/view/partials/header-search-form.blade.php

<div class="header__search-form">

You can also customize that instant-search component by overriding the slot:

<div class="header__search-form">
      // Custom code goes here
      <x-fast-simon.search-bar label="Search" placeholder="What are you looking for?" name="search"/>

Make the search bar visible when it's still focused so the user can click the suggestion section.

In resources/assets/saas/custom/_header_search_form.scss

&:hover > .form-group > input,
&:active > .form-group > input,
&:focus-within > .form-group > input {
  @include media-breakpoint-up(xl) {
    width: 230px;
    visibility: visible;

Add the following code to Template >> JavaScript to make the categories and subcategories on a filtered search result, refresh and link to the correct CMS page.

document.addEventListener('DOMContentLoaded', function() {
const $main = document.querySelector('#fast-simon-serp-app');

setTimeout(() => {
const shadowRoot = $main.shadowRoot;

// Add a click event listener to the parent .category-items element
shadowRoot.addEventListener('click', function(event) {
const target = event.target;

// Check if the clicked element is an <a> element inside .category-items
if (target.matches('.category-items a')) {
console.log('%cPage refreshed!', 'color: pink; font-weight: bold;');
}, 1000); // Seconds to wait before the script is fired. In milliseconds


Building Relationships with Web Developers and Marketing Agencies that want better results

The world's fastest and most SEO friendly website code.