Custom Popup Styles
Custom Popup Styles
If you need styling that is not available with the basic option, you can provide your own CSS Styles via the Custom CSS Options, which is available in the Popup Tab in the settings.
Embedded Files
Common Customization Scenarios
Common Customization Scenarios
Change the Main Title Styles
In most cases, you would not need to change this, as the app inherits the styles from the theme, but if you need to change styles of the main popup title, use the following CSS properties:
#pop-up-window #un-modal-title {
color: red;
}
Use a color picker, like the one from W3 Schools, to find the HEX value of the color.
Change the Description Styles
#pop-up-window #un-modal-description {
font-weight: 800;
}
Change the Product Titles
#pop-up-window .upsell-product-title {
font-weight: 800;
}
Change the Continue Button (important rule required)
#upsell-popup-continue-button {
background-color: grey !important;
}
Change the Continue Shopping Link
.upsell-footer-buttons a.upsell-continue-text {
font-weight: 800;
}
Change the "No, I'm good" text ((important rule required)
#upsell-popup-close-link {
font-weight: 800 !important;
text-decoration: underline !important;
}
Change the Main Product Styles
#pop-up-window .upsell-product-list-item.purchased-product {
flex-direction: row-reverse;
}
CSS Classes
CSS Classes
Pop-up Window Class
#pop-up-window {}
Pop-up Main Title Class
#pop-up-window #un-modal-title {}
Pop-up Description Class
#pop-up-window #un-modal-description {}
Pop-up Product Titles Class
#pop-up-window .upsell-product-title {}
Pop-up Continue Button Class
#upsell-popup-continue-button {}
Pop-up Continue Shopping Link Class
.upsell-footer-buttons a.upsell-continue-text {}
Pop-up "No, I'm good" Text Class
#upsell-popup-close-link {}
Pop-up Main Product Class
#pop-up-window .upsell-product-list-item.purchased-product {}
If you require advanced customization, please contact support, as this app can offer much more than documented above.
Google Sites
Report abuse