How to Choose The Right Template For A DIY Squarespace Website
Learn about the templates
Before you dive into building your website, you’ll want to pick the right template, straight from the beginning. (This is also a very important part of any kind of designing: having a vision and a plan at the beginning.)
Our strategic approach will help you understand the features of the different templates and help you create what you are envisioning.
You can switch from template to template anytime after you’ve started your site, but it can get pretty jumbled and sometimes you have to re-upload and add your content, so you’ll save time if you start off right.
Did you do your pre-build homework? If not, check it out here.
Grab your list of pages and the content you want to include on each page. It’s super helpful if you sketch out on paper what you want your layout to look like. It doesn’t have to look great, just draw some boxes and note what content will go in that space, like “team photo,” “product hero shot” or “about blurb.” This will help you decide on a template that actually fits your needs, instead of fitting your needs to the template.
Take a few to browse through the templates: https://www.squarespace.com/templates
Don’t click on “Get Started” yet, but take some notes, and use the heart icon to favorite some you like. Taking a little time before you start will help you understand the rest of this guide.
Squarespace’s templates are grouped into families, which means that that all of the templates you’ve just browsed through are based on a few master templates, that have all the same underlying structure and features. Squarespace has styled the master templates differently to give you a better idea of what you can do with them.
template families
Here are the current template families, from the Squarespace website:
Adirondack family: Adirondack
Avenue family: Avenue
Aviator family: Aubrey, Aviator
Bedford family: Anya, Bedford, Bryant, Hayden
Brine family: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
Farro family: Farro, Haute
Five family: Five
Flatiron family: Flatiron
Forte family: Forte
Galapagos family: Galapagos
Ishimoto family: Ishimoto
Momentum family: Momentum
Montauk family: Julia, Kent, Montauk, Om
Native family: Native
Pacific family: Charlotte, Fulton, Horizon, Naomi, Pacific
Skye family: Foundry, Indigo, Ready, Skye, Tudor
Supply family: Supply
Tremont family: Camino, Carson, Henson, Tremont
Wells family: Wells
Wexley family: Wexley
York family: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York
FYI: you can find any of the templates we’re about to cover by typing its name into the search bar, on the Templates page:
not all templates have the same features
Not all Squarespace Templates have the same features. Take a quick look at the comparison charts, but I’ve made a set that’s much easier to work with. Also, please note: the Squarespace template comparison charts aren’t up-to-date with logo and navigation alignment.
A lot of designers and bloggers suggest just starting with a template in the Brine Family. Brine is a fantastic and very flexible template, but it won’t work for you if it doesn’t have some features you want, such as a sidebar for your blog or a background image. It’s worth the extra few minutes to make sure it’s the right one for you. (Though, if parallax scrolling is a must-have, it’s the only template that includes it. You may stop reading now, and pick your favorite template from the Brine Family.)
The Bemboom Design Template Charts
These Squarespace template comparison charts will help us see if a feature or layout that you want on your site is available or not. I’ve broken down the most important and unchangeable features (without using custom code). If you are not super familiar with HTML5 and CSS, it’s better to start as close as possible to the site you want, as it can get frustrating and it’s possible break your website, if you make a mistake. (Of course, reach out if want a custom website!)
These charts make it easy to start with the right template. First, choose where you’d like your logo. I’ve created a chart for left-aligned, center-aligned and right-aligned logos. On your chart, mark out the other features that are important to you. An easy way to do this would be to print out the PDF, and star the features you want. This will lead you to your perfect template, or few template families to choose from, or it will show you that all the features you want aren’t available on one template and you may need to make trade-offs or hire a designer.
A few things like a fixed header are pretty easy to add with custom code or are not common requests, so I didn’t include them. But if you KNOW you want a fixed header, please add a column or notes to your printout and fill it in with info from the Squarespace charts, and only consider those templates.
Once you’ve narrowed down your templates using the charts, take a look at the template previews, but more importantly read carefully through the template’s page, like this one: https://support.squarespace.com/hc/en-us/articles/212512738
An example
Let’s say you want your logo on the left. Grab the Left-Aligned Logo chart.
Then think about other features that are non-negotiable for you. You know that you need a sidebar for your blog: mark all of those templates. When you were flipping through the templates, you loved the Grid Index page, so you can mark those. That leaves you with Avenue and Montauk. Take a look at what varies on their chart, then check out their individual template pages (Avenue + Montauk) and take a look at the templates in their families.
Special Exceptions
To simplify matters, I’ve left out a few template families that I consider to be specialty templates. These templates have a layout where the header and navigation need to be on the left or right hand sides. This can be a cool look, and a variation from what you usually see, but there are so few available that if you want this layout, you can evaluate them easily.
Skye Family: Foundry, Indigo, Ready, Skye, Tudor
Supply family: Supply
Wells family: Wells
Also, a few features, noted on the charts, are only available on one template. If you know you want one of these, you’ll have to use the corresponding template.
Parallax Scrolling: Brine
A Site Wide Sidebar: Five
A Project Page: York
A Unique Store Page: Galapagos
A Different Background Image On One Page: Aviator
Have fun!
With a little thought and planning you can “Get Started” confidently! Play around with the demo content on your chosen template to get a feel for it, and then start building!
If you come up against an issue with your template down the line, these features can be altered by a designer, but you’ll need much less help if you start close to your goal.
Have any questions? Let me know in the comments!