CSS Customization

FilterIQ inherits your theme's base styles. For further customization, you can add custom CSS via the app dashboard or your theme's CSS.

Adding Custom CSS

Via App Dashboard (Recommended)

1. Go to the app dashboard → Settings > Appearance
2. Paste your CSS in the Custom CSS field
3. Click Save
4. Changes apply immediately on your storefront

Via Theme CSS

You can also add CSS directly to your theme:

1. Go to Online Store > Themes > Customize
2. Navigate to your theme's CSS file (usually base.css or a custom CSS section)
3. Add your CSS
4. Save

CSS Class Reference

All FilterIQ elements use the ssf- prefix to avoid conflicts with your theme.

Search Bar

/* The search bar container */
.ssf-search-bar {
  /* Change search bar width */
  max-width: 500px;
}

/* The search input field */
.ssf-search-input {
  /* Change font size */
  font-size: 16px;
  /* Change border */
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  /* Change padding */
  padding: 12px 16px;
}

/* Input focus state */
.ssf-search-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Search icon */
.ssf-search-icon {
  color: #9ca3af;
}

Autocomplete Dropdown

/* The dropdown container */
.ssf-search-autocomplete {
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Individual suggestion item */
.ssf-search-suggestion {
  padding: 8px 12px;
}

/* Suggestion hover state */
.ssf-search-suggestion:hover,
.ssf-search-suggestion--active {
  background-color: #f3f4f6;
}

/* Product suggestion image */
.ssf-suggestion-image {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

/* Product suggestion title */
.ssf-suggestion-title {
  font-weight: 500;
}

/* Product suggestion price */
.ssf-suggestion-price {
  color: #6b7280;
}

Filter Sidebar

/* The entire filter sidebar */
.ssf-filters {
  /* Change sidebar width (desktop) */
  width: 280px;
}

/* Individual filter group */
.ssf-filter-group {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

/* Filter group heading */
.ssf-filter-label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #374151;
}

/* Filter option (checkbox item) */
.ssf-filter-option {
  padding: 4px 0;
}

/* Active/selected filter state */
.ssf-filter-active {
  font-weight: 600;
  color: #3b82f6;
}

/* Filter count badge */
.ssf-filter-count {
  color: #9ca3af;
  font-size: 12px;
}

/* "Clear" button per filter group */
.ssf-filter-clear {
  color: #6b7280;
  font-size: 12px;
}

/* "Clear All Filters" button */
.ssf-filter-clear-all {
  color: #ef4444;
}

Color Swatches

/* Individual swatch circle */
.ssf-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  cursor: pointer;
}

/* Selected swatch */
.ssf-swatch--selected {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px #3b82f6;
}

/* Swatch hover */
.ssf-swatch:hover {
  transform: scale(1.1);
}

/* Swatch color name tooltip */
.ssf-swatch-tooltip {
  font-size: 12px;
  background: #1f2937;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}

Range Slider

/* Slider track */
.ssf-range-track {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
}

/* Active range (between handles) */
.ssf-range-track-active {
  background: #3b82f6;
}

/* Slider handle */
.ssf-range-handle {
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid #3b82f6;
  border-radius: 50%;
}

/* Min/max input fields */
.ssf-range-input {
  width: 80px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
}

Search Results Grid

/* Results grid container */
.ssf-results-grid {
  display: grid;
  gap: 24px;
  /* Change column count */
  grid-template-columns: repeat(4, 1fr);
}

/* Individual product card */
.ssf-product-card {
  border-radius: 8px;
  overflow: hidden;
}

/* Product card hover */
.ssf-product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Product image */
.ssf-product-image {
  aspect-ratio: 1;
  object-fit: cover;
}

/* Product title */
.ssf-product-title {
  font-weight: 500;
  font-size: 14px;
}

/* Product price */
.ssf-product-price {
  font-weight: 600;
}

/* Compare-at price (strikethrough) */
.ssf-product-compare-price {
  text-decoration: line-through;
  color: #9ca3af;
}

/* Sale badge */
.ssf-product-sale-badge {
  background: #ef4444;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

Mobile Filter Drawer

/* Drawer overlay */
.ssf-mobile-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* Drawer panel */
.ssf-mobile-drawer {
  background: white;
  max-width: 400px;
}

/* "Filters" trigger button (shown on mobile) */
.ssf-mobile-trigger {
  background: #1f2937;
  color: white;
  border-radius: 8px;
  padding: 10px 20px;
}

/* Active filter count badge on trigger */
.ssf-mobile-trigger-badge {
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  font-size: 12px;
}

/* "Apply Filters" button in drawer */
.ssf-mobile-apply {
  background: #3b82f6;
  color: white;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
}

Tips

Matching Your Theme

To quickly match your theme's style:

/* Use CSS variables from your theme */
.ssf-search-input {
  border-color: var(--color-border);
  font-family: var(--font-body-family);
}

.ssf-filter-label {
  font-family: var(--font-heading-family);
  color: var(--color-foreground);
}

.ssf-product-card {
  border-color: var(--color-border);
  background: var(--color-background);
}

Responsive Adjustments

/* 2-column grid on tablet */
@media (max-width: 768px) {
  .ssf-results-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .ssf-filters {
    width: 100%;
  }
}

/* Single column on small mobile */
@media (max-width: 480px) {
  .ssf-results-grid {
    grid-template-columns: 1fr;
  }
}

Hiding Elements

/* Hide the search icon */
.ssf-search-icon { display: none; }

/* Hide filter counts */
.ssf-filter-count { display: none; }

/* Hide autocomplete product images */
.ssf-suggestion-image { display: none; }