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

Squarespace keeps absorbing the things designers used to hand-code.So when a feature ships that replaces code already sitting on a live client site, do you rip it out or leave it alone?

In this episode I'm sharing how I decided if the code should stay or go.
I also cover the customizations I have no intention of giving up, and the small branded details I call Disneyfying a website.

Full show notes: insidethesquare.co/podcast/94

00:00 — Squarespace added the feature. Do you remove your custom code?

01:21 — The first question: how many pages does this code affect?

01:36 — Hiding the header and footer on a Squarespace landing page

02:15 — Two columns of products on mobile: remove this code and use the setting

02:59 — Uploading a custom font to Squarespace instead of coding it

03:55 — Button hover effects: when to keep your CSS and when to use the editor

05:27 — Mobile menu customizations that still need custom code

07:58 — The rule: sitewide stays in code, one-offs go native

Transcript

SPEAKER_00 0: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-call-on layout for products in an online store. Or maybe you have a custom font that you coded into Squarespace. Now you realize there's an upload button. 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. 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. 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 a live client website. Now, for this list, along with the list of or link of all the resources that I mentioned in this particular episode, visit insidehesquare.co forward slash podcast. I also need to mention the term Squarespace is a trademark of Squarespace Incorporated. This content is not affiliated with Squarespace Incorporated. 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 in footer and you realize that's now available inside the page settings. It's one page. 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. Now, this is not legal advice. I'm going to 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, 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 in Squarespace. And this code affects the layout. 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 want to make sure that we remove the custom code and use the built-in feature that Squarespace has. On that same note, a site-wide feature that we now have 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 site-wide. 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. 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 font section. Click on whatever font family that you want to customize and make sure that you upload your custom font there. 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 going to 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. This next one's kind of tricky. I personally love doing hover effects for buttons. One of my favorite codes, changing the color of a 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. 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, site-wide. And here's my reasoning. 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. I would keep your custom code and leave those finished 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 platform. And that's something that I strongly recommend you do. Again, unless it's something that you want to do to every single text block site wide. 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 site wide and we're talking about content blocks, stick with custom code. But if you only want to change one or two things at a time, use the features that are now available in Squarespace. 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. 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 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. Some of the other things that I love to do are what I've started calling Disnifying a Squarespace website. Now hear me up. 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. 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. 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 I started thinking about this in terms of what I built for client websites. And I like to disnify things with a little bit of custom code. 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. It's no longer just a circle with a color, it was a cool shape that totally fit the vibe of what they were going for for their branding in general. Those little Disnification 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'm 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. All right. I hope that covers me legally. So if you have a lot of custom code on your Squarespace website, here's the breakdown for you. If 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. 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. 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. 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. I will say the color change 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. 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. 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. Head on over to the show notes for a link to some Squarespace resources and other content that I've made, insidesquare.co forward slash 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. Bye for now.