Table Of ContentThe Definitive
Guide to
Squarespace
Learn to Deliver Custom, Professional
Web Experiences for Yourself and
Your Clients
—
Sarah Martin
The Definitive Guide to
Squarespace
Learn to Deliver Custom, Professional Web
Experiences for Yourself and Your Clients
Sarah Martin
The Definitive Guide to Squarespace
Sarah Martin
Humble, Texas, USA
ISBN-13 (pbk): 978-1-4842-2936-1 ISBN-13 (electronic): 978-1-4842-2937-8
https://doi.org/10.1007/978-1-4842-2937-8
Library of Congress Control Number: 2017960180
Copyright © 2017 by Sarah Martin
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the
material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation,
broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage
and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or
hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with
every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an
editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are
not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to
proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication,
neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or
omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material
contained herein.
Cover image designed by Freepik
Managing Director: Welmoed Spahr
Editorial Director: Todd Green
Acquisitions Editor: Louise Corrigan
Development Editor: James Markham
Technical Reviewer: Nathan Paynter
Coordinating Editor: Nancy Chen
Copy Editor: Karen Jameson
Compositor: SPi Global
Indexer: SPi Global
Artist: SPi Global
Distributed to the book trade worldwide by Springer Science+Business Media New York,
233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505,
e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. Apress Media, LLC is a California LLC
and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc).
SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail rights@apress.com, or visit http://www.apress.com/
rights-permissions.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and
licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web
page at http://www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this book is available to readers
on GitHub via the book’s product page, located at www.apress.com/9781484229361. For more detailed
information, please visit http://www.apress.com/source-code.
Printed on acid-free paper
This book is dedicated to Professor Greg Kesden,
who pushed me out of my comfort zone and
started me on my web development journey.
Contents at a Glance
About the Author �����������������������������������������������������������������������������������������������������xv
About the Technical Reviewer �������������������������������������������������������������������������������xvii
Acknowledgments ��������������������������������������������������������������������������������������������������xix
■ Chapter 1: Introduction to Squarespace ����������������������������������������������������������������1
■ Chapter 2: Getting Started on Your Site ���������������������������������������������������������������27
■ Chapter 3: Styling Your Site ���������������������������������������������������������������������������������55
■ Chapter 4: Site Settings and Best Practices ��������������������������������������������������������83
■ Chapter 5: HTML, CSS, and JavaScript ��������������������������������������������������������������125
■ Chapter 6: Code Injectors—Add Custom Code ��������������������������������������������������147
■ Chapter 7: AJAX and AJAX Enabled Templates �������������������������������������������������165
■ Chapter 8: Popular Customizations �������������������������������������������������������������������185
■ Chapter 9: Respecting the Limits ����������������������������������������������������������������������213
■ Chapter 10: Third-Party Tools ����������������������������������������������������������������������������227
■ Chapter 11: Developer Mode �����������������������������������������������������������������������������241
Index ���������������������������������������������������������������������������������������������������������������������267
v
Contents
About the Author �����������������������������������������������������������������������������������������������������xv
About the Technical Reviewer �������������������������������������������������������������������������������xvii
Acknowledgments ��������������������������������������������������������������������������������������������������xix
■ Chapter 1: Introduction to Squarespace ����������������������������������������������������������������1
Selecting a Template ��������������������������������������������������������������������������������������������������������1
Template Families ������������������������������������������������������������������������������������������������������������3
Brine Template Family ����������������������������������������������������������������������������������������������������������������������������4
Tremont Template Family������������������������������������������������������������������������������������������������������������������������5
York Template Family ������������������������������������������������������������������������������������������������������������������������������6
Skye Template Family �����������������������������������������������������������������������������������������������������������������������������7
Farro Template Family ����������������������������������������������������������������������������������������������������������������������������8
Old Style Template Families ���������������������������������������������������������������������������������������������9
Bedford Template Family ������������������������������������������������������������������������������������������������������������������������9
Marquee Template Family ��������������������������������������������������������������������������������������������������������������������10
Pacific Template Family ������������������������������������������������������������������������������������������������������������������������11
Montauk Template Family ���������������������������������������������������������������������������������������������������������������������12
Aviator Template Family �����������������������������������������������������������������������������������������������������������������������12
Other Templates ������������������������������������������������������������������������������������������������������������������������������������13
Starting a Site ����������������������������������������������������������������������������������������������������������������13
Logging In ���������������������������������������������������������������������������������������������������������������������������������������������14
Getting Started with a New Website �����������������������������������������������������������������������������������������������������15
Trial Account Website ���������������������������������������������������������������������������������������������������������������������������16
Squarespace Menus �����������������������������������������������������������������������������������������������������������������������������17
Squarespace Preview Panel �����������������������������������������������������������������������������������������������������������������24
Introduction to Squarespace Wrap-Up ���������������������������������������������������������������������������26
vii
■ Contents
■ Chapter 2: Getting Started on Your Site ���������������������������������������������������������������27
Demo Pages �������������������������������������������������������������������������������������������������������������������27
Adding Pages �����������������������������������������������������������������������������������������������������������������31
Page Settings ���������������������������������������������������������������������������������������������������������������������������������������34
Types of Pages ��������������������������������������������������������������������������������������������������������������������������������������35
Squarespace Collections ����������������������������������������������������������������������������������������������������������������������39
Gallery Page �����������������������������������������������������������������������������������������������������������������������������������������39
Blog ������������������������������������������������������������������������������������������������������������������������������������������������������42
Events ���������������������������������������������������������������������������������������������������������������������������������������������������44
Products �����������������������������������������������������������������������������������������������������������������������������������������������46
Setting Up Navigation Menus �����������������������������������������������������������������������������������������48
Adding Content Using Blocks �����������������������������������������������������������������������������������������49
Arranging Blocks ������������������������������������������������������������������������������������������������������������51
Wrap-Up �������������������������������������������������������������������������������������������������������������������������54
■ Chapter 3: Styling Your Site ���������������������������������������������������������������������������������55
Logo & Title ��������������������������������������������������������������������������������������������������������������������55
Template Selector ����������������������������������������������������������������������������������������������������������58
Style Editor ���������������������������������������������������������������������������������������������������������������������60
Finding a Style Tweak ���������������������������������������������������������������������������������������������������������������������������60
Style Editor Controls �����������������������������������������������������������������������������������������������������������������������������61
Typography �������������������������������������������������������������������������������������������������������������������������������������������62
Color Selection �������������������������������������������������������������������������������������������������������������������������������������62
Sizes and Values �����������������������������������������������������������������������������������������������������������������������������������63
Background Images ������������������������������������������������������������������������������������������������������������������������������64
Layout Options ��������������������������������������������������������������������������������������������������������������������������������������65
Mobile Styles ����������������������������������������������������������������������������������������������������������������������������������������65
Page Specific Styles �����������������������������������������������������������������������������������������������������������������������������66
Image Block Example ���������������������������������������������������������������������������������������������������������������������������67
Checkout Page Style Editor ��������������������������������������������������������������������������������������������70
Lock Screen ��������������������������������������������������������������������������������������������������������������������70
viii
■ Contents
Announcement Bar ���������������������������������������������������������������������������������������������������������76
Mobile Information Bar ���������������������������������������������������������������������������������������������������78
Squarespace Badge �������������������������������������������������������������������������������������������������������80
Custom CSS & Advanced ������������������������������������������������������������������������������������������������81
Wrap-Up �������������������������������������������������������������������������������������������������������������������������81
■ Chapter 4: Site Settings and Best Practices ��������������������������������������������������������83
Commerce ����������������������������������������������������������������������������������������������������������������������83
Orders ���������������������������������������������������������������������������������������������������������������������������������������������������83
Inventory �����������������������������������������������������������������������������������������������������������������������������������������������84
Customers ��������������������������������������������������������������������������������������������������������������������������������������������85
Discounts ����������������������������������������������������������������������������������������������������������������������������������������������86
Settings Menu, Commerce Category ����������������������������������������������������������������������������������������������������88
Analytics �������������������������������������������������������������������������������������������������������������������������99
Settings Menu, General Category �����������������������������������������������������������������������������������99
Business Information ��������������������������������������������������������������������������������������������������������������������������100
Regional ����������������������������������������������������������������������������������������������������������������������������������������������101
Permissions ����������������������������������������������������������������������������������������������������������������������������������������102
Billing & Account ��������������������������������������������������������������������������������������������������������������������������������104
Settings Menu, Website Category ��������������������������������������������������������������������������������104
Connected Accounts ���������������������������������������������������������������������������������������������������������������������������104
Marketing �������������������������������������������������������������������������������������������������������������������������������������������105
Blogging����������������������������������������������������������������������������������������������������������������������������������������������105
Advanced ����������������������������������������������������������������������������������������������������������������������107
404 Error Page ������������������������������������������������������������������������������������������������������������������������������������108
Default Text Editor ������������������������������������������������������������������������������������������������������������������������������108
Escape Key �����������������������������������������������������������������������������������������������������������������������������������������109
Import / Export ������������������������������������������������������������������������������������������������������������������������������������109
External Services ��������������������������������������������������������������������������������������������������������������������������������109
URL Mappings �������������������������������������������������������������������������������������������������������������������������������������110
Image Metadata Importing �����������������������������������������������������������������������������������������������������������������111
ix
■ Contents
Home Menu ����������������������������������������������������������������������������������������������������������������������������������������112
EU Cookie Banner �������������������������������������������������������������������������������������������������������������������������������112
SEO Best Practices �������������������������������������������������������������������������������������������������������113
Site Content ����������������������������������������������������������������������������������������������������������������������������������������113
Settings Menu, Website Category, SEO Menu �������������������������������������������������������������������������������������115
Image Block ����������������������������������������������������������������������������������������������������������������������������������������117
Gallery Block and Gallery Page �����������������������������������������������������������������������������������������������������������118
Product Image ������������������������������������������������������������������������������������������������������������������������������������118
Cover Page and Thumbnail Images ����������������������������������������������������������������������������������������������������119
Settings Menu, Website Category, Security & SSL �������������������������������������������������������119
SSL �����������������������������������������������������������������������������������������������������������������������������������������������������120
Password Protection ���������������������������������������������������������������������������������������������������������������������������120
Launching the Site �������������������������������������������������������������������������������������������������������121
Wrap-Up �����������������������������������������������������������������������������������������������������������������������123
■ Chapter 5: HTML, CSS, and JavaScript ��������������������������������������������������������������125
Web Languages ������������������������������������������������������������������������������������������������������������125
HTML – The Structure ��������������������������������������������������������������������������������������������������125
Basic HTML Elements �������������������������������������������������������������������������������������������������������������������������127
Attributes ��������������������������������������������������������������������������������������������������������������������������������������������128
Head Elements ������������������������������������������������������������������������������������������������������������������������������������128
Body Elements ������������������������������������������������������������������������������������������������������������������������������������129
Semantic Elements �����������������������������������������������������������������������������������������������������������������������������130
Form Input Elements ��������������������������������������������������������������������������������������������������������������������������130
CSS – The Style ������������������������������������������������������������������������������������������������������������132
CSS Selectors �������������������������������������������������������������������������������������������������������������������������������������133
CSS Properties ������������������������������������������������������������������������������������������������������������������������������������134
Media Queries �������������������������������������������������������������������������������������������������������������������������������������137
JavaScript – The Interaction�����������������������������������������������������������������������������������������138
JavaScript Libraries ����������������������������������������������������������������������������������������������������������������������������138
x
■ Contents
Anatomy of a Squarespace Page ���������������������������������������������������������������������������������140
Finding the Right Selector ������������������������������������������������������������������������������������������������������������������144
Wrap-Up �����������������������������������������������������������������������������������������������������������������������146
■ Chapter 6: Code Injectors—Add Custom Code ��������������������������������������������������147
Use a Code Editor ���������������������������������������������������������������������������������������������������������147
Web Developer Browser Tools ��������������������������������������������������������������������������������������150
Site-Wide Code Injection ����������������������������������������������������������������������������������������������153
Lock Page Code Injection ���������������������������������������������������������������������������������������������155
Order Confirmation Page Code Injection ����������������������������������������������������������������������156
Page Header Code Injection �����������������������������������������������������������������������������������������157
Post Blog Item Code Injection ��������������������������������������������������������������������������������������158
Custom CSS Editor �������������������������������������������������������������������������������������������������������158
Code Blocks ������������������������������������������������������������������������������������������������������������������161
Form Block Post-Submit HTML ������������������������������������������������������������������������������������161
Load Order ��������������������������������������������������������������������������������������������������������������������162
CSS Priority �����������������������������������������������������������������������������������������������������������������������������������������162
JavaScript Load Order ������������������������������������������������������������������������������������������������������������������������163
Wrap-Up �����������������������������������������������������������������������������������������������������������������������164
■ Chapter 7: AJAX and AJAX Enabled Templates �������������������������������������������������165
What Is AJAX ����������������������������������������������������������������������������������������������������������������165
Squarespace Template Families with AJAX ������������������������������������������������������������������166
Working Around AJAX ���������������������������������������������������������������������������������������������������166
Mutation Observer ������������������������������������������������������������������������������������������������������������������������������168
Google Analytics Example �������������������������������������������������������������������������������������������������������������������169
HTML Comment Box Example ������������������������������������������������������������������������������������������������������������171
FAQ Accordion Examples ��������������������������������������������������������������������������������������������������������������������174
Accordion and HTML Comment Box Example �������������������������������������������������������������������������������������181
Mercury – Squarespace’s Solution ������������������������������������������������������������������������������183
Wrap-Up �����������������������������������������������������������������������������������������������������������������������184
xi
Description:Utilize the power of Squarespace to create custom professional websites. Learn the principles and tools used by Squarespace’s most successful web professionals to take your skills to the next level.Beginning with an overview of the Squarespace interface and template selection guidelines, this book