How to Customize Your Squarespace Website: Part 1

 | 
By Zach Stuart

When you build a site on Squarespace, you may feel limited in the customization department. I remember having this feeling when I first started my site design for Sarasure. While customization may seem a little hard to come by on Squarespace, I'd like to share my secret solution with you. I'm able to make small tweaks to client website templates with the help of my secret weapon: my husband/web developer, Zach.

Now that the cat's out of the bag, I've asked Zach to share some of his coding insights in this two-part blog series. Part 1 will focus on how you can customize your Squarespace website by utilizing individualized code blocks and custom CSS on each page. Then on Thursday, we'll dive even deeper using Squarespace's developer mode.


Plenty of developers out there will tell you offerings like Wordpress, Joomla, or Drupal are better options over Squarespace when creating a new website for your business. These developers may even go as far as stating that Squarespace blocks you from any real customization, thus hindering your ability to be diverse. As a developer, I am here to inform you that Squarespace does in fact possess a utility-belt like level of customization that allows you to achieve personality in web design.

How to Customize Your Squarespace Website: Part 1

To start, Squarespace does a great job of enabling you to make lower level customizations to your website through the many menus found under the Design tab. However, you may run across changes that you’re unable to perform through the normal Squarespace menus; this is where code comes in.

There are two areas within the normal Squarespace menus that utilize code to bring a higher level of customization to your website.

  1. Applying custom CSS (Cascading Style Sheets) to alter the appearance of your website.

  2. Introducing individual code blocks to the content portions of your website.


Applying Custom CSS


First, it is important to know the location of the Custom CSS menu. From within your Squarespace admin portal, open up the sidebar and click on the Design link. From there, locate Custom CSS towards the bottom of the menu. In the next sidebar menu, there are three important elements to notice.

  1. Open in Window button
    This button opens the coding pane in a new tab to allow for an easier view when editing CSS code.

  2. Coding Pane
    Below the button is the normal version of the coding pane. This is where CSS is either added, altered or deleted. Keep in mind that the coding pane expects code to be in a specific format, so syntax errors may occur if the code isn’t formatted properly.

  3. Manage Custom Files Button
    This button enables you to upload an image for use in the Custom CSS area of the site. After uploading an image, clicking on the name of that image will add a link referencing that image to your cursor location in the coding pane. This is especially important when using the CSS background attribute.

Let’s put Custom CSS to the test by addressing two annoyances that I have noticed in Squarespace. First, the font-size across different form elements is not always uniform. Second, the font in form elements defaults to Arial or Helvetica - not the custom font assigned to your website. To fix these issues, we can add the following lines of code to the coding pane.

.form-wrapper .field-list .field .field-element {
  font-family: inherit;
  font-size: 14px;
}

With this change in place, hit save and check out the now uniform forms.

Of course, in order to utilize this section fully, an understanding of CSS is required. Luckily, great sources exist, such as Codeacademy’s free web course, which will also teach you HTML. After running through the lesson, you should be armed with enough knowledge to fully utilize the Custom CSS section to make your Squarespace website your own.


Individual Code Blocks


Individual code blocks exist as blocks, and can be added when editing any content area of your website. In order to add one, simply add a new block, and select the Code menu item as seen below.

Once Code has been selected, you will be prompted with a new dialog labeled Edit Code. This dialog contains three main elements.

  1. Display Source checkbox
    The Display Source checkbox displays the actual code, rather than what the browser will render it as. For the normal user, this should usually remain unchecked, and should only be checked for those that wish to display the actual code in a friendly format to their readers.

  2. Code Type Select Box
    To the right of the Display Source checkbox is a select box with five different options, where HTML is the default. Here is a rundown of what we can do with the five different types.

    1. CSS: Only for displaying actual CSS code for the audience to read.

    2. HTML: Can either be utilized to inject HTML code for rendering, or for the audience to read the actual code.

    3. Javascript: Only for displaying actual Javascript code for the audience to read.

    4. Markdown: Can either be utilized to inject Squarespace Markdown code for rendering, or the audience to read the actual code. (There isn’t much use for this option because you can use a markdown block instead.)

    5. Plain Text: Only for displaying plain text for the audience to read. (There isn’t much use for this option because you can use a plain text block instead.)

  3. Coding Pane
    Below the previous two items exists the coding pane. Since HTML is really the only rendered code that should be utilized here, it will generally contain the actual HTML code.

Full utilization of this section requires an understanding of HTML. As mentioned above, Codeacademy’s free web course can equip you with these proper tools.


Contrary to popular belief, Squarespace isn’t just a basic template editor. It simply provides users with the proper tools to further customize their website. These two sections can accomplish many of your customization goals including, but not limited to, the creation of custom social media icons, drop-down navigation menus, and personalized call to action buttons. Stay tuned for Part 2 on Thursday when I go over the benefits (and some detriments) of turning on developer mode to gain even more granular control over your website.

Would you like more custom design guides, like creating social media icons for your Squarespace website? Subscribe to the newsletter below to show your interest.