[94] When Squarespace Adds a Feature, Should You Remove Your Custom Code?

Jul 28

This transcript was generated by Descript AI and may contain errors.
[00:00:00] So you just discovered that some of the code you've added to a Squarespace website you no longer need. The features exist. Things like hiding something specifically on mobile or creating a two-column layout for products in an online store. Or maybe you have a custom font that you coded into Squarespace, and now you realize there's an upload button.
[00:00:20] In this episode, I'm going to be talking about what to do when Squarespace updates its features and your custom code is no longer needed. There's definitely a time to remove it, there's definitely a time to leave it, and that's exactly what I'm covering in this episode. I'm Becca from Inside the Square.
[00:00:35] Welcome to my podcast, Think Inside the Square, where I share tips and tricks for creating a Squarespace website that you're proud of. Now, in this episode, we're talking about some Squarespace features that I've already covered in the past, but specifically what to do when a feature comes along that replaces the need for custom code that you've already added.
[00:00:53] I'll be sharing with you my own little checklist of whether or not I remove my custom code and how I go about doing that safely on [00:01:00] a live client website. Now, for this list, along with the list of, or link of all the resources that I mention in this particular episode, visit insidethesquare.co/podcast.
[00:01:10]
[00:01:11] I also need to mention the term Squarespace is a trademark of Squarespace, Incorporated.
[00:01:14] This content is not affiliated with Squarespace, Incorporated
[00:01:18]
[00:01:22] One of the first things that I want you to ask is how many pages are affected by this custom code? Let's say it's a landing page. You've got a one-off code where you hid the header and footer, and you realize that's now available inside the page settings. It's one page.
[00:01:36] I personally wouldn't bother with it if it's doing just fine. For future landing pages, use the settings available in Squarespace, but for the past, don't stress. One quick side note on that. If you do use the hide footer feature available in Squarespace or custom code to hide the entire footer, double-check that your terms and conditions, privacy policy, that any important information is still accessible on that page.
[00:01:59] Now, this [00:02:00] is not legal advice. I'm gonna say that one more time for the people in the back. This is not legal advice. This is just one Squarespacer talking to another. But if you have privacy policy, terms and conditions, copyright, any legal information that needs to be visible on every page,
[00:02:15] make sure you add it as a section on the page if you decide to hide the footer, whether that's with code or in the platform since we now have that feature one code that I recommend removing from your custom code is having two columns of products in an online store. This was a very popular code for years because we couldn't do it Squarespace, and this code affects the layout.
[00:02:36] Not too long ago, they made some major changes to the custom code that affected product pages and product listings. Part of that was to enable this new feature where we can now have two columns of products on mobile. But because of that, when it comes to something so ingrained in the layout, I would wanna make sure that we remove the custom code and use the built-in feature that Squarespace has.
[00:02:56]
[00:02:57] On that same note, a sitewide feature that we now have [00:03:00] is the ability to upload a custom font to Squarespace. Now, I strongly recommend using this feature if you've installed a custom font with code in the past, if that is sitewide. If you're only using the font on, like, one or two pages, there's no need to load that font family or that font file with every single page on your website.
[00:03:18] But if you're using it all over the place and you've got access to that original font file, I strongly recommend uploading it using the Squarespace interface. You'll find this feature in your Site Styles underneath the Fonts section. Click on whatever font family that you wanna customize and make sure that you upload your custom font there.
[00:03:35] Again, the custom code part of this totally works, But adding it to Squarespace this way can potentially help save you some load time. Not gonna make any promises here, and we're talking milliseconds at the end of the day, but every millisecond counts. I strongly recommend using the features that Squarespace has to upload that font.
[00:03:52]
[00:03:52] , this next one's kinda tricky. I personally love doing hover effects for buttons. One of my favorite codes, changing the color of a [00:04:00] button on a hover. But a lot of other hover effects like shrink or grow, uh, lift slightly on a hover, give it a little bit of a wiggle, all of those are available for the button blocks inside Squarespace.
[00:04:11] If you've coded that in the past, here's when you should keep it. One, if there's a color change, because we still can't do that in Squarespace, and two, if you want it to happen to every one of those button blocks that's primary, secondary, or tertiary, every one of those instances sitewide. And here's my reasoning.
[00:04:29] If we're adding these hover effects using the editor features, we have to do them one at a time. And when you do them one at a time, that's a lot of clicks. That's a lot of time spent. So let's say you've got this really cool hover effect where it does a hover, it grows slightly, it lifts slightly,
[00:04:46] I would keep your custom code and leave those finish layer tools for other content blocks. Now, speaking of other content blocks, there are plenty of sites where I have added a background to a text block or maybe a border. We can do that in the [00:05:00] platform, and that's something that I strongly recommend you do, again, unless it's something that you wanna do to every single text block sitewide.
[00:05:07] I think that might be the, uh, the blanket rule we can go with for this episode. If you want these custom code changes to happen sitewide, and we're talking about content blocks, stick with custom code. But if you only wanna change one or two things at a time, use the features that are now available in Squarespace
[00:05:23]
[00:05:24] Now let's talk about some of the things that I will absolutely still be customizing with code. Anything that I'm doing to customize the mobile menu. Now, inside Squarespace, we can change the alignment, we can change the link spacing, but that's about all we can really do with our mobile menu.
[00:05:39] What I like to do with custom code is maybe I will add even more space between the links or a divider line between them. Another thing that I've done for a client is to switch the order of social media links on top and the button on the bottom. So that's menu, button, social, flipping that order just a little bit. I've also done a customized click-to-call button that doesn't show up on [00:06:00] desktop, but does show up on mobile. Those are things that I can't do using the Squarespace editor, and I'm absolutely still going to customize that with code.
[00:06:07] Some of the other things that I love to do are what I've started calling Disneyfying a Squarespace website. Now hear me out. I am not a Disney person. I'm not a Disney fan. No offense to those who are. But I have a dear friend, and years ago, she really wanted to go to Disneyland, and I was in California at the time, and I said, "All right, let's go.
[00:06:25] Let me see this whole magical kingdom and what it's all about." Turns out it was expensive food, lots of lines, and a sunburn, and still not a fan. But one thing that I learned while I was there at Disneyland was how many details are involved in this magical kingdom thing that they have going on. I would see Mickey Mouse everywhere.
[00:06:44] I'm talking about the little icon around the trash can and every single brick that was laid out that we were walking across. Not just the napkins, but, like, even the little footers underneath the table had some element of it that was customized and unique and very Disney. And so [00:07:00] I started thinking about this in terms of what I build for client websites, and I like to Disneyfy things with a little bit of custom code.
[00:07:07] Let me give you one of my favorite examples. I was working on a project, and in this project, we had multiple list sections, carousel and banner, and those have arrows. For this client, they had a very unique shape for their logo, so I created a few other funky shaped PNGs that really fit with their brand aesthetic, and I used those for the background of the actual arrows.
[00:07:30] It's no longer just a circle with a color. It was a cool shape
[00:07:33] That totally fit the vibe of what they were going for, for their branding in general. Those little Disneyfication details are things that I absolutely love. Also, Disney, please don't sue me for this podcast episode. I said the term Disney, but I am not affiliated with them in any way, shape, or form. I'm a Star Wars fan, but uh, that's about as close as the affiliation goes.
[00:07:51] All right? I hope that covers me legally.
[00:07:53]
[00:07:54] So if you have a lot of custom code on your Squarespace website, here's the breakdown for you. If [00:08:00] you're talking about something that's a layout, like a product display, or we're talking about something that's site-wide, I would recommend using the features that are built into Squarespace. Hop into your code, remove the customization that you added And then use the Squarespace features that are now available to recreate it.
[00:08:16] I recommend doing it in that order because your customization could potentially affect the way that it looks if you're editing in the actual editor itself. So again, remove your custom code and make those changes in the editor if we're talking about multiple pages, layout changes, site-wide things.
[00:08:33]
[00:08:34] If we're talking about individual content blocks and you want your customization to apply to any type of the block, for example, you want every secondary button to change to a purple on a hover and lift slightly off the page by moving the Y-axis, leave that in your custom code.
[00:08:50] Otherwise, you're gonna have to click into every single button content block to make that individual change. Maybe you've got the time for it, maybe you don't. Uh, I will say the color change [00:09:00] itself in that example, we still can't change the color of a button on a hover, so keep that one in mind. But again, if you're customizing every single content block of one type to do a specific thing, custom code is going to be the fastest way to do that because you'll have to manually edit every instance of that content block in the editor if you want that same feature.
[00:09:18] But if you're doing a one-off, uh, especially like making a new landing page or something along those lines, use the features that are natively built into Squarespace to make that magic happen.
[00:09:27]
[00:09:28] I'm Becca from Inside the Square. This was a quick episode with some tips from my experience as a Squarespace designer, and I hope you found it helpful.
[00:09:35] Head on over to the show notes for a link to some Squarespace resources and other content that I've made, insidethesquare.co/podcast. Thank you so much for joining me for this episode of Think Inside the Square. If you enjoyed it, give it a like, give me a comment, subscribe wherever you happen to be listening, and most importantly, have fun with your Squarespace website.
[00:09:54] Bye for now

The term Disney is a trademark of Disney Enterprises, Inc. This content is not affiliated with Disney Enterprises, Inc.

Squarespace added the feature. Now what happens to your code?

You built something with custom code. Maybe it was two years ago, maybe it was last spring. It worked, the client loved it, and you moved on.

Then Squarespace shipped the feature natively.

Hiding a header and footer on a landing page is a toggle now. Two columns of products on mobile is a setting in the store section. Custom fonts have an upload button. Backgrounds and borders on a text block are in the editor. Hover and scroll effects live in the design panel.

So the question lands on every site you have ever touched: do you go back and rip the code out, or leave it alone?

I have a rule. It comes down to one question, and it is not the one most designers ask first.

The first question is scope, not age

Most people ask "is this code old?" That is the wrong question. Old code that works is fine. The right question is how many places does this code touch?

Three answers, three different decisions.

One page, one section, one block. Leave it. A single landing page where you hid the header and footer with code is doing its job. Use the native toggle on the next landing page you build. Do not go back and re-do the old ones for the sake of tidiness.

Sitewide, or anything that changes layout. Remove the code and rebuild it with the Squarespace feature. This is the category where leaving old code in place causes real problems, and I will explain why below.

Every instance of one block type. Keep the code. This is the one people get wrong most often, and it is the strongest argument for custom code still existing at all.

Remove these: layout and sitewide

Two columns of products on mobile. This was one of the most copied snippets in the Squarespace world for years, because there was no other way to do it. There is now. In mobile view, click Edit, then Edit section, then use the plus or minus icon to change the number of columns. Squarespace covers it in Styling store pages.

Remove the old CSS and use the setting. Product grid code sits deep in the layout, and layout code is the category where custom CSS and native settings fight each other hardest.

Sitewide custom fonts. If you loaded a font file with code and that font is used across the whole site, move it to the uploader. You will find it in Site Styles under Fonts: click a font type, open the dropdown, and click the upload icon. Squarespace documents the full process in Uploading custom fonts.

The reason is load time. When you install a font with code, that file loads on every page of the site whether the page uses it or not. We are talking milliseconds, and I am not going to promise you a speed transformation. But every millisecond counts, and this one costs you nothing to claim.

If the font only appears on one or two pages, the code is fine where it is. Scope again.

One important order of operations: when you remove layout code, remove the code first, then make the change in the editor. If you edit in the editor while the old code is still live, the code distorts what you see and you end up designing against a moving target.

Keep these: anything you would otherwise click a gazillon times

Here is the part that gets missed: Squarespace's newer design tools are applied block by block. That is the whole point of them, and it is a good thing. It is also the reason custom code is not going anywhere.

Take a hover effect for example. Let’s say that you want every secondary button on the site to grow slightly, lift on the Y axis, and change color. In custom code that is one snippet and it covers every secondary button that will ever exist on that site, including the ones you add next year.

In the editor, that is every single button, one at a time, forever. Including the ones you add next year.

So the rule inside content blocks is: one or two instances, use the editor. Every instance of that type, use code.

Color on hover is worth calling out separately. Squarespace's Finish Layer tools cover animations, transforms, opacity, rotate, scale, and skew, and you can read what shipped in Finish Layer tools for website design. Check whether a hover color change is available for your button style before you decide. If you are writing it in CSS, I walk through the selectors and the !important problem in my button customization guide.

Same logic for backgrounds and borders on a text block. Native for a one-off. Code if you want it on every text block on the site.

What I still customize with code, every single time

The mobile menu. The editor gives you alignment and link spacing. That is close to all of it. Everything I want beyond that is code: extra space between the links, a divider line between them, flipping the order so the social icons sit above the button instead of below it. A click-to-call button that appears on mobile and stays hidden on desktop. None of that is in a menu.

The small branded details. I call this Disneyfying a site, and I owe the name to a trip to Disneyland I did not enjoy. Expensive food, long lines, sunburn. What I did notice is that Mickey was everywhere. In the trash can trim. In the bricks. Under the tables. Details nobody consciously registers and everybody feels.

My favorite example on a real client project: they had an unusual logo shape, so I made a few PNGs in matching shapes and used them as the backgrounds for the carousel and banner arrows. Not circles with a brand color in them. Actual shapes that belonged to that brand.

No design menu builds that. Code does. And that is exactly the kind of work clients notice and pay for.

One note on hiding your footer

If you hide a footer, whether with the native toggle or with code, check that your privacy policy, terms, and copyright are still reachable. Add them as a section on the page if they need to be visible everywhere.

This is not legal advice. This is one Squarespacer talking to another. But it is the thing I check every time, and I would rather say it twice than skip it.

I cover both methods in how to hide the header and footer on a single page, including collection pages where the toggle does not appear.

The rule, in one paragraph

Sitewide changes and layout changes move to the native feature. Remove the code first, then rebuild in the editor. One-off customizations stay exactly where they are. Anything that applies to every instance of one block type stays in code, because the editor makes you do it by hand each time. And the mobile menu, the mobile-only elements, and the branded details that make a site feel like it was made for one specific business stay in code, because there is no menu for them.

Squarespace absorbing the basics is not a loss for designers. It clears the desk so the code you write is the code that only you would have thought to write.

‍ Want the code for any of this without hunting for selectors? Custom Codey is an AI trained on Squarespace. Describe what you want, get working code and where to paste it.