How to Customize Your Squarespace Website: Part 2

By Zach Stuart

In my last blog, I talked about how Squarespace allows you to make deeper customizations to your website, provided that you know some HTML and CSS. Part two of this blog explores Squarespace’s Developer Mode, and how it enables you to make higher level changes to your blog. However, it’s important that you take caution when it comes to the word developer. Usually, a high-level understanding of code is required. 

On another note, if you’re interested in learning more about Squarespace’s Developer Mode, this is the place to be. Just be sure to read through this entire blog before performing any of the changes mentioned.

How to Customize Your Squarespace Website

Squarespace's Developer Mode

Developer Mode is Squarespace’s response to those who require a more granular level of changes to their website. Squarespace provides a developer centric website complete with full documentation for editing, guides to set up your coding environment, and an overview of the file structure of the template (amongst other things). In order to utilize Developer Mode, you will have to meet the following requirements:

  1. Be on the business or commerce package.
  2. Have an extensive knowledge of web development, or access to somebody that does.

Once these requirements are met, you’re almost ready to turn on Developer Mode. However, I must inform you of the risks, and provide you with a disclaimer.

Risks: Turning on Developer Mode will save all the changes you have made to your template up until you turn it on. However, any further template bugfixes performed by Squarespace will not make it to your website. If you ever wish to turn off Developer Mode, your template will return to the stock template and all of your previous/developer template changes will be lost.

Disclaimer: Sarasure and I are not responsible for any issues that may arise by turning Developer Mode on, nor will we provide any support. Only those that know what they’re truly doing should progress further.

Activating Developer Mode

In order to activate Developer Mode, start by logging into your Squarespace admin portal. From there, open up the sidebar and click Settings, followed by Developer Mode. From here, toggle the developer switch to on. A disclaimer will appear informing you of the changes Developer Mode will make to your website. If you agree to the terms, then continue on.

It is important to reiterate, that any changes you have made up until this point will be saved, but turning the Developer Mode will reset your template to the original stock template, so use this feature at your discretion.

For those of you that are still with me, the Developer Mode sidebar will have a lot more options. Here is a quick rundown of each section:

1. Connectivity Details
The connectivity details are needed in order to make changes to your templates with Squarespace providing two ways to alter the template code.

A. SFTP (SSH File Transfer Protocol)
In order to set up SFTP correctly, you’ll need to install a client. In the past, I have personally used FileZilla due to its ease of use. Once your client has been installed, set up a new connection with the SFTP Hostname, SFTP Port, Username, and Password displayed on the sidebar. The password will be hidden, but it’s the same one that you use to log into Squarespace.

B. Git
Personally, I prefer to use Git as it allows me to keep a history of the changes I made. Git can also be used amongst teams that wish to work on the same code base at the same time. (Here's more information regarding Git.) In order to get started with Git, start by cloning the repository found next to Git Repository.

2. Template Configuration
Information regarding the base template that you chose to create your website from.

3. Template Audit
Any errors that Squarespace has detected in your template.

4. Collections
Template information regarding each of the Collections (Folder, Album, Index, Blog, Gallery, Events, Products). The configurations of each of these items can be changed by altering the .conf files in the template code base.

5. Git History
As mentioned before, I choose to use Git because it provides me with a history of my changes. The last item in the sidebar is a history of the changes you have made through Git. Additionally, each of these items contain when the change was made, the comment that was added to the change, and the user that performed the changes.

Adding the Author

Some Squarespace templates may not give you the ability to edit or add an author name through their CMS. For example, Sarasure was built using the Avenue template, and the design didn’t have this previously set. With the knowledge you possess of the Developer Mode, let’s go ahead and test it out by adding the author's name to each of our blog posts. 

Step 1:  Open your favorite code editor. I prefer to use Sublime Text, but any code editor will do.

Step 2:  Within the code base, open up blog.list and blog.item

Step 3:  In each of the files, locate the code that looks similar to what’s below.

Step 4:  From there, within the meta class, copy the span tag and paste it directly below. From there, change the span tag to look like:
<span class="date"><address class="author">By {author.displayName}</address></span>

Step 5:  Currently, there won’t be much (if any) spacing between the published date and the author, so add &nbsp;&nbsp;|&nbsp;&nbsp; to the end of the first span tag.

Step 6:  If everything was done correctly, your code should look very similar to the code below.

Step 7:  Push your changes to your website with whatever connection method you chose to use.

As you may have noticed, Developer Mode involves only code, so only use it if you’re sure you know what you’re doing.

In conclusion of this two-part series, Squarespace should not be thought of as a cookie-cutter website creator, but rather as an incredibly versatile tool that allows you to create a website the way you want. The Developer Tool provides you with almost total control over your template, but should only be used by those that are comfortable in a coding environment. Stay tuned for more technical blogs regarding the operations of Squarespace.

Have you ever used Squarespace’s Developer Mode? Would you be interested in learning more about this topic? Let us know in the comments below!