Code snippets to level up your Squarespace site
A selection of code we've used on sites we've built - because sharing is caring!
Filter by tag
How to style bold text in Squarespace list section descriptions
If you're using a Simple List Section in Squarespace and want to customize the appearance of bold text within description boxes, you can achieve this using a bit of CSS.
Styling the Squarespace 'Login' text into a button
Effortlessly transform the plain text on your Squarespace login page into a fully styled button with hover effects and a polished look.
Add custom PNG icon to replace the + in your accordion block
Easily swap the default plus icon in your Squarespace accordion block with a custom PNG and add a smooth 90-degree rotation effect when it’s opened.
Add a sleek, slim pill button for your 'Read More' blog links
Give your 'Read More' links a sleek, modern look with a slim, pill-shaped button.
Add Magical Snowfall to Your Squarespace Site
Follow these steps to add a snowfall effect to your Squarespace site. Enjoy adding a touch of winter magic to your Squarespace site!
Add a Dynamic Copyright Year to Your Squarespace Site
To create a dynamic copyright year on your Squarespace site, you can use a small JavaScript snippet that updates the year automatically.
Hover effect on site navigation social links
Feeling social, add this code to add a hover effect to your site navigation social links when your mouse over them.
Add Google font icons to your Squarespace website
The search is over, here’s some amazing code that lets you use a Squarespace code block to integrate Google material symbols & icons into your site.
Add Font Awesome icons to your Squarespace website
You can use this awesome code using the Squarespace code block to integrate Font Awesome icons into your site.
Adding a camera icon to Image blocks to show photo credits
Use this snappy code to add a camera icon to images on your site where you want to add an image or photo credit. As a user hovers over the icon, the credit will appear.
Add a custom image back-to-the- top arrow on your Squarespace site
This code enables you to incorporate a personalised back-to-top arrow on your site, perfect for those endlessly scrollable pages of text!