The Squarespace Template Bible
Updated March 2018
Everything you need to know about Squarespace templates and layouts
(including how to get around their limitations!)
In my Squarespace book, I say that choosing a template for your Squarespace website is the most important design decision you will make. Most people need a little help or advice when making big decisions, so I've written this post to demystify the process of choosing a template, shatter some misconceptions (dare I say lies?!), and provide helpful tips and tools that you can use to make your Squarespace website design work for you.
What a Squarespace template does - and doesn't do
One of the most confusing things about Squarespace is that there are actually 3 separate things that control how any given page looks: one is the template, one is the page type, and one is the individual page layout. The template controls the appearance of things at a global, site-wide level. This includes fonts, colours, positioning of the logo, positioning of the navigation, and existence/size/shape of banner images. All templates allow you to change the aesthetic appearance (different fonts or colours), and many templates also allow you to change things like positioning of elements or turning certain things on/off.
The page type only comes into play on special pages, such as Index, Blog, Gallery, Album, Event, or Products pages. The way those pages look are a combination of the settings on the template, and the type of content that the page is designed to hold. For example, this is the way the blog homepage looks in 2 different templates, Forte and Shift (click to enlarge):
A blog in the Forte template can never have a banner image, and a blog in the Shift template can never have a sidebar. That's because those elements are set by the template. And if you have 2 blogs on your website (eg. Company News and CEO's Journal), both of those blogs will have the same page structure, because template styles apply globally to all pages of that type in your site.
Furthermore, the page type dictates what types of content can exist on that page. For example, you can't have a video in an Album page, because that page type is designed to only hold audio files + an album cover image. Makes sense; that's why it's called an Album Page. But if you want to get creative, there's kind of a way around all this...
The (not so) secret hack to get around your template's limitations
“Standard page layouts are NOT controlled by the template; they are controlled by YOU.”
Standard page layouts are NOT controlled by the template; they are controlled by YOU. Things start to get interesting when you look at individual page layouts. Individual page layouts only apply to standard pages, because the layouts of special page types are set by the template and type of content (you just learned that above). Standard page layouts are not controlled by the template; they are controlled by YOU.
Standard pages are made up of content blocks. The page layout is made by putting various content blocks together, on a page-by-page basis – for instance setting up a row of photos on your homepage, putting text into 2 columns on your About page, or putting newsletter signup form on your Contact page.
Some content blocks are incredibly powerful and adaptable. For example, there is a content block called a Gallery Block, which allows you to embed a photo/video Gallery in any page, and set to to show it as a slideshow or grid. There's also something called a Summary Block, which allows you to pull in snippets of your latest blog posts into any page, and you can choose from a bunch of different styles. By using these powerful content blocks, you can effectively bypass your template's settings for how your blog homepage or photo gallery appears to your site visitors. WHAT?!? Yep, it's true.
My client Amanda didn't like the way the Bedford template's blog looks, so we created a standard page and used a Summary Block to show the post snippets in a list with thumbnails (see it here). The 'real' blog homepage is hidden, and this standard page is what the public sees. Get step-by-step instructions here in my blog post about the best Squarespace template for blogs.
So... using our above example: if you want an 'album' page to have a video in it, don't use an Album Page, just make a standard page with a video block and a bunch of audio blocks. And if your template's Gallery Page design is set as a horizontal scroller (like this), but you want a vertical stack (like this), no problem - just use a standard page with a Gallery Block instead of making a Gallery Page.
“The #1 mistake people make is to think that the demo site shows everything you get with that template. ”
Templates don't control site functionality
My final point when it comes to what templates do and don't control, is to say that templates do NOT control the functions or page types. Every template can have a blog, every template can have an online shop, every template can have an event calendar. Those are page types, and have nothing to do with the powers of the template. Every Squarespace website can use every page type. The only difference between templates will be the way those page types are setup visually.
The #1 mistake people make is to think that the demo site shows everything you get with that template. The number one mistake people make when choosing templates is to look at the template's demo site and assume that shows all the different things you get with that template. For example, the Avenue demo site doesn't include a Products page, so people think that they can't have an online shop if they use that template. Not true. The Julia template's demo site is a single page Index, so people look at that demo site and think they can't have any other pages if they use Julia. No way - you can have as many, and whatever kind, you like.
There aren't as many templates as Squarespace wants you to think
According to Squarespace, there are more than 50 website templates. In reality, there are just 18. What?! That's because 17 of the templates are clones of other templates (these are called "Template Families"). You can compare all 50+ (or 18!) and see which ones are family variants on my Squarespace template comparison chart:
Why would they do that? It's all about shag carpets.
Remember the number one mistake people make? Well, here's the number two mistake: people can't see past the shag carpets. When people go to look at houses with their real estate agent, most people can't see past the decor that's already in the house. They can't visualise the overall structure of the building without the flowery wallpaper and 1970s shag pile carpets. They can't imagine how their own belongings would fit in the space and how different it would look after a coat of paint and some new floors. It's the same with websites.
To try to get past this, Squarespace created variant templates that have different colours, fonts and other stylistic settings, to show how changing a few things in the Style Editor can make a big design difference. The demo sites for these variants are for different types of website than the original 'parent' template, too. For example, the Bedford demo site is for a non-profit organisation, but Bryant (a Bedford variant) is for a real estate agent:
Bryant, brother from another mother
The Pacific demo shows a restaurant, but Naomi (a Pacific variant) is a personal site for a wedding. Last but not least, you'll often find that the demo sites for the variant templates include page types that weren't included in the original template. For example, the Wav template (a variant of Brine) includes an Album page, which the Brine demo site doesn't have.
The easy way to think of the template variants within a family is to think of them like identical twins: one might dress like a goth, and another might dress sporty, but if you remove the eyeliner and swap the clothing, you could make one twin look exactly like the other. It's the same for template families: with enough tweaking, you could make any member of the Brine family look like any other member.
So I guess Squarespace would say that they're not really lying to you; they're trying to help you and other potential customers see past all the flowery wallpaper and imagine how a particular template family could work for your specific type of website and design preferences. I can understand the rationale and good will behind it, but...
It's needlessly confusing without a chart.
The annoying thing is that there isn't an easy indication from Squarespace which templates are clones of others (members of the same family). To figure this out, I had to install every template and play around with them, comparing them to each other. Luckily for you, I put all my notes into my detailed template comparison chart. Seriously - you need to check it out. Squarespace also have their own template family list, but it's not super easy to use.
Also, I think it is a little deceptive on their part to call these clones completely 'new' templates. At the very least, the names should to be somehow related to the original. Why not name the Brine variants something else to do with salt (Sodium template, anyone)? Or couldn't we have Bedford and Stuyvesant and other NYC borough names for that template family? Even better would be to just call them what they are: child templates. Nest them under the parent. That's what you do in WordPress and other systems, and it's so much easier to understand than this crazy mess.
Miko's top 5 template tips (TL;DR)
I could go on and on, but this is already a biblically long post (it is The Squarespace Template Bible, after all!). My full set of top template tips are in my Squarespace book*, so I'm not able to give everything away here for free, but here are the key takeaways from this blog post:
- Remember to mentally separate what the template controls, versus page types and page layouts.
- If you feel locked in by a template's Gallery, Blog, Album, Event or Product page styles, check to see whether a standard page with Gallery or Summary Blocks will do what you want instead.
- Try to see past the shag carpets: look beyond the demo site's purpose, content and style and try to imagine your own stuff in that template.
- Use my comparison chart to help narrow down your template, based on the elements that you definitely need for your own site.
- If you like a template that has variants, check the demo sites of the variants too - you might see something you missed or didn't know just by looking at the other variant.
Check it out on your local Amazon or Barnes & Noble, or:
Bonus tip:
I've also made a comparison chart for Squarespace Cover Page templates, in case you are thinking of using a Cover Page on your site. Find out what Cover Pages are and get ideas for how to use them here.