How to customize Quickview & Lightbox forms in Squarespace
Table of Contents Show
📌 Pin it!
Over the years I’ve been working in Squarespace, I’ve found that I always customize certain things for everyone because what Squarespace offers for that particular element, well, frankly it sucks. 😂
What elements am I talking about? Besides Quickview and Form blocks, the standard search block style is just “meh” and so is the newsletter block, among other things.
But there are great plugin options to style the Search and Newsletter block over at Ghost Plugins (for free I might add) so today I’m just going to tackle the stuff you currently can’t get over there.
I’ve had three clients, back to back, with shops so far this year. Two of those three clients are using QuickView in their shop, but all are using the Lightboxed form feature on their sites.
Which, why not? If you’re using Squarespace’s built-in forms feature for anything, why take up space on the page with form fields if you don’t have to, right?
But we’ve all seen what Quickview and Lightboxed styling is and it ain’t pretty.
The Quickview button itself is always in all caps Helvetica with some letter-spacing… and the Lightbox form? 🤦🏼♀️ It’s black/white with all Helvetica.
Why those two things don’t pick up the styling from the rest of the site, I don’t know.
To keep things on-brand and still give them access to these features, the design usually requires some Custom CSS to tweak these elements, but the good news is that YOU don’t have to write that in order to use it.
You can just use my templated snippet, which has been evolving as I continue to use it with each client, making it better & more expansive each time.
Before we dive into the code though, how much can we style with Squarespace settings in Site Styles?
Do what we can in Site Styles first
There’s no reason to write unnecessary code, especially since any of that will be overwriting defaults Squarespace sets within the template. So we might as well use native/built-in settings to change what we can first. Where are those settings?
If you’ve had trouble finding them, let’s start with placing the form on the page, or navigating to the shop where you can see the Quickview button, because the number one thing you have to remember about Site Styles is that it will only show you styling options for all of the elements you can currently see in the preview/edit area of the page you’re actually on.
Quickview button
This is going to be quick & easy because there’s not much styling here. Go to Site Styles by clicking the Paintbrush icon while you’re in edit mode of the page where you can see the button. Then go to:
Colors
(select the Color Theme you’re currently viewing) & scroll all the way down to the bottom of those options
Under Products: Quick View Button, change the color (this is the background color of the button, not the text on the button)
Under Products: Quick View Lightbox, you can
change the color of the background Overlay and its opacity (transparency) and
the Controls Color (the close button)
Save your changes
Form fonts
This is more detailed because Squarespace gives you a tiny bit more control over inline form styles, so let’s just conquer that first. If you haven’t already added the form yet and you just know you’ll need to style it, go ahead & add a form somewhere, then add all the field types you’ll want to style & save your changes first. Then get back into Site Styles after those changes have saved. From there, go to:
Fonts
Assign Styles
a section named Form Block will be at the bottom of this list as long as a form block is actually on the preview page you’re viewing. Now you can set the fonts for:
Title
Description
Caption (ie: the small text underneath certain fields like Name’s First & Last field, or the Date’s Month, Date, & Year fields, etc.)
Placeholder (this is the text that shows inside the field until they start typing)
Option (list items in Checkbox and Radio fields)
Survey Title
Select Dropdown (the font in the pulldown menu; note that iPhones don’t usually display this custom font & replace it with their system font & style)
Button Text (the Submit button)
Save your changes
If you’re feeling daring, you can go straight into Colors and start editing there, but Squarespace can be quirky with Site Styles these days so it never hurts to Save as you go so you don’t have to backtrack as much.
Next, we’ll change the colors of the form text and button back in Site Styles:
Colors
(select the applicable Color Theme)
scroll almost to the bottom to the Form Block section to change the colors for each of the field types:
Title Color
Description Color
Caption Color (ie: the small text underneath certain fields like Name’s First & Last field, or the Date’s Month, Date, & Year fields, etc.)
Option Color (list items in Checkbox and Radio fields)
Survey Title Color
Button Background Color (the Submit button)
Button Text Color (the Submit button)
Save your changes
Now it’s time for Custom CSS
A couple of notes first:
If you are using custom installed fonts on your site, you will need to swap out the font-family everywhere in this code below.
If you are NOT using custom installed fonts, but you want to use your Header vs your Paragraph font in places where Squarespace hasn’t allowed you to choose that as an option, then you can still swap out the font-family below. You MUST use the font name exactly as Squarespace uses it in their code though, or this will not work. For example:
font-family: Futura; will not work in all cases, in Squarespace
instead, it often needs to be: font-family: ‘Futura PT’;
If you need help finding the names of fonts Squarespace uses, download the free Chrome extension “Font Finder” for quick & easy access to that CSS without needing to use the Chrome Inspect tool to pick through the actual code
You may need to adjust or remove pieces of these snippets that aren’t applicable to your design, especially fonts & colors where Squarespace’s Site Styles already allowed you to set those things beforehand.
annotations are made like these listed below; these are notes to you or section titles to keep the code organized & are not part of the code styling:
// change weight
//change color
/* Quickview button */
// FORM STYLE ADJUSTMENTS //
Quickview button
First let’s tackle the Quickview button since that’s quick & painless (read: less involved).
Show the full Quickview code snippet
/* Quickview BUTTON style */
.sqs-product-quick-view-button-wrapper .sqs-product-quick-view-button {
font-family: 'FONT NAME HERE' !important;
opacity: 1;
font-size: 1.2rem;
padding: 15px;
letter-spacing: 0px;
text-transform: none;
font-weight: 600; //change weight
}
/* Quickview lightbox TEXT styles*/
.sqs-product-quick-view-lightbox.sqs-modal-lightbox {
font-family: 'FONT NAME HERE' !important;
font-size: 1.1rem;
}
/* Quickview popup background - ROUND CORNERS */
.sqs-product-quick-view-lightbox .sqs-product-quick-view-content {
border-radius: 15px !important;
}Lightboxed and Inline Forms
Okay, here’s where things get detailed because we have to target each element individually.
Show the full Forms code snippet
// FORM STYLE ADJUSTMENTS //
/* Lightboxed FORM TITLE style */
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .form-title {
font-size: 2.2em;
color: #000; //change color
}
/* Lightboxed FORM BORDER style */
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {
border: 10px solid #fff; //change color
padding: 40px;
border-radius: 15px;
}
/* Lightboxed FORM MARGINS style */
.form-wrapper .field-list .fields {
margin: 0px 0px 0px -2%;
}
/* Lightboxed close button style */
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .lightbox-close {
position: absolute;
color: #000; //change color
font-size: 4em !important;
top: 35px; right: 35px;
}
// FORM FIELDS
/* form FIELD TITLES */
.sqs-block-form .field-list .title, .form-wrapper .field-list .title {
font-family: 'FONT NAME HERE' !important; //change font
font-size: 1.2rem;
}
/* form FIELD DESCRIPTION style */
.form-wrapper .field-list .description {
font-family: 'FONT NAME HERE' !important; //change font
font-style: italic;
font-weight: 300;
font-size: 1rem !important;
opacity: 1;
}
/* form FIELD CAPTION style */
.form-wrapper .field-list .field .caption {
font-family: 'FONT NAME HERE' !important; //change font
font-size: .8rem !important;
letter-spacing: 2px;
}
/* form FIELD BOXES */
.form-wrapper .field-list .field .field-element {
font-family: 'FONT NAME HERE' !important; //change font
width: 100%;
padding: 14px;
margin: 6px 0px 4px;
background: #fff; //change color
font-size: 1.1em;
line-height: normal;
box-sizing: border-box;
border-radius: 5px;
color: #000 !important; //change color
border-left: none;
border-right: none;
border-top: none;
border-bottom: 3px solid #000; //change color
}
* CHECKBOX FIELD list font */
.form-wrapper .field-list .field.checkbox label, .form-wrapper .field-list .field.radio label {
font-family: 'FONT NAME HERE' !important; //change font
font-weight: 300;
font-size: 1.2em;
color: #000; //change color
}
/* SELECT PULL-DOWN menu font */
.form-wrapper .field-list .field select {
font-family: 'FONT NAME HERE' !important; //change font
font-size: 1em !important;
font-weight: 300;
padding: 5px 10px;
border: none;
border-bottom: solid 3px #000; //change color
background-color: #fff; //change color
color: #000; //change color
}
/* INPUT & PLACEHOLDER text */
.form-wrapper .field-list .field .field-element {
font-weight: 500; //change weight
font-size: 1.2rem;
}
/* LINE SECTION TITLE text */
.form-wrapper .field-list .section .title {
font-size: 1.85rem !important;
line-height: 1.25em;
}
/* LINE SECTION DESCRIPTION text */
.form-wrapper .field-list .description {
font-size: 1.2rem !important;
color: #000; //change color
}
/** REMOVE FOCUS - shows when clicking on a form field **/
.form-wrapper .field-list .field .field-element:focus {
outline: none !important; //removes default outline
background-color: #000 !important; //changes background-color of box when clicked
}
// BUTTON STYLES
/* INLINE form BUTTON style */
.sqs-block-form .sqs-editable-button, .form-wrapper input[type=submit] {
width: 200px;
font-weight: 600 !important; //change weight
letter-spacing: 1px !important;
}
/* INLINE form BUTTON hover */
.sqs-block-form .sqs-editable-button:hover, .form-wrapper input[type=submit]:hover {
transform: scale(1.1) !important;
transition: transform 0.3s !important;
background-color: #000; //change color
font-family: 'FONT NAME HERE' !important;
font-weight: 600 !important; //change weight
}
/* LIGHTBOX form BUTTON */
.sqs-block-form .sqs-editable-button, .form-wrapper input[type=submit] {
background-color: #fff; //change color
font-family: 'FONT NAME HERE' !important;
font-size: 1.3rem;
font-weight: 600 !important; //change weight
padding: 15px;
}
/* LIGHTBOX form BUTTON HOVER style */
.sqs-block-form .sqs-editable-button:hover, .form-wrapper input[type=submit]:hover {
transform: scale(1.1) !important;
transition: transform 0.3s !important;
background-color: #000; //change color
font-family: 'FONT NAME HERE' !important;
font-weight: 600 !important; //change weight
}
// END Form style adjustments //Bonus! Styling the Comment box on Blogs
Show the full Comment Box code snippet
/* Comment button style */
.squarespace-comments .comment-btn {
background-color: #000 !important; //change color
color: #fff; //change color
}
/* Comment button HOVER style */
.squarespace-comments .comment-btn:hover, .squarespace-comments .comment-btn:focus {
background-color: #000 !important; //change color
opacity: 1 !important;
}
/*comment box title & count*/
.blog-item-wrapper #comments .header-controls .comment-count {
font-size: 1.3rem;
}
