Squarespace is a powerful and easy way to build a website. It lets you do all sorts of fancy things without writing a single line of code, which is amazing! But, there are some limitations to what you can achieve using the Squarespace blocks and Site Style editor.  

That’s where custom code is going to come in super handy. I know that coding can be intimidating for most people. But, I promise you that this guide will be as easy as pie! You won’t actually be “coding” but copying and pasting what I’ve prepared for you. 

1. Install Custom Fonts

This is perhaps the number one piece of custom code that most Squarespacers learn to use. The ability to configure absolutely any font your little heart desires is priceless. It gives you more creative freedom to ensure your site aligns perfectly with your brand. Plus, it’s a total walk in the park. 

Step One: Upload your font file to Squarespace

• In the back-end of your website, click “Design” > “Custom CSS” 
• Click “Open In Window” 
• Click “Manage Custom Files” 
• Click “Add Images or Fonts” 
• Find your TFF or OTF font file and click “Open” 
• Let it load, then click “Save”

Step Two: Enter the CSS

Copy and paste this piece of code into the Custom CSS window that you already have open:

@font-face { 
font-family: ‘NAME OF FONT HERE’;
src: url(FONTURLHERE); }

• Delete the words “NAME OF FONT HERE” (but not the quotation marks) 
• Type in the name of your font between the quotation marks (‘ ’) 
• Highlight the words FONTURLHERE then click “Delete” 
• Click on your uploaded font file to the right of the screen. This will paste the font file’s URL into your code

Step Three: Configure Your Heading

Copy and paste this piece of code into the Custom CSS window that you already have open: 

h1 { font-family: ‘NAME OF FONT HERE’, sans-serif; }

• Delete the words “NAME OF FONT HERE” (but not the commas) 
• Type in the name of your font between the inverted commas (‘ ’).
• Be sure this text matches the exact name you gave your font in Step Two 
• Click “Save” 

And you’re done! 

Now, whenever you are writing in a text block on your site and you select “Heading 1”, this font will be used. 

Tip: Want to change the font for Heading 2 and Heading 3? Use the same method above but change “h1” to “h2” or “h3”. Easy!

2. Install an FAQ Accordion (With Automatic Toggle)

Another simple and genius way to jazz up your site is to use an FAQ accordion. This is a super clever way to lay out all of the text in your question and answer section without it looking like a long, boring block of text. 

The FAQ accordion code has been floating around the internet for awhile. However, I found after using it on my site there was a little bug in it. Whenever there were too many questions clicked “on” to reveal the answer, the bottom of the section was obscured by a black strip (the background showing through). 

This meant that if my user clicked to read more than three or four questions, by the time they reached the bottom of the page they weren’t able to see the text! 

One of the reasons I’m a bit of a nerd about CSS is the joy I get fixing issues like this with a couple of lines of code! I played around with a few options but settled on configuring the accordion to only allow one question to be open at a time. 

When my user is finished reading one answer and they click on the next question, the previous question will toggle off (close). 

This means that only one question can be opened at a time. This solved the problem of the background showing through and made the page more user friendly! CSS for the win! 

Let me show you how you can use an FAQ accordion with the automatic toggle off feature on your page.

Step One: Load the Javascript 

• Create the section where you want your FAQ accordion to live 
• Hover to the left and click on the line to reveal the content block options 
• Click on the “code” content block 
• Copy and paste this code into your code block and then click “Apply”:

<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/
jquery/1/jquery.min.js”></script>
<script> $(document).ready(function(){
$(‘.markdown-block .sqs-block-content h3’).css(‘cursor’,’pointer’);
$(“.markdown-block .sqs-block-content h3”).nextUntil(“h3”).
slideToggle();
$(“.markdown-block .sqs-block-content h3”).click(function() {
$(this).siblings().not(“h3”).not($(this).nextUntil(“h3”)).slideUp();
$(this).nextUntil(“h3”).slideToggle();
}); }); </script>

Step Two: Create the Markdown Block 

• Hover to the left and click on the line to reveal the content block options 
• Click on the “Markdown” content block 
• Copy and paste this text into the Markdown block: 

### + Question 1?
Answer Here 
### + Question 2? 
Answer Here 
### + Question 3? 
Answer Here 

• Erase “Question 1” and type in your question 
• Erase “Answer Here” and type in your answer 
• Complete this process for as many questions as you’d like to display 
• Click “Apply” 

That’s it! Enjoy your snazzy new FAQ accordion!

3. Change Specific Button Colours

I love to get selective about which colour I want each of my buttons to be on individual sections. However, the Squarespace style editor only allows you to apply a primary and an alternative colour to each button size. 

CSS to the rescue!

Step One: Find Your Button’s Block ID

Every Squarespace block, when installed on a page, is given a special ID which allows us to target it with CSS. First, we need to find out what the Block ID is for your button. 

• Install the Squarespace Collection/Block Identifier Google Chrome extension by following this link: https://bit.ly/2zFBpYi 
• Go to the section where your button lives 
• Click on the Block Identifier extension button (white “B” in a black square in your bookmarks bar). This will reveal all of the Block IDs on your page. Click on the one over the top of your button to copy it 
• Turn off the Block Identifier by clicking it again 
• Paste the copied code somewhere handy

Step Two: Enter the CSS 

• On your left side back-end panel, click “Home” > “Design” > “Custom CSS” 
• Click “Open In Window” 
• Copy and paste this piece of code into the Custom CSS window: 

#YOURBLOCKID .sqs-block-button-element–SIZE {background-color: #000000;}

• Find the Block ID that you pasted somewhere handy and copy it again 
• Erase “YOURBLOCKID” (but not the hashtag) and paste your Block ID here 
• Erase “SIZE” and type in the size of the button (“small”, “medium” or “large”) 
• Erase “000000” (but not the hashtag) and paste or type in the HEX code of the colour you want your button to be 
• Click “Save”

All done! Simply refresh your page to check it has worked correctly. This code can be used over and over for as many buttons as you like. 

Tip: Be careful to select the right button size as the code won’t work if your button is a different size than you entered in your CSS. 

Enjoy your pretty new buttons!

4. Hide Spacer Blocks on Mobile Devices Only

Squarespace does an absolutely brilliant job of making websites mobile responsive without you needing to do much at all. However, you may have noticed some sections or pages don’t look quite right on smaller devices. I find the main culprits of this problem are spacer blocks. 

On a desktop/laptop screen, spacer blocks are invaluable for laying out and organising your content. However, on a mobile where the screen real estate is much more valuable, spacer blocks aren’t quite as charming! 

The best way to fix this issue is by hiding the spacer blocks on mobile screens only. Yes! You can hide specific blocks when the site is being viewed on a mobile device. And it’s super straightforward. Let me show you how.

Step One: Find Your Collection ID

Every Squarespace page is assigned a Collection ID which allows us to target the content on just that page using CSS. First we need to find out what the Collection ID is for your page. 

• Install the Squarespace Collection/Block Identifier Google Chrome extension by following this link: https://bit.ly/2zFBpYi 
• Go to the page where you want to hide the spacers 
• Click on the Collection/Block Identifier extension button (white “B” in a black square). This will reveal the Collection ID for your page in the top left corner. Click on the Collection ID to copy it 
• Turn off the Collection/Block Identifier by clicking it again 5. Paste the copied code somewhere handy

Step Two: Enter the CSS 

• On your left-hand panel, click “Home” > “Design” > “Custom CSS” 
• Click “Open In Window” 
• Copy and paste this piece of code into the Custom CSS window: 

@media all and (max-width: 450px) { 
#YOURCOLLECTIONID .sqs-block-spacer { 
display: none !important; } } 

• Find the Block ID that you pasted somewhere handy and copy it again.
• Erase “YOURCOLLECTIONID” (but not the hashtag) and paste your Collection ID here.
• Click “Save” 

Aaaaand **mic drop**! 

Check your site on a mobile device to check it has worked correctly

Tip: If you want to apply this code to your entire site, simply remove the Collection ID (including the hashtag) from the line of code.

5. Edit the Colour of a Section Background

Some Squarespace users have learned to change the colour of a section background by uploading an image of the colour. This method works OK, however it is not the best option when it comes to SEO. Ultimately, it will slow down the speed at which your page loads which can have an impact on your search engine rankings. Additionally, you may have noticed that when you upload an image, it changes the brightness of the colour. 

There is a simple CSS solution to both of these issues. Le go!

• Find the name of your section by checking what you named it in the “Pages” tab.
• On your left-hand panel, click “Home” > “Design” > “Custom CSS”
• Click “Open In Window” 
• Copy and paste this piece of code into the Custom CSS window:

#SECTION-NAME { background-color: #000000; } 

• Erase “SECTION-NAME” (but not the hashtag) and type in the name of the section you found in the “Pages” tab. If the section uses more than one word, separate them with a dash, e.g. “Home Page” would become “#homepage” 
• Erase “000000” (but not the hashtag) and paste or type in the HEX code of the colour you want your section background to be 
• Click “Save” 

6. Change Button Colour on Hover

Want to add a little more personality to your site? Adding a button hover effect is a fun way to reinforce your brand identity and encourage your users to “Click here!”. This piece of code is super easy to install.

• On your left side back-end panel, click “Home” > “Design” > “Custom CSS” 
• Copy and paste this piece of code into the Custom CSS window: 

.sqs-block-button-element:hover {background-color:#000000; color:#000000}

• Erase the first “000000” (but not the hashtag) and paste or type in the HEX code of the colour for the button background
• Erase the second “000000” and add the HEX code for the button font colour
• Click “Save”

Easy! This code will apply the hover effect to every button on your site. Want to apply it to specific buttons only? Use the Block ID instructions in the “Change Specific Button Colours” tweak!