Appearance Settings
Configure the visual layout, product cards, and display options for your FilterIQ storefront.
Appearance Settings
The Appearance tab on the Filters page (/app/filters) controls how filters, product cards, and the overall layout look on your storefront. Changes you make here are saved as drafts and go live when you publish.
Layout Settings
Grid Columns
Control how many product columns appear in the product grid:
| Setting | Description |
|---|---|
| 2 columns | Larger product cards, good for high-end or visual products |
| 3 columns | Balanced layout (default for desktop) |
| 4 columns | Compact grid, shows more products above the fold |
| Auto | Responsive -- adjusts based on screen width |
The column count applies to the desktop view. On mobile, the grid automatically adjusts to 1-2 columns based on screen width.
Card Layout Options
Choose the overall structure of the product grid area:
- Sidebar + Grid -- Vertical filter sidebar on the left, product grid on the right (classic layout)
- Toolbar + Grid -- Horizontal filter bar above the product grid, full-width grid below
- Drawer + Grid -- No visible filters; shoppers open a slide-out drawer to access filters
Product Card Settings
Customize how individual product cards appear in the grid:
Display Mode
- Standard -- Image on top, product info below
- Compact -- Smaller card with minimal spacing
- Detailed -- Larger card with additional product information
Image Position
- Top -- Product image at the top of the card (default)
- Left -- Product image on the left, info on the right (horizontal card)
Information Shown
Toggle which details appear on each product card:
| Field | Default | Description |
|---|---|---|
| Product title | On | The product name |
| Price | On | Current price and compare-at price (if applicable) |
| Vendor | Off | The product vendor/brand |
| Rating | Off | Star rating (if review app integration is active) |
| Variant count | Off | Number of available variants (e.g., "5 colors") |
| Sale badge | On | Badge shown when product has a compare-at price |
| Out-of-stock badge | On | Badge shown when product is unavailable |
Filter Display Settings
Collapse Behavior
Control whether filter sections start collapsed or expanded:
- All expanded -- Every filter section is open by default
- All collapsed -- Every filter section starts collapsed; shoppers click to expand
- First expanded -- Only the first filter is open; the rest are collapsed
- Custom -- Set collapse state per individual filter
Icon Type
Choose the icon style for filter section headers:
- Chevron -- A small arrow that rotates when expanded/collapsed (default)
- Plus/Minus -- A
+when collapsed,-when expanded - None -- No expand/collapse icon
Truncation
For filters with many options, control how long lists are handled:
- Show all -- Display every option (can make the sidebar very long)
- Truncate at N -- Show the first N options with a "Show more" link to reveal the rest
- Scrollable -- Show a fixed-height container with a scrollbar
The default truncation is set to 8 options with a "Show more" link.
Color Swatches Configuration
The Appearance tab also includes swatch settings. For detailed swatch configuration, see Color & Image Swatches.
Quick settings available here:
- Swatch shape -- Circle, Square, or Rounded
- Swatch size -- Small (24px), Medium (32px), Large (40px)
- Show label -- Whether to show the color name below or beside the swatch
- Selected indicator -- Checkmark overlay or ring border
How Appearance Settings Affect the Storefront
All appearance settings are written into your filter configuration and read by the Theme App Extension on your storefront. This means:
- Changes take effect immediately after publishing
- No theme code modifications are required
- Settings apply consistently across all pages where filters appear
- The storefront preview in the app reflects your changes in real time
Preview
The right side of the Appearance tab shows a live preview of your settings. As you adjust options, the preview updates so you can see exactly how your storefront will look before publishing.
Tips
- Match your theme -- Choose grid columns and card layouts that complement your existing theme design
- Less is more on cards -- Showing too much information per card can overwhelm shoppers. Start with title, price, and image.
- Collapse secondary filters -- Keep the most important filters expanded and collapse less-used ones to reduce visual clutter
- Test on mobile -- Always check how your appearance settings look on a phone. The mobile drawer layout may need different collapse settings than the desktop sidebar.
Need Help?
For help choosing the right appearance settings for your store design, contact support@filteriq.app.