Skip to main content

Customize Popup Styles with CSS

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 🧐

Did this answer your question?