How to adjust the style of the popup using CSS code?
By default, EcomSend popups provide an aesthetically responsive design. If you want to do some custom changes, here is the instruction.
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 🧐