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;
Building Relationships with Web Developers and Marketing Agencies that want better results

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