Squarespace Tutorials
Add this code to Pages › Website Tools › Custom CSS Now you have the whole card clickable.
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 […]
It’s better not to remove underlines from links as it might hurt user experience — the underline signifies that the word is actually a link. But if you still want to do that, add this code to : If you also want to remove an underline from the active navigation link in the header, also […]
When Squarespace engineers replaced the asterisk with (required) thing, form labels became not clear. Let’s fix this.
After Squarespace forms update, all required fields now have (required) in labels. How to revert this back to asterisks?