Promotional Pop-Up
GENERAL ELEMENT COMPONENTS & CSS SNIPPETS
Select a Squarespace Element to Examine CSS Selectors:
| Squarespace Element | Description |
|---|---|
| Promotional Pop-Up Elements | The promotional pop-up elements. |
CSS Code Snippets for Customizing Promotional Pop-Ups
Custom font size for overlay “x” close button icon
//Start: Custom font size for overlay close button icon
.sqs-popup-overlay-close:before {
font-size: 33px !important;
}
//End: Custom font size for overlay close button iconAdd background to promo pop-up close button
//Start: Add background to promo pop-up close button
.sqs-popup-overlay-close {
background: black;
border-radius: 50%;
}
//End: Add background to promo pop-up close buttonHide pop-ups on certain pages
Replace the IDs below with your relevant page IDs. If you just want to hide it on one page, you can erase all but one selector.
Replace the “Page URL” with the relevant page URL, otherwise, you won’t know which targets which page.
//Start: Hiding promotional popup on certain pages
#item-621d821485c9893a12cecfc5, /* Page URL */
#item-6447f6350c9a8478285d7bc1, /* Page URL */
#item-6447fa4b3f512d77c4c55cb0, /* Page URL */
#item-637e20775b89de6097f1593a, /* Page URL */
#item-642c2bc85c3dfb089b0d3c84 /* Page URL */
{
.sqs-popup-overlay {
display: none !important;
}
}
//End: Hide promotional popup on certain pages