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.

More...

Yay!

Nay!

  • 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:

Squarespace templates

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:

Squarespace templates - hover-over

2) You can add any of the templates to your favorites list by clicking the Heart icon next to the template name:

Squarespace-templates - hover-over - heart

3) Clicking the Preview link takes you to the preview mode of the template:

Template - preview-mode

4) Once you are in the preview mode, you can check how the particular template looks on different devices:

Responsive views

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:

View template - demo

This view shows you how the actual website would look if you installed this template on your website:

Template demo

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.

Template comparison charts

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:

Create a site

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:

Pick a template

3) Give your site a title, and click Next:

Site title

4) Give a brief description of what your site is about. Once you have done that, click Done:

Site - desc

5) Boom! Your site has been created with the template you have chosen:

Brine

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:

Account

Choose the preferred site you want to work with. After you have done that, choose Design option situated to the left:

Design

Once selected, choose Style Editor:

Style - editor

And voila - you have Style Editor in front of you (a partial screenshot is shown here):

Style - editor - partial

The style settings shown on this particular page are the following:

  • Site Header
  • Site Navigation
  • Page Banner
  • Main Content
  • Index
  • Index Overlay
  • Index Gallery
  • Prefooter
  • Footer
  • Opentable Block
  • Buttons

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):

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:

Events

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.

Design

4) Pick Template:

Design-Template

5) You have now entered the Template view:

Design - 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.

Change - template

7)  Once the template has been installed, you’ll see it under the active template on the left:

Template - changed

8) Hover over the installed template and click Preview button:

Template - hover-over

9) The new template is now in the preview mode.

Template - preview - live

If you are happy with your new template, click the Set as Live Template button at the bottom:

Set as live

10) You are asked to confirm your template change. Click Confirm on the next view:

Enable - template

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:

Uninstall old template

Customizing Templates

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.

However, if you want to tweak your templates even further, and you are also competent with HTML, CSS and JavaScript, you can modify the templates’ coding as well.

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.
  • JavaScript: Code Injection.
  • Displaying raw code as plain text (for instance on a page): Code block with “Display Source” checked.

All Plans

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:

Account

2) Choose Custom CSS under the Design menu:

CustomCSS - Custom CSS

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:

Custom CSS - Editor

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:

Page - Edit Mode

2) Once you’re in edit mode, click the Plus icon on the page:

Plus sign

3) Choose the Embed menu:

ChooseEmbed

4) Enter the URL for the external data source into the URL field:

Embed Block

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:

Page - Edit Mode

2) Once you’re in edit mode, click the Plus icon on the page:

Plus sign

3) Choose the Code icon under the More section:

Code Block - More

4) The Code editor opens:

Code Block - Code Editor

You can then enter or paste the content in various ways (as HTML, CSS, JavaScript, etc.). But depending on how the Display Source is selected, you’ll see different results.

For instance, if the Display Source is selected, the code displays as raw code, and it is also formatted to achieve greater readability:

CustomJS with Display Option

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:

CustomJS without Display Option

For instance, in the previous screenshot, I wrote a piece of JavaScript code, but the Display Content checkbox is unchecked. This means that the actual result of the JavaScript code is displayed.

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 JavaScript code with <script></script> tags.
  • Enter HTML as is.

In all honesty, I think that the Display Content option is a bit misleading. 

For instance, if I was to write JavaScript, I would naturally choose the JavaScript option from the dropdown. But as I just told you, you have to choose HTML if you want to display JavaScript generated content on your page. This makes sense because the generated output is HTML.

Using the Site-wide Code Injection

Code Injection is used to add pieces of HTML or JavaScript to your site (for instance, services like Live Chat or Google Translate). However, it is not recommended to add custom CSS this way.

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:

Code Injection - Settings

3) Then choose the Advanced menu under the Website and there pick Code Injection:

Code Injection - Advanced2

Once you have reached the Code Injection settings, you’ll see that it is divided into four parts:

Header

The code is injected into the Header section of your site, and every page of your website is affected.

Code Injection - Header

Footer

The code is injected into the Footer section of your site, and every page of your website is affected.

Code Injection - Footer

Lock Page

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.

Code Injection - Lock Page

Order Confirmation Page

The injected code is displayed in the order confirmation page, when the customer checks out:

Code Injection - Confirmation Page

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:

Custom Code - Pages

3) Pick a page to edit: 

Custom Code - Pick a Page

4) Hover over the content area and then choose Settings in the menu that becomes visible:

Custom Code - Settings

5) On the Page window, choose Advanced:

Custom Code - 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:

  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 blog to edit:
Custom Code - Pick a Blog

6) Once the blog loads, hover over the content area and choose Settings:

Custom Code - Blog Settings

7) On the Blog window, choose Advanced tab:

Custom Code - Blog Advanced

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.

Conclusion

Squarespace offers you plenty of options when working with their templates. 

For instance, you can change a template in the middle of the design process. Or, if you are competent with code, you can tweak the existing templates with HTML, CSS and JavaScript.

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.

Timo
 

I'm into building websites and writing detailed reviews about site builders. When I'm not at my computer, you can find me spending time with my family or training for marathons or for triathlons.

Click Here to Leave a Comment Below 0 comments

Leave a Reply: