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!

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.

Why I Chose to Build My Website on Squarespace

 | 
By Sara Stuart

When you dive into the world of entrepreneurism, you'll come face to face with a ton of decisions right off the bat. One of my earlier decisions consisted of finding a reliable website builder that I could easily use as a designer with limited coding skills. I had worked with WordPress sites in the past for client blogs, but the user interface and overall experience had left a sour taste in my mouth.

It wasn't until I joined the Freelancer’s Union, that I then discovered Squarespace. I found myself signing up to use their free 14-day trial and I haven't looked back since. Today, I'd like to talk about this decision in detail and explain why I recommend this website builder to my clients.

Why I chose to build my website on Squarespace

First, let me explain what these two website builders have in common and how they differ.

Squarespace and WordPress are both solutions to a problem. They provide easy to make websites that are as equally easy to manage for DIY business owners, like myself. Each platform is pretty blog friendly, includes metrics for tracking visits made to your site, and have decent content management systems (more popularly known as CMS). If you can't afford to hire a talented web developer or designer, there’s no need to worry. These two platforms have you covered.

The only downside is that they both have their own set of limitations. Before we run a comparison between the two, it’s important to ask yourself the following questions to determine whether their shortcomings could deeply affect you and your business:

  • Who will be updating your website? If you're prepared to manage your website by yourself, you're going to need a CMS that’s simple and time efficient.

  • What is your overall budget? When you're just starting out, you’ll need to keep costs as low as possible. Consider every service you’ll need in order to keep your day to day business operations going and see which platform will give you the most bang for your buck.

  • Do you need a company email address? (i.e. hello@yoururl.com.) This is an example of a separately paid service found on Google Apps. It’s a great tool that keeps your office email separate from your personal gmail account and leaves you looking mighty professional to your clients.

  • What other tools do you need to integrate into your website? Google Apps. shouldn’t be the only thing to consider. Take some time to research what you'll need integrated on your website before you look for website builders.

  • Will you be selling products on your website? If you plan on selling products, you'll need a platform that supports an e-commerce website and makes it easy for you to manage your inventory.

  • How tech-savvy are you? If you're new to the internet or social media, I'd suggest starting out with the simplest CMS and website builder possible. It also wouldn't hurt to hire an assistant or take a class on managing an online business.

Once you've taken the time to answer these questions and have a grasp on what you'll need out of a website builder, it’s time to research and compare. Here’s my general analysis on each:


WordPress vs Squarespace


WordPress

WordPress is best known as a haven for bloggers. Built on an open source platform, this allows you to completely customize and enhance the functionalities of just about every aspect of your website. If you want to connect a WordPress blog to a custom designed website, you got it. Some even go as far to say that the website and blog SEO optimizations are more advanced than other website creators thanks to WordPress’s endless supply of plugins (source). These functions are just a few reasons why there are so many supporters of this platform. 

Unfortunately for WordPress, they have their fair share of flaws. Like any open sourced platform, everyone can submit a plugin. This can be both a good and bad thing. I personally see this as more of a risk because your website will be subjected to every type of developer once you download multiple plugins. If you get a freebie for example, developers are not required to fix this plugin for you if things turn ugly. Faulty plugins can affect the performance of your website and will require more work from you in order to fix it. Another issue lies in their customization capabilities. In order to create the website of your dreams, you'd have to know a good deal of HTML, CSS, and PHP. After that, you'll need to learn their CMS if you're a first time user. Just be aware that there’s a definite learning curve.

 

Squarespace

Squarespace is a conventional website builder that liberates users from having to write code by providing a handful of quality, responsive website design templates to choose from and customize. Everything you see is created, tested, and managed by their in-house staff, so integrations between special tools flow beautifully. You’re able to connect social media icons, your Google Analytics account, MailChimp, business email through Google Apps., Stripe, and more with just a click of a mouse. This builder even has a drag and drop function that makes customizing and updating your website a simple and enjoyable process. Throw in an automatic mobile layout and you’re as good as done!

By comparison to WordPress, Squarespace is not an open sourced website, so your design and functional capabilities are a bit more restrictive. For some people, this cookie-cutter look isn't as desirable as a custom-built website, but Squarespace does feature a developer mode where users can input their own CSS styles, HTML, and PHP code. However, you'll need to know your way around these coding languages in order to make minor changes. Another flaw for Squarespace users amounts to support for new tool integrations. In other words, we can't very well use PayPal as an online payment processor over Stripe because Squarespace does not support this integration just yet.

Keep in mind that these are very general comparisons between WordPress and Squarespace. If you're interested in knowing more about these two platforms, I recommend looking at this side by side comparison chart for further capabilities and limitations.


4 Reasons Why I Chose Squarespace


Now that I’ve briefly compared WordPress to Squarespace, allow me to show you my personal reasons for choosing Squarespace to build Sarasure.

 

1. It’s Easy to Use

My ultimate goal was to find a website builder and CMS platform that was easy enough to use and update. I knew that I would be writing blogs at least once a week, so scheduling content was another tool I absolutely needed. Then, I considered customization options and found the drag and drop interface with module build-outs to be super innovative. Overall, when I dug into Squarespace’s free trial, I was pleasantly surprised to find how easy (and fun) it was to accomplish each task.

 

2. Templates are Thoughtfully Designed

To be honest, my initial attraction to Squarespace began when I saw their magnificent template design collection. I was enticed by the modern, flat aesthetic and thought it would mesh well with my own for Sarasure. After I looked through their website content, I was very pleased that each of their templates were designed to be responsive because mobile websites are such a necessity for any business owner. I was a little concerned with their SEO capabilities, but these worries were resolved once I read through their forums and found this page.

 

3. It’s Worth the Investment

Squarespace’s pricing plans fall into three different tiers and range from $8 - $26 per month. Each plan includes a responsive site with access to all template designs, hosting, a custom domain name, ecommerce integration capabilities, unlimited bandwidth and storage, and 24/7 customer support. With all of these benefits, I thought it was well worth the investment.

 

4. Customer Service is Quick and Updates are a Breeze

Squarespace’s customer service team has a 24/7 customer support staff, a live chat, a community forum, and plenty of tutorial videos to guide you if you lose your way. If you send them an email, they make it their policy of responding back to you within a hour of submission. As if that wasn't enough, their development team handles all of your site and tool updates themselves. It’s really never been easier to create and maintain a website.


In conclusion, I chose Squarespace because it fit my business model and has served as a tool for my website design services. I no longer need to charge my clients extra to contract out a web developer because Squarespace does everything for me and more.

Are you looking for a new website builder? What are your thoughts on using Squarespace? Let me know in the comments below!