Styling & Customization

Style Your Own Website Elements

FlowSearch is intentionally attribute-driven. You can add the HTML snippets with a HTML/custom code element, or build the search bar and results page with your site's normal elements and add the samedata-fs-* attributes to your styled elements.

Search Bar HTML

This snippet can be added inside any page with an HTML/custom-code block, or recreated with native site form elements.

<form data-fs-search class="site-search">
  <input data-fs-input class="site-search-input" type="search" />
  <button data-fs-submit class="site-search-button" type="submit">
    Search
  </button>
</form>

Results Page HTML

Add this to the Search Results page body. The Results Page Script belongs in that page's page-specific head/custom-code area, while this HTML belongs in the page content.

<div data-fs-results class="results-grid">
  <a data-fs-result data-fs-url href="#" class="result-card">
    <h3 data-fs-title class="result-title"></h3>
    <p data-fs-snippet class="result-summary"></p>
  </a>
</div>

Generated Live Search Classes

Your own existing classes are preserved. When data-live="true" is enabled on the Search Bar Script (all pages), FlowSearch also creates a live dropdown with these classes.

Class	Applied To	Description
`.fs-live-container`	Search form	Positions the generated dropdown
`.fs-live-dropdown`	Live results dropdown	Container for live results
`.fs-live-result`	Live result link	Each generated dropdown result
`.fs-live-result-title`	Live result title	The title text inside each result
`.fs-live-result-snippet`	Live result snippet	The description text inside each result
`.fs-live-empty`	Empty live state	Shown when no live results match

Basic Styling Example

Add this CSS to site custom code if you want to override the generated live dropdown styling:

/* Live search dropdown */
.fs-live-dropdown {
  border-radius: 14px;
  border: 1px solid #d1fae5;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
}

.fs-live-result {
  padding: 14px 18px;
}

.fs-live-result:hover,
.fs-live-result.fs-selected {
  background: #ecfdf5;
}

.fs-live-result-title {
  font-weight: 700;
}

.fs-live-result-snippet {
  color: #64748b;
}

Styling on your website

For the most control, build the search bar and results cards with your site's normal elements. Add your own classes, then add the FlowSearch custom attributes in the Settings panel.

Add your existing classes, for example site-search-input or result-card
Add the required data-fs-* attributes from the Integration tab
Publish the site so the published site loads the Head Code scripts

Pro Tip

Style one result card with your site's normal elements, then add data-fs-result,data-fs-url, data-fs-title, and data-fs-snippet. The results script clones that card for each result.

Responsive Design

Use normal existing responsive breakpoints for your own HTML and optional CSS for generated live dropdowns:

@media (max-width: 767px) {
  .fs-live-dropdown {
    left: 0;
    right: 0;
    max-height: 70vh;
    z-index: 9999;
  }

  .fs-live-result {
    padding: 16px;
  }
}

Results Page States

You control the full results page states with HTML attributes, so each state can be styled directly in your website.

<div data-fs-loading class="search-loading">Loading results...</div>
<div data-fs-empty class="search-empty">No results found.</div>
<div data-fs-error class="search-error">Search is unavailable.</div>
<div data-fs-pagination class="search-pagination"></div>

Dark Mode Support

Add dark mode styles that match your site:

.dark .fs-live-dropdown {
  background: #111827;
  border-color: #374151;
  color: #f9fafb;
}

.dark .fs-live-result:hover,
.dark .fs-live-result.fs-selected {
  background: #1f2937;
}

.dark [data-fs-results] .result-card {
  background: #111827;
  color: #f9fafb;
}