How to insert a new editable block to your Squarespace template

Most Squarespace templates come with a set of code injection points out of the box. But sometimes you need an extra area to put some code where the template doesn't have one. In my case a wanted to add some information above my header but inside the canvas.

STEP 1: Add a new block, or use one of the code injections points (header/footer). Then add your extra information (text, images, etc.) into that block.


<div id="pre-header">
  Free Legal Evaluation, CALL NOW (XXX) xxx-xxxx

STEP 2: Get the block id. Use Firebug or similar app to track down the unique identifier for the new blog you've just created. If you add a new div element within your SQSP code injections points, as I did, you don't need to.

STEP 3: Use jQuery to re-position your block. jQuery allows you to move your newly created block to or inside another area of your page.

<script src="//"></script>

<script type="text/javascript">
   $(function() {
   $("#pre-header") .prependTo ("#canvas");

In my case adding a phone numer above the header was pretty simple. First, I added a div element called "pre-header" to the code injection point (footer) to make sure that it will be displayed on all pages. If I would add a block to the sidebar section, my new block might not show up on every page, depending on the settings.

Step 4 -  Add some custom CSS to make it look right.

#pre-header {
  font-weight: bold;
  padding: 10px;

That's it.