Grid Portfolio Filter

What You'll Create

Add a horizontal navigation of category buttons above your Squarespace portfolio grid—clicking any category smoothly fades out non-matching items and fades in matching ones. URLs update to enable direct linking to filtered views, and the filter state persists when navigating back.

The Problem It Solves

Squarespace's portfolio section displays all projects without native filtering capability. Visitors with specific interests must scroll through everything to find relevant work. This technique adds client-side filtering that instantly shows only matching projects, dramatically improving portfolio navigation for multi-discipline creatives.

Perfect For

Multi-discipline design portfolios, photography sites with genre categories, agency portfolios with service type filters, artist galleries with medium filters, product showcases with category organization.

What Makes This Different

Categories are embedded right in your portfolio item titles using a simple parentheses format like Project Name (Category). The filter navigation updates the URL, so you can share links to specific filtered views and visitors can bookmark them. When returning to the page, their previous filter selection is remembered. Non-matching items fade out smoothly rather than jumping, creating a polished transition.

Details

• Section Type: Fluid Engine

• Code Type: CSS + JavaScript

• Prerequisites: Portfolio section with category keywords in parentheses within titles, unordered list with #pfilter-{category} links above portfolio

• Toolkit Title: Grid Portfolio Filter

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support