How to customise the style of the product quick view lightbox
This tutorial will show you how to customise the product quick view lightbox. You may want to style your product quick view page to be in line with your branding or simply want to make your site attractive to users and wish to redesign the product quick view lightbox.
This will code will work on Squarespace 7.1.
Complexity: Easy
Step 1
To add a shadow to the quick product lightbox, simply go to the Design’ and then ‘Custom CSS’ and paste the below code..
.sqs-product-quick-view-content {box-shadow: 5px 5px 15px rgba(0,0,0,0.2)}
Step 2
To add a border to the quick product lightbox, simply go to the Design’ and then ‘Custom CSS’ and paste the below code..
.sqs-product-quick-view-content {border: 1px solid purple; }
Step 3
To change the background color of the quickview product lightbox, simply go to the Design’ and then ‘Custom CSS’ and paste the below code.
.sqs-product-quick-view-content {background:#f90}
Step 4
To change the ‘Add to Cart’ button color of the quickview product lightbox, simply go to the Design’ and then ‘Custom CSS’ and paste the below code.
.sqs-product-quick-view-content .sqs-add-to-cart-button {background-color:#f90 !important}
Step 5
To change the colour of the close X button color inside the quickview product lightbox window, simply go to the Design’ and then ‘Custom CSS’ and paste the below code.
.sqs-product-quick-view-lightbox-close-button line{stroke:#f90 !important}
Step 6
To change the colour of the overlay that shows up behind the background inside the quickview product lightbox window, simply go to the Design’ and then ‘Custom CSS’ and paste the below code.
.sqs-product-quick-view-lightbox.sqs-modal-lightbox .sqs-modal-lightbox-content .lightbox-background {background:#f90 !important; opacity:0.6}
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
