Squarespace Templates: How to Get Started
Squarespace has plenty of options to offer when it comes to templates, at least when compared to many other site builders.
In this post, we are going to be looking at Squarespace templates, how to install them, how to change an existing template, and plenty of other things that you need to know about Squarespace templates.
- Templates may be changed in the middle of the design process.
- Multiple templates to choose from.
- You can see a full live demo of the site with the template you have chosen.
- The majority of templates may look the same.
- The theme marketplace doesn't include showcases of live Squarespace sites.
Introducing Squarespace Templates
To see the full selection of templates, you should visit the templates page:
Once you visit the page, there are couple of things you should know:
1) When you hover over any particular template, you’ll see two options: You can either choose the template for your site, or you can preview it:
2) You can add any of the templates to your favorites list by clicking the Heart icon next to the template name:
3) Clicking the Preview link takes you to the preview mode of the template:
4) Once you are in the preview mode, you can check how the particular template looks on different devices:
All the Squarespace templates are mobile responsive, meaning they work across different devices.
5) You can also run the template in a demo environment by clicking the View Template Demo link:
This view shows you how the actual website would look if you installed this template on your website:
Understanding Template Families
Working with a template directory is easy, but there is something you should be aware of when it comes to templates: template families.
Each of the templates that Squarespace provides belong to a certain family. According to Squarespace, “Templates in a family share an underlying structure and functionality, although they may look very different.”
For instance, there are four templates that belong to the Bedford family: Bedford, Anya, Bryant and Hayden. They all share common characteristics, and they are all a good fit for certain types of sites.
Bedford is suitable for a variety of sites, from non-profits and real estate websites, to wedding announcements.
To see the list of all the features in a given template, visit the template comparison page.
For example, if I look at the Bedford template under the Site Layout section, I can see that the title and the logo are displayed on the left, but the tagline option is unavailable.
The comparison chart is, in my opinion, not for the faint-hearted. It takes a bit of time to understand what some of its options mean. Still, it can be a good aid when picking the right template for your site.
Installing a Template for Your Site
The template installation process is straightforward as it happens to be part of creating a new site.
1) Log in to your site and click Create a Site button in the top-right corner:
2) Pick the template you’d like to use for your site by hovering over it in the template directory and then clicking the Start with <your theme name> button:
3) Give your site a title, and click Next:
4) Give a brief description of what your site is about. Once you have done that, click Done:
5) Boom! Your site has been created with the template you have chosen:
Now it’s time to start tweaking the site for your needs. And to do that, you should use the Style Editor for this.
Using the Style Editor
You can access the Style Editor by first choosing the Account in the top right of the page:
Choose the preferred site you want to work with. After you have done that, choose Design option situated to the left:
Once selected, choose Style Editor:
And voila - you have Style Editor in front of you (a partial screenshot is shown here):
The style settings shown on this particular page are the following:
- Site Header
- Site Navigation
- Page Banner
- Main Content
- Index Overlay
- Index Gallery
- Opentable Block
It would be difficult to see which of the settings affect which part of the page. Fortunately, Style Editor includes a visual helper, showing the part of the page when you hover over a particular style setting.
For instance, when I hovered over the Site Title Color setting under Site Header, a related area of the page was activated (see the blue rectangle):
Style Editor settings are dynamic, and it shows options which are based on the type of page you are editing. The following pages show settings specific to that page:
- Cover Page
- Blog Page
- Events Page
- Gallery Page
- Index Page
- Products Page
For instance, when I added a test Events page to my site, I saw this new section under the Style Editor:
There is much more to Style Editor than what I covered. To read the full documentation, I encourage you to look at Squarespace’s knowledge base article.
Beware of Falling into the Beautiful Template Trap!
So, you looked at a certain template, and it looked good. You were stunned because you could vividly imagine what your new shiny site would look like.
You head over to the Squarespace themes page, pick your theme and you are all set!
Everything looks good so far. Then you start changing the copy of the page to make it reflect your brand and your business.
You also decide to change the images of the template you have just chosen. Of course, you could just keep the images as is, but since your competitor is using the same template (with its default imagery), you want to differentiate your template from them by picking new images.
But as soon as you change the image, the disappointment is huge: your site, although it looks different to your competitor’s, doesn’t look good anymore. The pictures that you added are not that sharp. And the ones which actually are sharp, are not so colourful as the ones in the default template.
My friend, you have fallen into a Beautiful Template Trap!
In other words, looking at a template on the themes page or in a demo may look good. But when you start modifying the template to your needs, it doesn’t look so compelling anymore.
If you rely on (big) images on your site, ) hire a professional to take “delicious pictures” for your site (unless you are a photographer yourself). Alternatively, you could also pick a template which doesn’t use images that heavily.
Finally, you could also pick new photos from stock image sites to replace the default ones in your template. If you choose this option, you should always remember that someone else could be using these same images as you.
What the template looks like on an online site builders theme page or on a third-party theme marketplace is most likely not what your site will eventually look like.
Changing a Theme
Squarespace makes it easy to change the existing theme on your website. Just follow these steps:
1) Log in to your account.
2) Go to Sites view, then pick the site you want to edit.
3) Choose Design in the menu located on the left.
4) Pick Template:
5) You have now entered the Template view:
Just click the Install New Template button to get started.
6) You are taken to a template selection page. Pick the template you’d like to use next.
7) Once the template has been installed, you’ll see it under the active template on the left:
8) Hover over the installed template and click Preview button:
9) The new template is now in the preview mode.
If you are happy with your new template, click the Set as Live Template button at the bottom:
10) You are asked to confirm your template change. Click Confirm on the next view:
11) The new template is now activated. If you want to uninstall the old template, hover over the old template situated to the left and click Uninstall:
This section is not about teaching you to write code. I’m just presenting some options to get you started with template customizations.
Whenever you are making changes to your site, you are actually generating HTML and CSS without having to write the code yourself. This is, of course, the preferred way of changing the existing template you are using.
Currently, there are a couple of things to remember whenever you take this route:
- Some options for adding code are available on all plans:
- Custom CSS Editor: Modify fonts, colors and backgrounds. However, CSS shouldn’t be used for setting padding and positioning.
- Embed Block: Embed content from external sources by using the oEmbed standard.
- Some options for adding code are only available in Business plan and higher. These include:
- Code Block: Adding code within a page’s layout.
- Site-wide Code Injection: Inject code to your site’s header or footer.
- Per-page Code Injection: Inject code that affects a certain page.
- Customer support cannot assist you with code customizations.
- Adding custom code may conflict with your template’s default code.
Whenever you are adding code to the platform, you should try to use these methods that Squarespace provides:
- HTML: Code Block.
- CSS: CSS Editor.
- Displaying raw code as plain text (for instance on a page): Code block with “Display Source” checked.
Adding Code Through Custom CSS Editor
To add code through Custom CSS editor, follow these steps:
1) Access your account by logging in and then using Sites on the top-right menu:
2) Choose Custom CSS under the Design menu:
3) Once the editor opens, you can display it in a full window by clicking the Open In Window button. Alternatively, you can also add images or font files when you click the Manage Custom Files button:
Using Embed Block
Embed blocks are useful for integrating external sources of data to your site, like links to tweets.
To use the Embed Block, take these steps:
1) Choose a page for editing:
2) Once you’re in edit mode, click the Plus icon on the page:
3) Choose the Embed menu:
4) Enter the URL for the external data source into the URL field:
5) You can also use </> icon to enter the embeddable code.
6) Once the necessary URL is in place, click Apply.
Next we’ll look at three different ways of handling code, which are only available with Business plans and up.
Business Plans and Up
Using the Code Block
Code Blocks are used to include custom code in a page, blog post, sidebar or footer. Using the Code Block is also the preferred way of adding third-party widgets or customizing code that cannot be customized with other blocks.
To use the Code Block, take these steps:
1) Choose a page for editing:
2) Once you’re in edit mode, click the Plus icon on the page:
3) Choose the Code icon under the More section:
4) The Code editor opens:
For instance, if the Display Source is selected, the code displays as raw code, and it is also formatted to achieve greater readability:
On the other hand, if you want to display the result of a piece of code, you should choose either the HTML or MarkDown options. These options render custom code’s generated content:
When you add custom code through code blocks, and you want to see its generated output, either choose HTML or MarkDown options from the dropdown and:
- Enter CSS code within <style></style> tags.
- Enter HTML as is.
In all honesty, I think that the Display Content option is a bit misleading.
Using the Site-wide Code Injection
To access the Code Injection, follow these steps:
1) Log in to your dashboard and choose a site to edit.
2) Choose Settings in the menu situated on the left:
3) Then choose the Advanced menu under the Website and there pick Code Injection:
Once you have reached the Code Injection settings, you’ll see that it is divided into four parts:
The code is injected into the Header section of your site, and every page of your website is affected.
The code is injected into the Footer section of your site, and every page of your website is affected.
Lock Pages are hidden pages and are either site-wide or per page. The injected code will be displayed on top of the lock screen’s password field.
Order Confirmation Page
The injected code is displayed in the order confirmation page, when the customer checks out:
Using the Per-page Code Injection
Code can also be injected on a per-page basis. To access page-level Code Injection settings, follow these steps:
1) Log in to your account and choose a site to edit.
2) Choose Pages in the menu situated on the left:
3) Pick a page to edit:
4) Hover over the content area and then choose Settings in the menu that becomes visible:
5) On the Page window, choose Advanced:
This adds code inside the <head> tag of the page.
If you have a blog, the per-page code injection affects every post. To see the blog post-related settings, follow these steps:
- Log in to your account and choose a site to edit.
- Choose Pages in the menu situated on the left.
- Pick a blog to edit:
6) Once the blog loads, hover over the content area and choose Settings:
7) On the Blog window, choose Advanced tab:
Enter your code into the Blog Post Item Code Injection section. The code is injected right after the content part of the blog post.
For website templates with Grid/stacked Blog Page, injected code is displayed on the blog landing page, but not on individual posts.
Overall, working with code on your Squarespace site is a big topic to cover. To learn more about using code with Squarespace templates, refer to this article.
Squarespace offers you plenty of options when working with their templates.
Working with templates on the Squarespace platform is straightforward, although I recommend that you also take a good look at the documentation they provide, which is related to this subject.