Style Pages Dynamically Based on URL Keywords

What You'll Create

A system in Squarespace that automatically applies different styles to pages based on keywords in their URLs. Add a keyword like "lifestyle" or "corporate" to any page URL, and that page gets its own unique styling—different colors, layouts, or visual treatments—without creating separate templates.

The Problem It Solves

Squarespace applies the same styles site-wide. If you want certain pages to look different (different header colors, unique section styles, branded landing pages), you'd normally need to add custom code to each page individually or use awkward workarounds.

Perfect For

Multi-brand landing pages, client-specific portfolio sections, seasonal campaign pages, department or category styling, A/B testing different visual approaches.

What Makes This Different

Reads the page URL and automatically adds a style identifier that you can target with your own styling rules. Simply add a keyword to any page's URL slug (like /about-key-lifestyle), and you can write styles that only apply to pages with that keyword. No need to edit code on individual pages—the URL itself controls which styles apply. Great for quickly creating page variations or organizing styles by category.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: Page URL containing key- followed by your keyword (e.g., /about-key-lifestyle)

• Toolkit Title: Style Page based on URL

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