# Collection Filters #### How to setup filters using Shopify Search & Discovery *** We use the native **Shopify Search & Discovery** app to manage which filters appear on your collection pages. This is the standard, most performant way to handle filtering in Shopify 2.0. 1. **Install/Open App**: Go to **Apps > Search & Discovery** in your Shopify Admin. 2. **Navigate to Filters**: Click on **Filters** in the sidebar. 3. **Add Filters**: * Click **Edit filters**. * Select the fields you want to filter by (e.g., Price, Availability, Product Options like Size/Color, or custom Metafields). 4. **Order Filters**: Drag and drop the filters to rearrange their order on the storefront. 5. **Save**: Changes apply immediately to all collections using the default filter settings. ## **Custom Metafield Filters & Naming Conventions** *** **Creating & Naming Custom Filters** You can create completely custom filters (e.g., "Fabric", "Fit", "Occasion") using Shopify Metafields. **The "Filter:" Naming Convention** To keep your backend organized while displaying clean names on the frontend, the theme supports a special naming convention: * **Backend Label (Search & Discovery):** Filter: Style * **Frontend Display:** Style This allows you to group your custom filters together in the Shopify Admin (making them easy to find) without showing the word "Filter:" to customers. **Step 1: Create the Metafield Definition** 1. Go to **Settings > Custom data > Products**. 2. Click **Add definition**. 3. **Name**: Enter a name (e.g., "Fabric"). 4. **Namespace and key**: Use a consistent format, e.g., custom.fabric. 5. **Select Type**: * **Single line text** (List of values) - Best for most text filters. * **Reference** - If connecting to other objects. * **Step 2: Add Data to Products** 1. Go to a Product in the admin. 2. Scroll down to the **Metafields** section. 3. Enter the value for your new field (e.g., "Cotton"). **Step 3: Enable in Search & Discovery** 1. Open the **Search & Discovery** app. 2. Go to **Filters > Edit filters**. 3. Click **Add filter**. 4. Select your new Metafield from the list (it will appear under "Product metafields"). 5. **Label**: Rename the label to use the prefix if desired: Filter: Fabric. * *Note: This specific label determines what shows on the website. If you enter Filter: Fabric, the theme will strip "Filter: " and just show "Fabric".* #### Product vs Variant Considerations - ie Select the correct template *** We have two distinct ways to display products on collection pages. The filtering mechanism works slightly differently for each view. #### **1. Default Template (collection)** * **Display**: Shows **one card per product**. * **Best for**: Standard categories (e.g., "All Dresses", "Accessories"). * **Filtering Behavior**: * Filters operate at the **Product Level**. * If you filter by **"Color: Red"**, the grid shows the **Product Card** for any product that *has* a Red variant. #### **2. Exploded Variants Template (collection.variants)** * **Display**: Shows **individual cards for specific variants** (e.g., The "Red Dress" and "Blue Dress" appear as separate cards). * **Filtering Behavior**: * **Important**: Shopify's native filtering is still **Product Level**. * If you filter by **"Size: S"**: * Shopify finds all Products that contain a Size S. * The template then "explodes" these matching products into their variant cards. * *Result*: You will see the variant cards for products that match your filter. * **Note**: If a product has both "Red" and "Blue" variants, and you filter by "Red", the system finds the product. it may show *both* Red and Blue cards because they belong to the matched product For the Exploded template to work effectively with filters, you must ensure your data is structured correctly. (e.g., filtering for "Fabric: Wool" ONLY shows the Wool variant card, even if the Cotton variant belongs to the same product), you must use **Variant Metafields**. 1. **Define Metafield**: Go to **Settings > Custom Data > Variants**. Create custom.fabric. 2. **Assign Data**: Go to Product > Variants > Edit. Enter "Wool" for the Grey variant and "Cotton" for the Black variant. 3. **Add Filter**: In Search & Discovery, add the **Variant Metafield** (custom.fabric) as a filter. **User Flow:** 1. User selects **Fabric: Wool**. 2. Shopify finds Products with a Wool variant. 3. Theme iterates through variants. 4. **Result**: Only the Wool card is displayed. #### Hiding/Showing Filter Groups per Collection Template *** Sometimes you want to show a specific set of filters for one collection (e.g., Shoes) but hide them for another (e.g., Home Goods). **We achieve this using the Theme Editor settings.** **1. Create a New Template (if needed)** If you need unique filter visibility for a specific collection: 1. Go to **Online Store > Themes > Customize**. 2. Use the dropdown at the top to switch to **Collections**. 3. Click **Create template**. 4. Name it (e.g., collection-accessories). 5. Assign this template to your specific collection in the Shopify Admin (Products > Collections > \[Select Collection] > Theme template). **2. Configure "Hidden Filters"** 1. In the Theme Editor, navigate to your collection template. 2. Click on the **Filters** section in the sidebar. 3. Look for the **Hidden Filters** setting. 4. **Enter the labels of the filters you want to HIDE**, separated by commas. * *Example:* Size, Material, Pattern * *Note:* The text must match the Filter Label exactly as it appears in the Search & Discovery app. This allows you to have a global list of filters in the backend but selectively hide irrelevant ones on specific collection pages without managing complex code.
### **Collection Filter Tabs (Top Bar)** You can feature a specific filter as a horizontal tab bar at the top of the collection page (great for "Product Type" or broad categories). **How to Configure:** 1. **Open Theme Editor**: Go to your Collection Template. 2. **Select Filter Settings**: Click on the **Filters** section. 3. **Tab Filter Label**: Find the setting **"Tab Filter Label"**. 4. **Enter Filter Name**: Type the exact name of the filter you want to display as tabs. * *Example:* Product Type or Filter: Category. 1. **Result**: The values for that filter (e.g., "Tops", "Bottoms", "Dresses") will appear as clickable tabs above the product grid. If you want these tabs to act as links to other collections instead of filters, change the **Content Source** setting in the theme editor from "Filters" to "Collections List" and select the collections you want to link to.
#### Setting up images and colours for filters *** The theme supports visual filters for **Colors** (swatches) and **Images**. **Color Swatches (Automatic & Custom)** The theme looks for filters labeled **"Color"** or **"Colour"** (case-insensitive) and automatically attempts to render them as swatches. **Priority Order for Swatch Display:** 1. **Metaobjects (shopify--color-pattern)**: * If you use Shopify's standard color pattern metaobjects, the theme will pull the configured image or color value. 1. **Native Category Metafields**: * If the filter is based on a category metafield with a hex code or image assigned. 1. **Variant Image**: * If configured in settings, it may fall back to variant images (depending on specific setup). 1. **CSS/Name Match**: * If no image is found, the theme attempts to render a CSS color based on the name (e.g., "Blue" becomes background-color: blue). * It handles basic gradients for names like "Blue" (linear gradient). **Image Filters** For filters where you want to show a custom image (e.g., "Material" showing a texture, or "Fit" showing a diagram): 1. Ensure your filter uses a **Metafield** or **Metaobject** that contains an image reference. 2. In the **Search & Discovery** app, ensure the visual presentation is selected if available. 3. The theme snippet sa-filter-image.liquid will look for an associated image value (value.image) on the filter option and render it.
Edge Case and Troubleshooting | Issue | Cause | Solution | | ------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Filter not showing** | Products may not be tagged, or the filter is empty for the current collection. | Ensure at least one product in the collection has a value for that filter. | | **Exploded Grid shows wrong colour** | Filter matched the Parent Product, not the Variant. | Ensure you are filtering by a **Variant Metafield** or **Product Option** | | **Pagination count is wrong** | Exploded grid "explodes" variants, but Shopify paginates by Product. | This is a known Shopify limitation. If Page 1 loads 24 products, and each has 3 variants, you might get 72 cards. The "Load More" button counts *products*, not cards. | | **Tabs are empty** | "Tab Filter Label" doesn't match Search & Discovery label exactly. | Check for typos or missing "Filter: " prefix in the theme settings. | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.almond.studio/collections/collection-filters.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.