Tutorials
Find a new fix, CSS trick, workflow tip, or resource recommendation for your Squarespace client projects.
+5 awesome 2025 Black Friday deals for BUSY Squarespace designers
This Black Friday offer roundup is made for busy Squarespace designers with packed calendars, like you. Inside this hand-picked collection of time-saving plugins, mini-courses, and services, you’ll find different options to streamline your workflow with minimal time investment.
Highlights: The Website Designer Summit 2025
If you’re a Squarespace designer, you may have heard about the second edition of Liz Ellery’s Website Designer Summit that just took place yesterday, February 27, 2025. Aaand if you’re a VIP of my email list, you most certainly did! However, if you did not get a chance to catch it – nor have watched the replays – I want to share with you the truth-bombs, golden nuggets and overall amazing insights the speakers casually dropped in their presentations and talks.
Styling the Related Products section: number of items per row, title and price font
Take a look at how you can customize the Related Products section of Shop pages in Squarespace, with a bit of CSS.
Creating an animated loading screen for Squarespace
Let’s tackle how to build a loading screen or splash page for Squarespace sites that’s totally animated!
Adding custom icons to the Accordion Block while keeping the arrow or plus sign
Want to know how to add a custom icon to your accordion items while also keeping the chevron arrow or plus sign indicator? Then this tutorial is for you!
Adding an accordion block to the details section of Product Pages in Squarespace (Simple & Full layout)
Let’s take a look at how we can add an accordion block to the details section of product pages in Squarespace, with less code than you think!
Customizing the style and text of Read More links inside Summary Blocks
In today’s video, you’ll learn how to replace the text of Read More links for Summary Blocks and how to turn them into buttons!
Create a typewriter effect for headings in Squarespace
In today’s tutorial, we’ll be tackling how to create a typewriting effect for headings in Squarespace, in just a few minutes!
How to create a business info bar above the header in Squarespace
In today’s tutorial, we’ll be creating a business info bar that carries the hours, email and phone number of a hypothetical company with the help of HTML and our friend, CSS.
Looping rotating words effect for headings in Squarespace
Want to create a looping rotating effect for a heading on your client project? Then take a look at how you can easily achieve that with an awesome plugin!
Creating collapsible form sections in Squarespace
Today’s tutorial is a really useful one, especially if you have to deal with large-ish form blocks on a regular basis when building your client sites. We’ll be using a crafty little trick to HIDE parts of a form when the page loads, and then reveal those hidden fields on click, almost like an accordion block!
How to make folder titles clickable in Squarespace
Are you using folders in your Squarespace site’s navigation? Do you want to make the titles clickable? If so, tutorial will help you achieve that in no time!
Changing the accordion block icon when a dropdown is open
If you want to add a little fun customization to your client’s accordion block, then this tutorial is for you! We'll be looking at how to use two custom icons for the accordion block items in Squarespace: one when the dropdowns are open and a different one when they are closed. Spoiler alert: the customization is easier than you think!
Adding custom icons to the Accordion Block in Squarespace
In today's tutorial, we'll be looking at how to change the arrow or plus sign inside the accordion block for a custom icon. We'll tackle how to use the same image for ALL accordion items, and how to use a DIFFERENT icon for each individual dropdown!
How to create responsive text, WITHOUT media queries, in Squarespace
In today's video, we'll be tackling how to handle responsive text in Squarespace with ONE line of code and no media queries. Take a look!
How to create custom shapes for images in Squarespace
Want to know how to create custom shapes for images in Squarespace? Then today’s tutorial is for you! Take a look.
How to create a hover mode for anything in Squarespace
In this week's video, we'll be looking at the steps behind creating a hover mode for anything you want in Squarespace. Sounds good? Then let’s jump right into it!
Add custom bullet points to text blocks and image blocks in Squarespace
Want to create branded bullet points for your client’s site? Then take a look at this tutorial to learn how you can make that happen, only with CSS, for both text blocks and image blocks!
Easily create a multilingual site in Squarespace
Want to add a free translation widget to your Squarespace site? Then take a look at how you can easily set that up and style it with this simple CSS trick.
One-way sliding underline on hover for button blocks
We haven’t really covered a lot of button customizations on the blog, so I thought I’d share one with you today! The final effect makes it seem like the underline loops around the button, so it’s a pretty cool effect. The code isn’t too complicated AND is flexible enough to allow you to target one particular button size or all at the same time. So, let’s get started!