Squarespace plugins 0 and tutorials 0

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