Налаштування та кастомізація сайту на Squarespace
Налаштування існуючого сайту Squarespace — це робота в трьох шарах: візуальний редактор (обмежений), Design panel (Site Styles), та Custom CSS + Code Injection для всього, що платформа не дає через UI. Більшість запитів на «кастомізацію» означають саме третій шар.
Site Styles та що за ними скрито
Design → Site Styles відкриває панель візуальних змінних. Під капотом це CSS custom properties, які Squarespace генерує у <style> тегу. Різні секції мають різні «теми» (набори кольорів), які перемикаються через Theme Selector у редакторі секції.
Структура кольорової теми на 7.1:
Theme 1 (світла)
Theme 2 (темна)
Theme 3-6 (акцентні)
Кожна тема має свій набір змінних: background, headings, body text, links, borders. Вони задаються в Site Styles → Colors → Edit Themes.
Custom CSS: що, куди та коли
Custom CSS додається в Design → Custom CSS. Стилі застосовуються глобально до всього сайту. Для прицільної роботи потрібні правильні селектори — Squarespace генерує BEM-подібні класи, які змінюються між версіями:
/* Хедер */
.header-nav { background: transparent !important; }
.header-nav-item a { color: #fff; }
/* Hero-секція */
.section-background { opacity: 0.7; }
/* Кнопки */
.sqs-block-button-element {
border-radius: 2px;
padding: 12px 32px;
font-size: 0.875rem;
letter-spacing: 0.1em;
}
/* Мобільне меню */
.mobile-overlay-nav-item a {
font-size: 2rem;
font-weight: 300;
}
/* Сховати елемент тільки на мобільних */
@media (max-width: 767px) {
.custom-desktop-only { display: none !important; }
}
Важливо: класи .sqs-* можуть оновлюватися при апдейтах Squarespace. Рекомендується використовувати data-атрибути секцій для більш стабільних якорів:
[data-section-id="abc123"] .content-wrapper {
max-width: 960px;
}
Code Injection: Header, Footer, Page-specific
Налаштування → Advanced → Code Injection дозволяє вставити код у <head> та перед </body> глобально. На рівні окремої сторінки — Page Settings → Advanced → Page Header Code Injection.
Типові завдання через 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>
Користувацький шрифт з 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:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Назва компанії",
"address": {
"@type": "PostalAddress",
"streetAddress": "вул. Прикладна, 1",
"addressLocality": "Місто",
"addressCountry": "UA"
},
"telephone": "+380-XXX-XXX-XXXX"
}
</script>
Кастомізація навігації
Squarespace 7.1 не дозволяє створити мегаменю через UI. Обходний шлях — через JavaScript у 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() === 'Послуги') {
item.classList.add('has-megamenu');
// Inject megamenu HTML
}
});
});
Налаштування блога та коллекцій
Користувацькі поля в блозі — нативно недоступні. Обхід: використовувати thumbnail image як обкладинку, excerpt як підзаголовок, tags для категоризації. Для складної структури — переход на Portfolio collection або інтеграція з зовнішнім headless CMS через Embed блок.
Автор поста: задається через Contributors. У Summary Block виводиться ім'я автора, але не аватар — для аватара потрібна Custom CSS з content pseudo-element або JS-хак.
Продуктивність
Squarespace завантажує значний об'єм власних скриптів. Для покращення Core Web Vitals:
- Відключити вбудовані шрифти Squarespace, якщо підключаються зовнішні
- Використовувати нативний lazy load для Image Block (увімкнений за замовчуванням у 7.1)
- Мінімізувати сторонні скрипти у Code Injection
- Увімкнути AMP для блога (Settings → Blogging → AMP) — опціонально
Терміни
Ревізія дизайну існуючого сайту (кольори, шрифти, відступи) через Site Styles + Custom CSS — 1–2 дні. Повна переробка секцій, налаштування Code Injection, інтеграції, SEO-розмітка — 3–7 днів.