Styling & Customization

Unstyled by Design

FlowSearch is intentionally unstyled—it inherits your existing Webflow CSS automatically. This means your search elements will look consistent with the rest of your site without any additional work.

CSS Classes Added by FlowSearch

FlowSearch adds these classes that you can style in Webflow or custom CSS:

Class	Applied To	Description
`.flowsearch-enhanced`	All elements	Added to all FlowSearch-enhanced elements
`.flowsearch-input`	Search input	The search text input
`.flowsearch-results`	Results container	Container holding search results
`.flowsearch-loading`	Results container	Added while search is in progress
`.flowsearch-has-results`	Results container	Added when results are displayed
`.flowsearch-no-results`	Results container	Added when search returns no results
`.flowsearch-focused`	Search input	Added when input is focused
`.flowsearch-hit`	Result items	Each search result item
`.flowsearch-hit-active`	Result items	Currently selected result (keyboard nav)

Basic Styling Example

Add this CSS to your Webflow site to style the search results:

/* Results dropdown styling */
[data-flowsearch-results] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
}

/* Individual result items */
.flowsearch-hit {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background 0.15s;
}

.flowsearch-hit:hover,
.flowsearch-hit-active {
  background: #f0fdf4;  /* Light green */
}

.flowsearch-hit:last-child {
  border-bottom: none;
}

/* Loading state */
.flowsearch-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* No results message */
.flowsearch-no-results {
  padding: 24px;
  text-align: center;
  color: #666;
}

Styling in Webflow

You can style FlowSearch elements directly in Webflow by giving your elements additional classes:

Add a class to your search input (e.g., site-search-input)
Style it as you would any other element
FlowSearch will preserve your classes and add its own

Pro Tip

Create a hidden "Search Result Item" element in Webflow and style it. Then copy those styles to your custom CSS for the .flowsearch-hit class.

Custom Templates

For complete control over result rendering, use custom templates:

const flowSearch = new FlowSearch({
  apiUrl: 'https://api.flowsearch.io',
  apiKey: 'YOUR_API_KEY',
  
  templates: {
    dropdownHit: `
      <a href="{{url}}" class="search-result-item">
        <div class="result-image" style="background-image: url({{image}})"></div>
        <div class="result-content">
          <h4 class="result-title">{{title}}</h4>
          <p class="result-description">{{description}}</p>
          <span class="result-category">{{category}}</span>
        </div>
      </a>
    `,
    
    dropdownEmpty: `
      <div class="no-results-message">
        <svg><!-- empty state icon --></svg>
        <p>No results found for "{{query}}"</p>
        <p class="suggestion">Try searching for something else</p>
      </div>
    `,
    
    dropdownLoading: `
      <div class="loading-spinner">
        <div class="spinner"></div>
        <p>Searching...</p>
      </div>
    `
  }
});

Available Template Variables

Variable	Description
`{{title}}`	Page title
`{{description}}`	Page description or excerpt
`{{url}}`	Page URL
`{{image}}`	Featured image URL
`{{category}}`	Page category
`{{date}}`	Publication date
`{{query}}`	Current search query
`{{nbHits}}`	Number of results
`{{processingTimeMS}}`	Search time in milliseconds

JavaScript Template Functions

For dynamic templates, use JavaScript functions:

const flowSearch = new FlowSearch({
  apiUrl: 'https://api.flowsearch.io',
  apiKey: 'YOUR_API_KEY',
  
  templates: {
    dropdownHit: (hit) => {
      return `
        <div class="search-result" data-url="${hit.url}">
          <h3>${hit.title}</h3>
          <p>${hit.description || ''}</p>
          ${hit.category ? `<span class="category">${hit.category}</span>` : ''}
          ${hit.readingTime ? `<span class="reading-time">${hit.readingTime} min read</span>` : ''}
        </div>
      `;
    },

    stats: (stats) => {
      const { nbHits, processingTimeMS, query } = stats;
      if (nbHits === 0) {
        return `<p>No results for "${query}"</p>`;
      }
      return `<p>Found ${nbHits} result${nbHits === 1 ? '' : 's'} in ${processingTimeMS}ms</p>`;
    }
  }
});

Responsive Design

FlowSearch adapts to your responsive breakpoints. Add mobile-specific styles:

/* Mobile: Full-screen results */
@media (max-width: 767px) {
  [data-flowsearch-results] {
    position: fixed;
    top: 60px;  /* Below your mobile header */
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    border-radius: 0;
    z-index: 9999;
  }
  
  .flowsearch-hit {
    padding: 16px;  /* Larger touch targets */
  }
}

/* Tablet adjustments */
@media (max-width: 991px) {
  [data-flowsearch-results] {
    width: 100%;
    max-width: none;
  }
}

Highlight Styling

Style the highlighted matching text in results:

/* Highlighted matching text */
.flowsearch-hit mark,
.flowsearch-hit .highlight {
  background: #fef08a;  /* Yellow highlight */
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

Dark Mode Support

Add dark mode styles that match your site:

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  [data-flowsearch-results] {
    background: #1a1a1a;
    border-color: #333;
    color: #fff;
  }
  
  .flowsearch-hit:hover,
  .flowsearch-hit-active {
    background: #2a2a2a;
  }
  
  .flowsearch-hit mark {
    background: #854d0e;
    color: #fef08a;
  }
}

/* Or use a class-based approach */
.dark [data-flowsearch-results] {
  background: #1a1a1a;
  /* ... */
}