(Part 2) Stop code from working in the backend of a Squarespace 7.1 site

Stop custom code from working while in the backend of a Squarespace 7.1 site

In Squarespace 7.1, you can control whether custom code runs in the backend by targeting the classes applied to the body tag.
When you are logged in, Squarespace adds: .sqs-edit-mode and .sqs-edit-mode-active (only during active editing)
The .sqs-edit-mode class appears throughout the backend, even when Edit Mode is not actively open.
To prevent custom CSS from running anywhere in the backend, you can use the :not() pseudo-class to exclude .sqs-edit-mode from your selector.
This ensures that:

• Your custom styling runs on the Live Site
• Your styling does NOT run anywhere in the backend
• Native fields (like blog titles) remain visible and editable
• Clients can update SEO-critical content safely

This method is ideal when hiding native elements on the Live Site but keeping them accessible in the backend.

If you need to get rid of something on the Live site, but still want to have “the thing” accessible while working in the backend of Squarespace, this tutorial is for you.

In Part 1, we looked at how to stop custom code from running while actively editing the content.

This time, we’re taking it further… or backward?

In any case, in this example, we’ll stop code from running at all times in the backend without affecting the Live site.

Let’s do it!

Video timestamps

00:00 — Introduction to Part 2

Alright, so this is Part 2 of the previous video on how you can make code work only on the Live site or only during Edit Mode.

If you haven’t watched Part 1 first, I would highly recommend doing that. That has some really helpful tips and just general reference information that you may find helpful for other projects.

In that first video, we also saw an example of how you can stop code from working while you're actively editing the site, and in this one, we're going to see an example of how you can stop code from working while you're altogether inside the backend of Squarespace, so when you have the side panel open or when you're actively editing the content.

So without further ado, this is the second example.

00:39 — Custom Blog Post Title Setup Example

I have here a blog post, and you can see that I have the native title up here, but my client wants to have the title set up this way. They want to have a Card Image block with an image here on the side and the text showing up here, the same title of the post. They want to display it in here with maybe a little bit of a description, just to make it more eye-catching.

In this situation, if I were to simply hide this part of the blog post because I don't want to have the title showing up twice, then I could use something as simple as this little snippet.

So this is just going to hide the blog item title. Let's refresh this just to make sure that the code applies, but that's basically just going to simply hide that field from sight. It's not going to show up on the Live site, it's not going to show up on Edit Mode, it's not going to show up at any point.

01:37 — The Problem With Hiding the Native Title Completely

So that's awesome. The problem is, what happens if now my client wants to change the name of the blog post? What if they need to update it? What if they want to change it to something else because it's better for SEO?

They don't really have any other way of accessing the post title, the actual post title, the one that shows up here, the one that shows up here.

So let's go ahead and use our trick to be able to display that title while we're in the backend, so that the client can easily change it, but hide it on the Live site for other users.

02:11 — Choosing the Right “edit mode” Class

Going back into my Custom CSS window again, knowing that the two classes we can use are .sqs-edit-mode and .sqs-edit-mode-active, to make sure that my client is able to see where they can update the title, I want to make sure that while they're inside the backend, without having the edit mode active, they can still see that field.

So that means that using the class of .sqs-edit-mode would probably be better than using the previous one.

Now, doing the same thing we did before, this selector, body.sqs-edit-mode, is going to help us target the body when the class of .sqs-edit-mode is present. So anything we add in here, code or any other properties that we add, are only going to apply when that class is present.

But like we already saw, what we want to do is the complete opposite. We want to apply the code, or we want to apply the modifications, when that class is not present. We want to filter it out. We want to use it as an exclusion.

03:12 — Using the :not() Pseudo-Class as an Exclusion Filter

So to be able to do that, we need to implement once more our :not() selector, or our :not() pseudo-class.

And now anything that we add within the brackets is only going to work if that class of .sqs-edit-mode is not present on the body tag.

So now, if we grab our snippet and add it within our filter brackets, we're going to see how the native field shows up while we're working on the site, but then if we expand the backend, we're not going to see it anymore, and if we click here on Edit Mode, we're still going to be able to see it.

Because remember that here the two classes apply, .sqs-edit-mode and .sqs-edit-mode-active. So because we have .sqs-edit-mode, the code is not applying, and therefore we are seeing the field.

And if we go onto the Live site and we go into that specific blog post over here, we can see how only the custom setup that we have with the Card block is the thing that's showing up.

04:26 — What to expect in part 3

Alright, so that's it for example number two. I really hope that you enjoyed this one as well and that you also found it helpful. If you did, make sure to give this video a big thumbs up or leave me a comment down below to let me know.

And if you want to see Part 3, where we have an example that is going to do the complete opposite and we're going to have the code working only while we're in the backend but not on the Live site, if you feel like that's something that could be helpful for your own projects, make sure to hop on to that video next.

TL;DR

• Squarespace adds the class .sqs-edit-mode to the <body> tag whenever you're inside the backend.

• If you hide something with CSS normally, it disappears everywhere — including where your client may need to make changes.

• To fix the inconvenience, you can use the :not() pseudo-class to exclude .sqs-edit-mode from your selector.

• This means that your custom code will apply ONLY on the Live Site, and automatically “turn off” in the backend.

• This is a great trick to use when you need to hide stuff from users in general, but still keep the option available or visible for your client while they’re logged in.

That’s it for Part 2!

We have one more example to go.

If you’ve ever found yourself needing to make a change apply ONLY on Edit Mode but NOT on the Live site… you’re gonna want to hop onto the last part of this tutorial.

Until then,

B.

Full code

Custom CSS Window

/*STOPPING CODE FROM WORKING IN THE BACKEND OF SQUARESPACE 7.1*/
body:not(.sqs-edit-mode) {
  //your snippets here
}