Embedding Your Own Code into Squarespace
Developers use it too!
If you don’t know what Squarespace is, you should check it out even if you are a new web developer yourself. While it seems like a simple template website to allow entrepreneurs and artists to show off their items or portfolio with easily designing their own site, it actually gives developers a lot of tools to allow them to customize their site. I highly recommend Squarespace even from a developer’s point of view. If you’re just starting out as a developer, its a great way to make a personal website without worrying about having to code it from scratch so you can focus on presenting your projects and yourself quickly and cleanly. To implement your own code to get CSS or JavaScript functionality beyond what they have to offer is a possibility too!
Adding HTML
Adding HTML to Squarespace is the simplest process when providing your own code. While on your profile, select a template and begin to add content to your page. This is laid out to be easy with their user interface, and once you add an image or some text, you’ll start seeing more available options.
Hover over the page and see the menu appear on the top right that says “Page Content.” This small menu will give you the option to edit, which is what we want! Once we select edit, our page will open up with all the separate elements on the page we’ve added. This can be blocks of text, titles, images, buttons, etc. To do your own HTML, make sure to not edit the already present elements but instead create a new section.
This can be spotted by a grey little dot on the left side of the screen with a bar running across it — this will let you know that you can add a new element here. When you click the grey dot, it will give you a plethora of options to add (images, text, banner, etc). What we want to do is add code in this section.
Once this is selected, a window will pop up showing a text area. Here we can add our HTML! This is where we add our <img> tags or <p> tags instead of simply dropping an image in or writing into their pre-made sections.Note that this will not have a terminal or IDE possibilities, and only some coloring for tags (better than Notepad, but not much). The small editing window and text area cannot be made larger either, so I advise using your favorite code editor to write your code then copy and paste it into the text area (I suggest VS code!).
Adding CSS
The hard part is done; we found out where to add our code and the best way to do it! Next is adding the CSS. Since we don’t have multiple files available here in the text editor on Squarespace, we need to include all of our CSS in our <style> tags on top of our HTML. A drop down menu on the top right of the text editor window allows us to switch from HTML to CSS. While this will keep us in the same text editor, the coloring will change to see different tags and highlights.
We have a few different options here to change the page as well! If we want to apply CSS to a larger area, we can go to Settings instead of Edit when we go into the “Page Content” menu. From here we click on Advanced, and then we can add CSS to that page in particular.
To go a step further even, we can apply overriding CSS to the entire website we’ve created. Be cautious though, as this overrides all CSS written into the site! That includes CSS the designers wrote to make the pre-designed elements look pretty — so if we write in our own CSS this could overwrite their code and mess up our site. Keep this in mind!
If our main menu is collapsed, we have to click the top left corner of the site — there will be a small white corner with an arrow. Once clicked our main menu will appear. Click on Design from the Home menu, then Custom CSS. In this area we can add whatever CSS we need and see it change the site in real time. Make sure to check each of your pages if you do this as it can change the layout for elements you didn’t mean it to!
Adding JavaScript
JavaScript can be added to Squarespace but only from behind a paywall. Once you decide to start paying for Squarespace’s premium features, including your own domain, you can add JavaScript to your site. While I’m not someone to ever push paying money for a luxury service, I think any professional should really considering phoning up the money for Squarespace premium if they want their business or portfolio to really shine and be taken seriously.
If this choice has been made, it’s easy once again! To add JavaScript, we do the same process we did to add HTML; we will open that small text editing window. Once it is open, we can see from the drop down menu that JavaScript is now available! With this, our page will then automatically check a box in the editor which shows our code instead of our content on the site. This is fine, but we can’t edit the code in the main window — it just shows it.
Add a <script> tag to our text editor and insert our JavaScript inbetween them to implement our own JS! Simple as that. Once we want to see how its changing in real time, we can make the drop down menu change back to HTML then uncheck that box to display the code in the main element area.
We can make our own site with templates now!
Now that we know how to implement our own code to Squarespace, it makes it a lot more of an attractive tool for an early developer to use for their own portfolio while still being able to add their code! It is a great practice ground with giving more complicated design elements to the people at Squarespace while we grow our own skills. Give it a shot! Especially when just utilizing the free version.
