How to get a Squarespace template designed

If you want to want your Squarespace website to stand apart from all of the others you need to customize the coding of your template. Learn how.
Jun 17, 2020 • 7 minute read
Edward Kost @EdwardKost
Technical Co-pilot
Cover photo for How to get a Squarespace template designed

Μείνε Ενημερωμένος/η

Κάνε εγγραφή στα ενημερωτικά μας δελτία για να μείνεις ενημερωμένος/η για τα θέματα που έχουν σημασία.
Ευχαριστούμε για την εγγραφή! Για την επόμενη μας ενημέρωση δες τα εισερχόμενα σου.

Design a Squarespace template that will turn your visitors into customers (and maybe even best friends)

Squarespace is a pretty impressive drag and drop web designer, but that's just the tip of its design iceberg. Not many people know that it's possible to customize Squarespace templates beyond its drag and drop capabilities.

In this post, we'll unravel Squarepaces's hidden customization possibilities and show you how you can work with web designers and developers to power up your Squarespace website.

Why get a custom squarespace template designed?

Squarepsace offers over 60 highly customizable templates, and you can do a heck of alot with its impressive drag and drop builder, so why bother customizing it further?

The simple answer is that, like all drag and drop builders, Squarespace has limitations. So if you really want to flex your design muscles, you'll eventually run into a dead end. To customize a Squarespace template beyond its capabilities, you need to inject some custom coding into its DNA.

Here are some examples of Squarespace features that can only be implemented with some custom coding.

  • Change a button hover cover

  • Captivating dynamic backgrounds (example 1, example 2)

  • Parallax banners 

  • Displaying the mobile navigation on all platforms (computer and mobile)

  • Display text to an image on hover

  • Adding a 'preorder' badge to ecommerce products

  • Adding custom ecommerce product baged (eg 'new' or 'great gift idea')

And much much MUCH more!

Because such features are not common amongst Squarespace templates, If you implement them, your website will be elevated above the highly competitive design arena of all Squarespace websites (including those of your competitors).

Should you hire a web developer or a web designer to customize a Squarespace template?

The terms web designer and web developer are often used interchangeably but their roles are different.

A web designer focuses on the aesthetics of a website, this component of web coding is known as CSS styling. CSS styling affects things like the color palette, the placement of the elements and how the overall website looks. This is very important because if a website is not visually appealing, visitors will bounce off and settle for a website that's more interesting to navigate.

Navigation is another very important aspect of design that web designers work on. User experience (a measure of how intuitive your site is to navigate) is very important for SEO and web designers use visual cues to guide visitors through all of the functions of a website, 

A web developer, on the other hand, codes up all of the functionality of a website. In other words, a web developer establishes what a website does and a web designer establishes how a website looks. Web developers code in HTML and Javascript.

So who should you hire to design your Squarespace template.

If you only want to adjust the styling of your Squarespace website you should hire a web designer. If you want to modify or add functions, you should hire a web developer. 

That being said there are many web designers and developers that are very capable in both spectrums of website creation, you'll be able to identify whether this is the case in their listed skill sets (more on that shortly).

How to hire a web developer or design to modify a Squarespace template

When hiring a web designer or developer, you have 3 primary options to choose from. Below is a list of these options and a comparison of their average pricing:

  • Option 1: Hiring in-house

The average web designer salary in the United States is $52,691

The average salary of a web developer in the United States is $68,924

  • Option 2: Hiring via an agency

The price of a simple custom website design by an agency ranges from $15,000 - $20,000.

Complicated custom website design pricing ranges from $20,000 - $40,000

  • Option 3: Hiring a freelancer

The average web design project on Freelancer is completed for $220.94 USD

The average web development project on Freelancer is completed for $294.06 USD.

As you can see, freelancer's are the most cost efficient. Unlike the other alternatives, you don't have to pay freelancers any benefits and you aren't obligated to keep them on board all year. Simply hire them when you need them, for however long you need them.

What skills to look for in a web designer and developer

A competent web designer should have the following list of skills

  • Squarespace development 

  • CSS

  • UX design

A competent web developer should have the following list of skills

  • Squarespace development 

  • Javascript

  • HTML

A desirable, but non essential skill, is QA testing. A freshly modified Squarespace template needs to be put through a series of strategic tests that mimic extreme cases of visitor activity. If a template passes these tests, you can have the piece of mind of knowing your Squarespace website won't break in high traffic swells.

The other benefit to hiring freelancers is that they display a portfolio of their completed work on their profile to justify their listed skill sets. You can also choose a candidate that has previously completed a Squarespace template modification that closely mirrors your requirements.

If you still prefer to verify a freelancer's skill sets before hiring them, you can send them an instant message to discuss your requirements. Not all freelancer platforms allow you to do this, but on Freelancer.com, you can send a direct message to any freelancer that bids on your Squarespace template job, when you post a project for it. 

How to give web developers and web designers access to your Squarespace website.

After hiring your preferred talent, you need to give them access to your Squarespace website, but don't worry, you don't need to relinquish your personal login details. Squarespace allows you to invite numerous contributors to work on your website. Here's how you do it.

From the home menu navigate to settings > permissions > invite contributor

Then click 'invite contributor'.

Squarepace adding contributors

Source: squarespace.com

You'll need to assign each contributor a role that corresponds to their granted access level. Web developers and web designers will need to be assigned an Administrator role. This is the highest permission level. They need such a high level access because they'll be modifying the coding, or DNA, of your Squarespace website.

For a detailed overview of the different contributor roles and their associated access levels, read this post.

You can keep track of all of the invites you've sent under the 'invites sent' list.

Squarepace adding contributors
Source: squarespace.com

If for whatever reason a contributor doesn't receive an email invite you can manually send it to them by clicking on their profile under the 'invites sent' category, copying their invite link and emailing it to them.

Squarepace adding contributors
Source: squarespace.com

Besides inviting contributors you also need to enable developer mode within your Squarespace environment. This will give your designers and developers full control over your template's HTML, CSS, and JavaScript.

Keep in mind that developer mode is only available on the following Squarespace plans:

  • Legacy Website Personal

  • Website Business

  • Commerce Basic

  • Commerce Advanced

To enable developer mode, form the home menu navigate to settings > advance > developer mode. Then toggle the developer mode switch.

Squarepace developer mode

A standard warning message will then pop up, after clicking 'continue' developer mode will be activated!

So what changes? Will your beautiful Squarespace environment be transformed into green cascading lines of matrix coding?

No. Everything will look pretty much the same actually. The only difference is that your developers and designers will now have even deeper access to the coding environment. Kinda like unlocking an extra door in your house you never opened before.

Just keep in mind that you won't be able to switch templates while in developer mode. So make sure the one you want to edit is already installed before activating dev mode.

Communicating with web designers and web developers

Before hiring a web designer and / or developer you need to have a clear idea of what you want them to do, and then you need to communicate these requirements clearly to efficiently complete your project.

Start by researching other Squarespace websites to see if there are any that mirror the styling of functions you want. 

Note down everything you like in two columns. One titled 'essential features' and the other titled 'desirable features'. It's easy to get carried away with implementing fancy features outside of your core requirements. Such categorization will ensure none of your essential features are eclipsed by non essential (but very pretty) requirements.

With your list of requirements complete you'll need to communicate them with your web developer or web designer. But solely communicating your requirements via text is risky because your instructions may be misinterpreted. 

To mitigate this risk, you should, ideally, communicate your Squarespace template design specs in a series of wireframes.

There are two styles of wireframes, low-fidelity and high-fidelity,

Low-fidelity wireframes are used to solely represent the placement of different elements and their positions relative to one another. You should use this wireframe design to communicate the intended structure of your Squarespace design.

Here is an example of a low-fidelity web page design:

wireframing a website

As you can see, the intended structure of the web page is very clear to understand, even though the symbols are incredibly simple.

Once the intended structure of your Squarespace template is understood, you can then reference your list of researched websites give examples of all your detailed design requirements.

Taking your Squarespace template to an elite level

Web designers and developers aren't the only talents that can spruce up your Squarespace website, you can tap into a vast spectrum of high skilled freelancers to optimize every aspect of your Squarespace website

And unlike the logistical nightmare of working with multiple businesses, you can manage your numerous projects and their associated payments under the one convenient platform, Freelancer.com

Here are some ways uniquely skilled freelancers can help you:

A web developer can implement custom functions and test all existing functions to ensure your website is a money making machine and not breaking somewhere in the middle

A content writer can write website content that will captivate and convert pragmatic visitors into customers.

An SEO expert will ensure your website structure aligns with all of the technical aspects of SEO and also tailor an SEO strategy that will help you rank on the first page of Google for thousands of keyword searches.

An SEM expert will create highly efficient paid advertising campaigns that will instantly drive traffic to your Squarespace website while keeping your ROI margins nice and plump.

A social media marketing expert can create entertaining social posts that will incentify engagement and drive traffic to your Squarespace website.

Μείνε Ενημερωμένος/η

Κάνε εγγραφή στα ενημερωτικά μας δελτία για να μείνεις ενημερωμένος/η για τα θέματα που έχουν σημασία.
Ευχαριστούμε για την εγγραφή! Για την επόμενη μας ενημέρωση δες τα εισερχόμενα σου.

Talk to one of our Technical Co-Pilots to help with your project

Get Help Now
Προτεινόμενα Άρθρα Μόνο Για Εσένα
Struggling to come up with the best idea? Our exhaustive guide runs through the idea generation process to help you tap into your inner Steve Jobs.
10 MIN READ
Effective social media marketing is crucial your brand. Learn how to hire a social media expert to bring you maximum results for minimum investment
10 MIN READ
Got a great idea for an app? Need a new way to grow your business? We tell you everything you need to know about building a mobile app in 2020.
16 MIN READ
How to hire a freelance writer and build an effective content marketing strategy. Content is your most profitable marketing investment, make it count.
12 MIN READ