Welcome to my favourite ways to customize a Squarespace website!

As an email copywriter, strategist and tech-geek who's helped numerous online businesses thrive, I've come to appreciate the power of a well-designed website. Squarespace is my preferred website of choice and it's a fantastic platform for creating beautiful, functional sites, without the need to know how to code... but sometimes you need a little extra oomph to make your site truly stand out.

That's where these six free Squarespace hacks and custom code come in handy. These custom CSS snippets for Squarespace allows you to add tiny bits of code to a single page or even across your site to level up your design.

I'm going to share the following hacks and snippets:

Scrolling Image - to showcase a long form image
Remove header & footer - remove the navigation header and footer from your page (including announcement bar!)
Smaller blog navigation links for mobile - apply smaller text for mobile only
Anchor links/table of contents - to link your content in your blogs or pages (like this list!)
Hide blog titles on main page - to showcase only images on your main blog page
Show/feature CSS code snippets on Squarespace site with a different colour background

Whether you're an aspiring copywriter, e-commerce store owner, or online business owner, these tricks will help you elevate your website template without breaking the bank or requiring advanced coding skills.

Get prepared for customising your Squarespace Website

There are two things you need to know/do before we get started.

Where the code is added

There are two (well three actually) areas in the back end of your Squarespace website where you can add code. The first is at the page level and you access it via the Page Settings (cog icon after the page name) > Advanced, and the other two places are in Website> Pages> Website Tools (for Custom CSS and Code Injection) – this is found at the bottom of your scroll list of pages.

Use this Chrome extension for identifying your code blocks

Squarespace uses block IDs for all the different blacks used within each page. If you are using custom code that is meant to alter something within a specific block, you need the ID. Download the Squarespace ID Finder extension from the Chrome Store and pin it to your tool bar.

6 Free custom CSS code snippets for your Squarespace website

1. Scrolling Image

When you want to showcase a long image on your website, it may prove difficult to be able to show it at the right size for viewing and yet not have it reaching down the full page, so how about turning it into a scrolling image like this?...

This is what you need to do.

Add your image to the page where you'd like it to feature in your page layout. Use the Chrome extension Squarespace ID Finder (as directed above) to find the ID - it will be a long string of numbers and letters. Copy and paste this into a note on your computer (I like to use Google Keep).

Add this following code to your Custom CSS area, and replace the xxxxxxx for the ID you copied, and change the hex code colours of the scroll bar to match your brand. Be sure to also make a note in the //----- section so you can identify what the code is for when you next come to your Custom CSS area.

  //----Image with Vertical Scroll [name of image]
  #block-xxxxxxx 
  { 
  max-width: 100%; 
  padding: 0px; 
  height: 700px; 
  overflow-y: scroll; 
  border: 1px solid #ddd; 
  @media screen and (max-width: 640px) {max-width: 100%!important; 
  margin: 30px!important; 
  padding: 0px!important; 
  height: 500px!important;
  }
  }
  
  //----Customize Scrollbar Track Color [name of image]
  #block-xxxxxxx::-webkit-scrollbar { 
  width: 8px;
  }
  
  //----Customize Scrollbar Track Color [name of image]
  #block-xxxxxxx::-webkit-scrollbar-track { 
  background: #ffffff; 
  border-left:1px solid #ddd
  }
  
  //----Customize Scrollbar Thumb Color [name of image]
  #block-xxxxxxx::-webkit-scrollbar-thumb { 
  background-color: #000000; 
  border-radius: 1rem;
  }

2. Remove header, footer or announcement bar

Squarespace do offer a toggle in the back end of pages to remove the header and footer if you require – this is great if you want to create full sales pages that have no distractions on your site – but this option doesn't take into consideration the announcement bar, which can still appear. If you want to remove header, footer and announcement bar, then plug this code into the Page Settings> Advanced of the relevant page you are editing.

(style)
.header, #footer-sections {
display:none!important;
} (/style)

Note: Replace brackets ( ) with triangular brackets < >

3. Smaller blog navigation links for mobile

I do love Squarespace and the various new options they've added over time for customising your website. One thing they've yet to do is enable a feature that allows you to alter the size of the navigation links, at the bottom of blog posts, separately for desktop and mobile. You can alter the size across the site (both desktop and mobile) by going to a page in edit mode, click the brush icon (Site Stylers) in top right corner and select Fonts> Customize> Assign Styles> and scroll to Blog Post > Pagination and alter the size or font there. But if you want a different size on mobile to desktop add this code to your Custom CSS area:

//----change blog navigation link size on mobile 
*/@media screen and (max-width: 640px) {
.item-pagination-title { font-size: 0.8rem!important
  }

4. Anchor links/table of contents

If you'd like to create a table of contents for a blog, or even just create an anchor link on your squarespace page, then just follow these simple instructions:

Create your list of contents (this is your Text 1)

Decide where you'd like to add text where it will link to and add the following code (Text 2), using a unique format for your-text-id (you can choose anything you want).

  (p id="your-text-id") Your Text (/p)
  
  Note: Replace rounded brackets ( ) with triangular brackets < >

If you'd like the text you're linking to to be a headline, change the <p> </p> to the appropriate h1, h2 etc tag.

Then go back to your Text 1, add a link to the text that incorporates the url of the page with the /pageslug (for example /blog/) plus the your-text-id as the slug... like this:

https://yoursite.com/pageslug/#your-text-id

5. Hide blog titles on main page

If you'd like to only display blog images on your blog collection page then you'll need to find the ID of the blog section (use the Chrome Eextension Squarespace ID Finder, like before) and use this code in your Custom CSS area – adding your ID code in place of xxxxxx.

//----hide blog titles on main blog page
#collection-xxxxxxx .blog-basic-grid--text .blog-title {
  display: none;
  }

6. Show/ feature CSS code snippets on your Squarespace site

And the best piece of coding I've figured out how to do is to showcase code snippets in a format that's easy for your readers to cut and paste (just as I've shown in the examples before). So this bit of coding below is rather meta since it's coding to show you how to display the code itself!

First of all you'll need to add some CSS style coding to your Code Injection area – remember to change the hex code to match your brand colours.

 (!-- code snippetfor showing code --)
  (style)
  .source-code {
  background-color: #c8d8d7;
  padding: 20px;
  }
  (/style)
  
Note: Replace rounded brackets ( ) with triangular brackets < >

And then on your page or blog post, add a code block with the following code:

  (pre class=source-code)this is where you add your code(/pre)
  
Note: Replace rounded brackets ( ) with triangular brackets < >

Bonus Coding Tips

If you want to go all-out with customisation of your Squarespace website, then there are lots of brilliant coders and developers who have created some outstanding plugins (which are essentially code snippets).

Check out my other blog post Top 10 Squarespace Plugin Shops of 2024 to Supercharge Your Website Customisation to discover the top sites and shops where you can purchase these squarespace css codes with tutorials on how to apply them to your site.

My two favorite plugins that I use are Will Myers Affiliate Link Genie for URLs that you link to outside your website and Section Loader Supreme (you'll see it at the bottom of this blog post with my bio) which allows you to pull in a section to any page, and if you edit it, the edits cascade throughout your website where that section is coded – similar to what is known as a global module in Wordpress (but this is a Squarespace version).

Conclusion

Implementing any of these Squarespace hacks can significantly enhance your website's functionality and aesthetic appeal. From creating a more engaging visual experience with scrolling images to improving navigation for mobile users, these tweaks can make a world of difference. Remember, a well-designed website is crucial for establishing credibility and keeping visitors engaged – whether you're selling products, offering services, or sharing valuable content.

As you experiment with these hacks, don't be afraid to get creative and adapt them to suit your unique brand and audience needs. The beauty of Squarespace lies in its flexibility, allowing you to create a truly personalised online presence. And if you ever feel stuck or need guidance on optimising your online business strategy, remember that there's a wealth of resources available with the tutorials and how-to guides right here on this blog as well as the Squarespace forum itself where you'll find developers sharing code snippets to achieve a variety of your favourite Squarespace hacks.

So go ahead, give these hacks a try, and watch as your Squarespace site transforms into an even more powerful tool for your online business. Happy coding!

My 6 Favourite FREE Squarespace Hacks & Code Snippets