Premade Complete CSS Themes for Your Popup

Check out these themes for your Tydal Email Popup for Shopify, made with CSS.

Laurence Leech avatar
Written by Laurence Leech
Updated over a week ago

Custom themes

Below we’ve created a few different CSS themes to get started with adding a custom style. You can add these styles and themes to your popup widget to get started with a fresh design and style! To use each theme, click the link under each theme and paste it in your Custom CSS styles.

Adding a custom theme is one way to keep on-brand for your store! Below our team has outlined a couple of designs using CSS to make the widget look your own.

Feel free to play around with them by changing the colors or anything else you like. These themes are designed to be used with an image on the left or right, or with none at all. If you want to use elements from the theme with a background image, make sure to remove the background colors from the /* style for popup area */ section.

To use any of these custom themes

1. Copy the theme's CSS to your clipboard.

2. Open the widget style settings in the Popups app.

3. Scroll down the page and paste in the CSS.

4. Click Save to see your changes.

London Calling Theme

Use colors that contrast and complement but not clash

Popup photo by Greyson Joralemon on Unsplash

/* London Calling - Tydal CSS Theme */

/* style for email field */

#ba_widget_email_input {
background-color: black !important;
border: 2px solid #e6e0d6 !important;
color: white !important;
}

/* style for buttons */

#ba_widget_cta_button {
background-color: black !important;
color: white !important;
}

#close_ba_widget svg {
fill: #FF89BD !important;
width: 15px !important;
}

/* style for texts */

.ba_initial_state_dismiss_text, .ba_initial_state_footer_text {
color: #e6e0d6 !important;
}

.ba_initial_state_title, .ba_success_state_title {
font-family: Arial Black !important;
color: #000000 !important;
font-style: oblique !important;
}

.ba_initial_state_body, .ba_success_state_body {
font-family: Calibri !important;
color: #FFFFFF !important;
font-style: oblique !important;
font-weight: 500 !important;
}

/* style for popup area */

.ba_widget_parent {
border: 4px solid #d67d91 !important;
background: -webkit-linear-gradient(70deg, #d67d91 40%, #048b4f 40%) !important;
font-family: Tahoma !important;
}

Autumn Vintage Theme

Warm colors are always warmly welcome

/* Autumn Vintage - Tydal CSS Theme */

/* style for email field */

#ba_widget_email_input {
border: 0px !important;
border-radius: 10px !important;
text-align: center !important;
}

/* style for buttons */

#ba_widget_cta_button {
background-color: black !important;
color: white !important;
border: 2px solid #e6ebe0 !important;
border-radius: 10px !important;
}

#close_ba_widget svg {
fill: #e6ebe0 !important;
width: 15px !important;
}

/* style for texts */

.ba_initial_state_title, .ba_success_state_title {
font-family: Sans-serif !important;
font-style: oblique !Important;
font-weight: 800 !important;
color: white !important;
}

.ba_initial_state_body, .ba_success_state_body {
color: white !important;
}

.ba_initial_state_dismiss_text, .ba_initial_state_footer_text {
color: #e6ebe0 !important;
}

.ba_initial_state_footer_text {
font-style: oblique !important;
padding: 20px !important;
}

/* style for popup area */

.ba_widget_parent {
font-family: Arial !important;
padding: 20px !important;
border: 8px solid #e6ebe0 !important;
opacity: 75% !important;
background: #ffba08 !important;
}

.ba_widget_main_design {
background: #BF360C !important;
}

.ba_widget_parent.none .ba_widget_content, .ba_widget_parent.left .ba_widget_content, .ba_widget_parent.right .ba_widget_content {
background: #d00000 !important;
}

Rhubarb Soda Theme

Color gradients really make an ouline logo pop

Logo icon by Iconpacks

/* Rhubarb Soda - Tydal CSS Theme */

/* style for email field */

#ba_widget_email_input {
border: 0px !important;
border-radius: 25px !important;
text-align: center !important;
}

/* style for buttons */

#ba_widget_cta_button {
background-color: black !important;
color: white !important;
border-radius: 25px !important;
}

/* style for texts */

.ba_initial_state_title, .ba_success_state_title {
padding: 20px !important;
font-family: Lato !important;
color: white !important;
}

.ba_initial_state_body, .ba_success_state_body {
font-size: 150% !important;
padding: 10px !important;
font-weight: 500 !important;
color: white !important;
}

.ba_initial_state_dismiss_text {
color: #757575 !important;
font-size: 120% !important;
}

.ba_initial_state_footer_text {
font-style: oblique !important;
font-size: 100% !important;
color: #757575 !important;
}

/* style for popup area */

.ba_widget_parent {
background-image: linear-gradient(to bottom, #ff0780, #ff6364, #ff9a5f, #ffc877, #f6efa7) !important;
font-family: Calibri !important;
}

.ba_widget_main_design {
overflow: auto !important;
border-radius: 25px !important;
}

Waterloo Sunshine Theme

Yellow is the world's happiest color :)

Logo icon by Iconpacks

/* Waterloo Sunshine - Tydal CSS Theme */

/* style for email field */

#ba_widget_email_input {
background-color: #003566 !important;
border: solid white 2px !important;
border-radius: 10px !important;
color: white !important;
}

/* style for buttons */

#ba_widget_cta_button {
background-color: #003566 !important;
color: white !important;
border: solid #003566 1px !important;
border-radius: 10px !important;
}

#close_ba_widget svg {
fill: #003566 !important;
width: 15px !important;
}

/* style for texts */

.ba_initial_state_title, .ba_success_state_title {
padding: 25px !important;
font-family: Lato !important;
font-weight: 900 !important;
color: white !important;
}

.ba_initial_state_body, .ba_success_state_body {
font-size: 150% !important;
padding: 10px !important;
font-weight: 500 !important;
color: #003566 !important;
}

.ba_initial_state_dismiss_text {
color: #003566 !important;
font-size: 120% !important;
}

.ba_initial_state_footer_text {
font-style: oblique !important;
font-size: 100% !important;
color: #003566 !important;
}

/* style for popup area */

.ba_widget_parent {
font-family: Candara !important;
border: 8px solid #003566 !important;
background: #ffc300 !important;
}

Pink Coral Theme

Use friendly, inviting colors to convert

Logo icon by Iconpacks

/* Pink Coral - Tydal CSS Theme */

/* style for email field */

#ba_widget_email_input {
border: 2px solid white !important;
border-radius: 0px !important;
}

/* style for buttons */

#ba_widget_cta_button {
background-color: #ff3399 !important;
border: 2px solid #FFE4F4 !important;
border-radius: 0px !important;
}

#close_ba_widget svg {
fill: #626078 !important;
width: 15px !important;
}

/* style for texts */

.ba_initial_state_title, .ba_success_state_title {
color: #26252e !important;
font-family: Lato !important;
}

.ba_initial_state_body, .ba_success_state_body {
color: #26252e !important;
}

.ba_initial_state_dismiss_text, .ba_initial_state_footer_text {
color: #626078 !important;
}
.ba_initial_state_footer_text {
font-style: oblique !important;
}

/* style for popup area */

.ba_widget_parent {
background-image: linear-gradient(to bottom, #a9f1df, #c4e7bb, #e2d8a6, #f9c8a7, #ffbbbb) !important;
border: 7px solid #EFFCF8 !important;
font-family: Sans-serif !important;
padding: 30px !important;
}

Freshly baked theme

Example of Custom CSS used with a background image from unsplash.com
/* Heading font style */

h1.ba_initial_state_title {
font-family: Times New Roman !important;
font-weight: 100 !important;
font-style: italic !important;
letter-spacing: 0.5px !important;
}

/* Padding, widget background tint and fonts */

.ba_widget_parent.background .ba_widget_content, .ba_widget_parent.none .ba_widget_content {
padding: 150px 40px 150px 40px !important;
background: rgba(0, 0, 0, 0.3) !important;
border: 6px solid white !important;
font-family:monospace !important;
letter-spacing: -0.5px !important;
}

/* Close button color */

#close_ba_widget svg {
fill: #F7D959 !important;
width: 25px !important;
}

Pop tip: In the example above we're using a stock photo from unsplash.com. Be sure to choose a good image and set the position of your uploaded image to 'background' so it applies on the full screen!

Staycation theme

So CSSexy

/* Heading font style */
h1.ba_initial_state_title {
font-weight: 900 !important;
font-size: 70px !important;
line-height: 0.8em !important;
}

/* Subheading font style */
.ba_initial_state_body, .ba_success_state_body {
font-size: 28px !important;
}

/* Padding, widget background tint and fonts */
.ba_widget_parent.background .ba_widget_content, .ba_widget_parent.none .ba_widget_content {
padding: 100px 40px 100px 40px !important;
background: rgba(0, 0, 0, 0.2) !important;
border: 6px solid black !important;
font-family:monospace !important;
letter-spacing: -0.5px !important;
}

/* Close button color */
#close_ba_widget svg {
fill: #000000 !important;
width: 25px !important;
}

/* Main button */
#ba_widget_cta_button {
border: 2px solid black !important;
border-radius: 0px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: 1px !important;
}

/* Input field style */
#ba_widget_discount_code_input, #ba_widget_email_input, #ba_widget_first_name_input, #ba_widget_last_name_input, #ba_widget_phone_input {
background-color: black !important;
color: white !important;
border: 0px !important;
border-radius: 0px !important;
}

Sunburst theme

So CSSeductive

/* Heading font style */
h1.ba_initial_state_title {
font-size: 36px !important;
line-height: 0.8em !important;
letter-spacing: 2px;
font-weight: 600 !important;
}

/* Padding, widget background tint and fonts */
.ba_widget_parent.background .ba_widget_content, .ba_widget_parent.none .ba_widget_content {
padding: 100px 40px 100px 40px !important;
background: rgba(0, 0, 0, 0.2) !important;
background-image: linear-gradient(#ff000094, yellow) !important;
letter-spacing: -0.5px !important;
border: 5px solid white !important;
}

/* Close button color */
#close_ba_widget svg {
fill: #000000 !important;
width: 25px !important;
}

/* Main button */
#ba_widget_cta_button {
border: 2px solid black !important;
border-radius: 30px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
font-size: 16px !important;
letter-spacing: 1px !important;
}

/* Input field style */
#ba_widget_discount_code_input, #ba_widget_email_input, #ba_widget_first_name_input, #ba_widget_last_name_input, #ba_widget_phone_input {
border: 0px !important;
border-radius: 30px !important;
}

Common questions

Will this custom CSS interfere with the rest of my website?

No, this CSS will only apply to the styles of the popup widget

Can I add a custom font to my popup?

Yes you can! Please see our guide here: Adding a custom font to your popup

Did this answer your question?