Customize Lock Screen Styles in Squarespace
The lock screen is often your visitor’s first impression—whether you're launching a new brand, building a client project, or keeping a site private during development. In Squarespace 7.1, the lock screen is fully functional; however, it doesn't reside within the page editor like other sections. So, how do you style it?
This guide shows how to customize fonts, colors, background images, and more to make your Squarespace lock screen look branded and beautiful.
What Is the Lock Screen in Squarespace?
The lock screen appears when:
Your site is password-protected
You’re using site-wide protection
You’ve enabled the “Enable Lock Page” feature under Settings → Site Availability
It typically includes
A title
A short message
A password input field
And a background color or image
Customize the Lock Screen
Step 1: Enable Lock Screen
Go to: Settings → Site Availability → Enable Password Protection
Set a password
Save your changes
Now, when someone visits your site without logging in, they’ll see the lock screen.
Step 2: Customize the Lock Screen Styles
Go to Design → Lock Screen
Here you can modify:
| Style Option | What You Can Do |
|---|---|
| Title & Description | Change font, size, and alignment |
| Form Button | Adjust color, shape, and text |
| Background | Upload a full-screen image or apply a solid color |
| Overlay Color & Opacity | Add a semi-transparent color layer over your background |
| Text Color | Change text and label colors for contrast |
| Font Choices | Select from your site’s font styles or customize independently |
Tip: Use a dark overlay with white text for modern, high-contrast lock screens.
Step 3: Preview the Lock Screen
To preview without logging out:
Open your site in a private/incognito window
Go to your domain (e.g., yourdomain.com)
You’ll see the lock screen exactly as a visitor would
Want More Control? Use Custom CSS
If you want deeper control beyond the built-in editor, you can target the lock screen via Custom CSS. For example:
/* Style the lock screen password button */
.lock-screen .button {
background-color: #1D4ED8;
border-radius: 5px;
text-transform: uppercase;
}
/* Style the input field */
.lock-screen input[type="password"] {
border: 2px solid #ccc;
padding: 12px;
font-size: 16px;
}Paste this into: Pages → Custom code → Custom CSS
Keep in mind: Lock screen elements may vary slightly by template, but the .sqs-lock-screen class is consistent in most Squarespace 7.1 setups.
Tips for a Better Lock Screen
| Want This | Do This |
|---|---|
| Branded pre-launch page | Add logo, brand colors, and a launch message |
| High readability | Use a semi-dark overlay on top of light background images |
| Simple UX | Use large fonts and short CTA |
| Elegant spacing | Use padding around the form and title in Custom CSS |
Final Thoughts
And yet, it too has a fancy full-page feature that doesn’t get enough love – your Squarespace lock screen can also be the nicest-looking holding page on the block, whether you’re in the middle of a refresh, showcasing work to a client, or coming soon.
It’s also a way of adding a bit of your professional self to the state of “Private” or “Coming Soon”.
Frequently Asked Questions
-
There isn’t an explicit built-in facility to upload a logo within the lock screen editor, but you can insert one with custom CSS or by uploading a branded background image with the logo incorporated. Or you could layer a logo in via the background image with transparent padding.
-
The lock screen is a standalone system page in Squarespace 7.1. It exists outside of the page editor and can only be customized through Design → Lock Screen and Custom CSS, not via drag-and-drop sections.
-
Yes. Open your website in a private/incognito browser window and visit your domain. The lock screen will appear exactly as a first-time visitor would see it.
-
Yes. Squarespace provides options in Design → Lock Screen to change fonts, button colors, alignment, and spacing. For more advanced control, use custom CSS to modify font weight, padding, borders, and transitions.
-
No. The styles you apply in the Lock Screen settings or via .sqs-lock-screen CSS selectors only affect the lock screen, keeping the rest of your site untouched.
