Squarespace Website Setup and Customization
Setting up an existing Squarespace website is working in three layers: visual editor (limited), Design panel (Site Styles), and Custom CSS + Code Injection for everything the platform doesn't provide through UI. Most "customization" requests mean the third layer.
Site Styles and What's Behind Them
Design → Site Styles opens visual variables panel. Under the hood, these are CSS custom properties that Squarespace generates in <style> tag. Different sections have different "themes" (color sets) that are switched via Theme Selector in section editor.
Color theme structure on 7.1:
Theme 1 (light)
Theme 2 (dark)
Theme 3-6 (accent)
Each theme has its own variable set: background, headings, body text, links, borders. Set in Site Styles → Colors → Edit Themes.
Custom CSS: What, Where, When
Custom CSS is added in Design → Custom CSS. Styles apply globally to entire site. For targeted work, need correct selectors — Squarespace generates BEM-like classes that change between versions:
/* Header */
.header-nav { background: transparent !important; }
.header-nav-item a { color: #fff; }
/* Hero section */
.section-background { opacity: 0.7; }
/* Buttons */
.sqs-block-button-element {
border-radius: 2px;
padding: 12px 32px;
font-size: 0.875rem;
letter-spacing: 0.1em;
}
/* Mobile menu */
.mobile-overlay-nav-item a {
font-size: 2rem;
font-weight: 300;
}
/* Hide element only on mobile */
@media (max-width: 767px) {
.custom-desktop-only { display: none !important; }
}
Important: .sqs-* classes may update on Squarespace updates. Recommended to use section data-attributes for more stable anchors:
[data-section-id="abc123"] .content-wrapper {
max-width: 960px;
}
Code Injection: Header, Footer, Page-specific
Settings → Advanced → Code Injection allows inserting code in <head> and before </body> globally. At individual page level — Page Settings → Advanced → Page Header Code Injection.
Typical tasks via Code Injection:
Google Tag Manager:
<!-- Head injection -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- Body injection -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Custom Font from Google Fonts:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
/* Custom CSS */
body, p, li { font-family: 'Inter', sans-serif; }
Schema.org LocalBusiness Markup:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Company Name",
"address": {
"@type": "PostalAddress",
"streetAddress": "1 Example St",
"addressLocality": "City",
"addressCountry": "US"
},
"telephone": "+1-555-123-4567"
}
</script>
Navigation Customization
Squarespace 7.1 doesn't allow creating megamenu through UI. Workaround — via JavaScript in Code Injection:
window.addEventListener('DOMContentLoaded', function() {
const navItems = document.querySelectorAll('.header-nav-item');
navItems.forEach(item => {
const link = item.querySelector('a');
if (link && link.textContent.trim() === 'Services') {
item.classList.add('has-megamenu');
// Inject megamenu HTML
}
});
});
Blog and Collections Setup
Custom blog fields — not natively available. Workaround: use thumbnail image as cover, excerpt as subtitle, tags for categorization. For complex structure — switch to Portfolio collection or integrate with external headless CMS via Embed block.
Post author: set via Contributors. Author name displays in Summary Block, but not avatar — for avatar need custom CSS with content pseudo-element or JS hack.
Performance
Squarespace loads significant amount of its own scripts. To improve Core Web Vitals:
- Disable built-in Squarespace fonts if external fonts are connected
- Use native lazy load for Image Block (enabled by default in 7.1)
- Minimize third-party scripts in Code Injection
- Enable AMP for blog (Settings → Blogging → AMP) — optional
Timelines
Design revision of existing site (colors, fonts, spacing) via Site Styles + Custom CSS — 1-2 days. Full section rework, Code Injection setup, integrations, SEO markup — 3-7 days.