Squarespace
Tutorials
Latest tutorials
You can link to any section on the page — perfect for buttons, navigation links, “scroll to next section” buttons, pricing sections, contact forms, and more. 1. Create a section and set the ID Open the section settings and go to: Edit Section → Design → Anchor Link Add your section ID there. You’ll use […]
A frosted glass (glassmorphism) menu adds a blurred, transparent background effect to your Squarespace header, creating a modern floating look. You’ll get a header that: Example: As you can see, the background behind the navigation bar is slightly blurred. Squarespace now includes a built-in option to create this effect without any coding knowledge. Open the […]
Once Squarespace introduced section IDs, it became much easier to apply custom tweaks. Now you can target sections using real IDs in CSS and JavaScript—instead of relying on cryptic [data-section] attributes. You can even reuse the same code across multiple sections or pages, which makes simple templating possible. When is this useful? There are plenty […]
Make the entire product card clickable By default in Squarespace, only the product title or image is clickable. This quick tweak makes the entire product card clickable, which improves usability and makes it easier for visitors to browse your store—especially on mobile. Add the code Go to Pages → Website Tools → Custom CSS and […]
By default, only image and title on summary card is clickable — that’s a bad UX. Let’s fix that by making the whole card clickable.
Although we don’t recommend it, sometimes you may want to replace the original menu on the desktop with the hamburger. Here is how.
It is a good user experience to show a little hint that the navigation link opens a submenu. The most common way is to use an arrow icon for that. Actually, Squarespace site uses that for their own submenus: CSS icon (recommended) The idea is to use :after for the icon. That way we can […]
Enable buttons and set links First of all, we need to enable buttons and set the links on that buttons. Now, if you click the button, you’ll see that it’s working properly, taking you to the linked page. Clicking on images or text does nothing though. Let’s fix it with some code — using :before […]
Easy rounded corners on backgrounds with a bit of CSS
Sometimes you want a section to keep a certain proportion
Squarespace doesn’t you allow to upload svg logos. See how to fix it.
Some time ago Squarespace disallow linking to svg files (and actually any uploaded file, like pdf, etc.) in trial mode. While technically you can upload the file itself, it will not work until you have a dedicated domain on your site and paid plan. It’s an issue, because on many occasions you might want to […]
By default, only image and heading are clickable on blog cards.
If you’re developing in Squarespace, chances are some CSS or JS coding will not work in admin mode. Previewing mobile in Chrome Dev tools is also a problem, as by default Squarespace shows pages panel rather than the actual site (if you’re logged in). And if you don’t have a custom domain, that might be […]
Squarespace’s ul elements doesn’t use usual list-style for list item decoration , but rather :before to create more custom dots in lists. So we need to remove the dots first and also adjust the spacing on list itself. Add this to :
A fixed header is essentially a header is attached to the top of the screen and is visible always while user is scrolling . Making the header fixed First of all, let’s see how we can “fix” the header via Squarespace options. In edit mode, click Edit site header → Edit design Then scroll to […]
If you want your sold out texts to read differently, you can actually change it in Squarespace settings without any code. Go to Products → Selling Tools → Product Status. Sold Out Sold out text is pretty straightforward. To make a product sold out, set its quantity to 0. Limited availability Limited availability has more […]