Display Tags on Product Pages
What You'll Create
Display product tags as clickable badges on individual product detail pages. Tags appear as styled links that filter the shop when clicked, helping customers discover related products.
The Problem It Solves
Squarespace hides product tags on detail pages by default—they're only visible in the admin. When you want customers to see and click tags to find similar products, there's no native display option. This technique extracts and displays tags as styled, clickable links.
Perfect For
Product categorization, Related product discovery, Shop filtering, Tag-based navigation, Product organization
What Makes This Different
This technique reads product tags from CSS classes, formats them properly with capitalization, and creates clickable links that filter your shop page. Tags display as pill-shaped badges with hover effects. Fully customizable styling for any design.
Details
Section Type: Fluid & Classic
Code Type: CSS + JavaScript
Prerequisites: Products with tags assigned, Shop page URL structure
Toolkit Title: Display Tags on Product Details Pages
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