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 code will work on Squarespace 7.1.
Complexity: Easy
Step 1
To add a shadow to the quick product lightbox, simply go to ‘Design’ and then ‘Custom CSS’ and copy and paste the code below.
.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, go to ‘Design’ and then ‘Custom CSS’ and copy and paste the code below.
.sqs-product-quick-view-content {border: 1px solid purple; }
Step 3
To change the background colour of the quickview product lightbox, go to ‘Design’ then ‘Custom CSS’ and copy and paste the code below.
.sqs-product-quick-view-content {background:#f90}
Step 4
To change the ‘Add to Cart’ button colour of the quickview product lightbox, simply go to ‘Design’ then ‘Custom CSS’, and copy and paste the code below.
.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 colour inside the quick view product lightbox window, go to ‘Design’ and then ‘Custom CSS’ and copy and paste the code below.
.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 quick view product lightbox window, simply go to ‘Design’ and then ‘Custom CSS’ and copy and paste the code below.
.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, expressed 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.
