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.

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

• 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.