Supported Themes
Theme compatibility information and how FilterIQ works across different Shopify themes.
Supported Themes
FilterIQ is built as a Theme App Extension for Online Store 2.0. Validate placement, styling, loading and conflicts on the exact theme/version before publishing. An extension mechanism is not a certification that every theme and app combination works.
OS 2.0 Theme Validation
Review the actual sections, templates and app embeds in your theme. Shopify explains the platform controls in Extend your theme with apps.
Shopify First-Party Themes
Dawn, Refresh, Craft and other Shopify themes still need a check against their installed version and customizations. Record the version and any modified search or collection templates before testing.
Popular Third-Party OS 2.0 Themes
For themes such as Prestige, Impulse, Symmetry or Turbo, include the vendor's search overlay, collection layout and quick-add behaviour in the review. A theme name alone does not identify the templates or integrations running in a store.
| Surface | Acceptance check |
|---|---|
| Search input | The intended input opens one dropdown; native overlays do not intercept it |
| Collections | Filtering updates the intended product grid and preserves sorting and pagination |
| Mobile | Drawer open/close, body scroll and focus work on representative devices |
| Loading | Content remains readable and usable while scripts, images or requests are delayed |
| Other apps | Cart, consent and search/filter integrations do not attach conflicting controls |
Legacy Themes (Vintage Themes)
Confirm the integration options for a vintage theme before installation. Selector fallbacks in storefront code do not prove full compatibility. Inspect the actual search input and collection grid, and send the theme/version and relevant templates to the team rather than assuming that an OS 2.0 setup procedure applies.
How Theme Detection Works
The storefront JavaScript (search-filter.js) uses a priority-ordered list of CSS selectors to find the product grid on collection pages. It tries each selector in order and attaches to the first match.
Selector matching is an attachment mechanism. A match can target the wrong container or stop working after a template change. Repeat the acceptance checks after theme updates and keep a rollback reference.
Enabling the Theme App Extension
- Go to Online Store > Themes in your Shopify admin
- Create a duplicate theme using the theme actions menu, then open Edit theme for that copy
- Click the puzzle piece icon (App embeds) in the left panel
- Toggle the supplied FilterIQ app embed on for the duplicate theme
- Click Save
Open the duplicate theme preview and run the checks above. Confirm store-wide app-setting effects separately; a theme copy does not isolate every configuration change. Publish only after the accepted integration and rollback procedure have been reviewed.
CLS (Cumulative Layout Shift) Optimization
The extension contains loading and layout controls intended to reduce shifts. Review the actual deployed path, including:
- Space reserved for the filter panel and product images
- When theme and extension styles become available
- Whether content is visible and interactive during initialization or a script failure
Measure layout shift on representative pages and devices. Loading controls do not guarantee a particular CLS score, and hiding content is not a substitute for a usable loading state.
Headless / Hydrogen Themes
Hydrogen and custom React storefronts do not use the Theme App Extension as their storefront integration. Read the JavaScript integration availability notice and confirm a supported interface with the team before building a custom client.
Troubleshooting Theme Issues
Filters appear but product grid does not update
Your theme may use a non-standard grid container. Check the grid selector by inspecting the page with browser DevTools and looking for the product grid's ID or class. Contact support with this information.
Search dropdown appears behind other elements
This is usually a z-index issue. The search dropdown uses z-index: 999999. If your theme has elements with higher z-index values (common with mega-menus), contact support.
Filter sidebar overlaps content on certain pages
The sidebar is designed for collection pages. If it appears on non-collection pages, check that the app embed is not being loaded on pages where it should not appear. The app auto-detects page type and only renders filters on collection and search pages.