> ## Documentation Index > Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt > Use this file to discover all available pages before exploring further. # Variant-Based Filter ![Filter by Variant preview](https://raw.githubusercontent.com/thedesignmvp/framerfy-assets/refs/heads/main/docs/Variant-Based%20Filter.png) # Variant-Based Filter A Shopify-connected product filter component for Framer that fetches all variant options across your catalog and renders them as clickable filter buttons, storing the active selection in `localStorage` for other components to consume. *** ## What It Does The **Variant-Based Filter** fetches every product variant from your Shopify store via the Storefront API, groups them by option name (e.g. Size, Color, Frame Style), and displays each unique value as a filter button. When a user clicks a button, the component stores the selection in `localStorage` and broadcasts a storage event — allowing a product listing component on the same page to reactively filter its results. Key behaviors at a glance: * **Fetches variants from Shopify** — on load, queries the Shopify Storefront API to get all products and their variants. Falls back to dummy preview data if Shopify credentials are not available (e.g. inside Framer's canvas). * **Groups by option name** — variant options are automatically grouped and labeled by their Shopify option name (e.g. all Size values together, all Color values together). * **Single or multi-select** — can be configured to allow selecting one filter at a time or multiple filters simultaneously. * **AND/OR filter logic** — selecting multiple values within the same option group uses OR logic (e.g. Small OR Medium). Selecting values across different option groups uses AND logic (e.g. Size: Small AND Color: Black). * \*\*Persists selection in \*\*`localStorage` — the active filter tags and the matching product IDs are both written to `localStorage` and kept in sync across page interactions and component instances. * **Broadcasts storage events** — fires `storage` events so other components (e.g. a product grid) can react to filter changes without a page reload. * **Optional label** — a text label can be shown above the filter buttons. * **Preview-safe** — renders dummy Size and Color options in Framer's canvas when Shopify credentials are unavailable. *** ## Property Controls All controls are accessible in Framer's right panel when the component is selected. They are grouped into the following sections: **Initial**, **Label**, **Show Label**, **Product Limit**, **Variants Per Product**, **Fetch All Variants**, **Enable Multi-Select**, **Filter by Product ID**, **Layout**, **Gap**, and **Styles**. ### Initial | Property | Type | Default | Description | | :---------- | :----- | :------ | :----------------------------------------------------------------------------------------------------------------- | | **Initial** | String | `""` | The default filter value pre-selected when the component first loads. Leave empty to show all products by default. | ### Label | Property | Type | Default | Description | | :-------- | :----- | :------------------ | :---------------------------------------------------------------------- | | **Label** | String | `Filter by Variant` | The text shown above the filter buttons when **Show Label** is enabled. | ### Show Label | Property | Type | Default | Description | | :------------- | :------ | :------ | :--------------------------------------------------- | | **Show Label** | Boolean | `true` | Toggle the label above the filter buttons on or off. | ### Product Limit | Property | Type | Default | Description | | :---------------- | :----- | :------ | :-------------------------------------------------------------------------------------------------------------------- | | **Product Limit** | Number | `50` | How many products to fetch per page from Shopify. Only applies when **Fetch All Variants** is disabled. Range: 1–250. | ### Variants Per Product | Property | Type | Default | Description | | :----------------------- | :----- | :------ | :--------------------------------------------------------------------------- | | **Variants Per Product** | Number | `250` | Maximum number of variants fetched per product. Shopify's hard limit is 250. | ### Fetch All Variants | Property | Type | Default | Description | | :--------------------- | :------ | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Fetch All Variants** | Boolean | `false` | When enabled, the component paginates through all products in your Shopify store (up to 100 pages). When disabled, only the first batch of products (up to **Product Limit**) is fetched. Enable this for large catalogs. | ### Enable Multi-Select | Property | Type | Default | Description | | :---------------------- | :------ | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Enable Multi-Select** | Boolean | `true` | When enabled, users can select multiple filter values at once. When disabled, selecting a new value deselects the previous one. Clicking the active value always clears it. | ### Filter by Product ID | Property | Type | Default | Description | | :----------------------- | :----- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------- | | **Filter by Product ID** | String | `""` | Optional. Enter a Shopify product ID to limit the variant options to a single product only. Leave empty to show options from all products. | ### Layout | Property | Type | Default | Description | | :--------- | :--- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Layout** | Enum | `Row` | Arrange filter buttons horizontally (`Row`) or vertically (`Column`). Buttons also wrap to a new line when they overflow the available width in `Row` mode. | ### Gap | Property | Type | Default | Description | | :------- | :----- | :------ | :------------------------------ | | **Gap** | Number | `8` | Spacing between filter buttons. | ### Styles Controls the visual appearance of the filter buttons. | Property | Type | Default | Description | | :------------------------------ | :----- | :--------------------------- | :-------------------------------------------------------------------------------------------------- | | **Font** | Font | — | Typography for all filter buttons. | | **Selected Color** | Color | `#fff` | Text color of an active (selected) filter button. | | **Unselected Text Color** | Color | `#333` | Text color of inactive filter buttons. | | **Selected Background Color** | Color | `#1976d2` | Background color of an active filter button. | | **Unselected Background Color** | Color | `#fff` | Background color of inactive filter buttons. | | **Disabled Text Color** | Color | — | Text color for any disabled state. | | **Border Radius** | Number | `8` | Rounds the corners of filter buttons. | | **Box Shadow** | String | `none` | CSS box shadow applied to filter buttons (e.g. `0 2px 4px rgba(0,0,0,0.1)`). | | **Border** | Object | `1px solid rgba(0,0,0,0.12)` | Border applied to filter buttons. Configurable via `borderWidth`, `borderStyle`, and `borderColor`. | | **Padding** | Number | `8` | Inner spacing inside each filter button. | ## Notes * This component requires `window.DOMAIN` and `window.ACCESSTOKEN` to be set globally on the page for live Shopify data fetching. Without these, it renders dummy Size and Color options for canvas preview. * Filter state is stored in `localStorage` under two keys: `variantFilter` (selected tags) and `variantFilterProductIds` (matching product IDs). Any other component on the page can read these keys to apply the filter. * The component fires a `storage` event on `window` each time the filter changes, so product listing components can reactively update without a page reload. * **AND/OR logic**: multiple values within the same option (e.g. two sizes) are combined with OR. Values across different options (e.g. a size and a color) are combined with AND. * In **Fetch All Variants** mode, the component paginates through up to 100 pages of products. For very large catalogs this may take a moment on first load.