How to adjust the style of the popup using CSS code?
CWILL Pop up Email popups are responsive by default. Use the examples below if you want to customize specific styles. The .ecomsend__… values shown in the code are the app's existing CSS class names, so keep those selectors unchanged.
Popup
Change font style
Heading
.ecomsend__Modal__TitleText {font-size: 20px !important;}
Description
.ecomsend__Modal__TitleHelpText {font-size: 20px !important;}
Placeholder
.ecomsend__Input__Wrap .ecomsend__Input__Input::placeholder{color:#000;}
Consent
.ecomsend__Modal__PolicyBoxWrapper label {font-size: 20px;}
Primary button
.ecomsend__Button {font-size: 18px !important;}
Secondary button
.ecomsend__Modal__CloseText {font-size: 18px !important;}
Footer text
.ecomsend__Modal__DescriptionText {font-size: 18px !important;}
Consent
Change the color of the tick √
.ecomsend__Modal__PolicyBoxWrapper svg path {fill: #ff1919;}
Change the opacity of the checkbox
.ecomsend__Modal__PolicyBoxWrapper input{opacity: 0.4;}
Close button
Change the color
div.ecomsend__Modal__CloseButton svg path{ fill: #84C0EE !important;}
Remove the close button
div.ecomsend__Modal__CloseButton svg path{display: none !important;}
Sidebar widget
When showing on the right position, make the text flip to the right
.ecomsend__Popover__Widget .ecomsend__Popover__Widget__right .ecomsend__Popover__Widget__Text { display: block; transform: rotate(-180deg); padding: 0 20px;}Reduce the size on mobile
@media screen and (max-width: 768px){ .ecomsend__Popover__Widget__CustomContainer {scale:0.85}}
Sticky discount bar
Adjust the height on desktop
.ecomsend__Popover__Sticky {height: 50px;}.ecomsend__Input__Input {height:40px;}Adjust the height on mobile
@media screen and (max-width: 768px){.ecomsend__Popover__Sticky {height:55px !important;}.ecomsend__Popover__Sticky__Container {scale:0.7; padding: 0px!important;} }
Need help? Feel free to contact us via online chat or email, our world-class 24/7 support team is always glad to help you 🧐
