Styling & Customization

Style Your Own Webflow Elements

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

Search Bar HTML

This snippet can be added inside any page with a Webflow Embed/custom code element, or recreated with native Webflow 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 Settings → Custom Code → Head Code, 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 Webflow 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 Webflow 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 in Webflow

For the most control, build the search bar and results cards natively in Webflow. Add your own classes, then add the FlowSearch custom attributes in the Settings panel.

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

Pro Tip

Style one result card natively in Webflow, 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 Webflow 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 Webflow.

<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;
}