Custom CSS for Emails

Every email Sunshine sends to your customers, from order receipts to password resets, uses one shared design. It's intentionally plain so it works in every email app. If you want it to match your brand a little closer, or make a particular button stand out, you can add your own CSS on top of it.

Where to Add It

1. Go to Sunshine > Settings > Design
2. Scroll down to the Customizations section
3. Paste your CSS into the Custom CSS for emails box
4. Save your settings

Your CSS applies to every email Sunshine sends from that point on. Emails that were already sent don't change.

For the logo and signature that appear in every email, go to Sunshine > Settings > Email instead. Those are regular settings and don't need any CSS.

How It Works

Email apps like Gmail and Outlook ignore most stylesheets, so Sunshine doesn't send your CSS as a stylesheet. Instead, when an email is built, Sunshine takes the default styles plus your custom CSS and writes them directly onto each element in the email. Your rules are added after the defaults, so when two rules target the same thing with the same specificity, yours wins.

Two things don't survive that process, so they won't have any effect in emails:

• Hover styles (:hover)
• Media queries for mobile screens

Everything else you'd normally write, like colors, fonts, padding, borders, and sizes, works as expected.

What You Can Target

These are the main pieces of the email layout you're likely to want to change:

• #wrapper - the outer container, 600px wide by default
• #logo - the logo or business name at the top
• #content - the main body of the email
• .button - the buttons, such as "View order" and "View invoice"
• #order-status - the grey order status bar in receipts
• #order-actions - the row of buttons in order emails
• #order-cart - the order summary table
• .order-item--name, .order-item--total - the product name and price in each row of the order summary
• #order-total - the final total row
• #signature - your signature at the bottom

If you use the Digital Downloads add-on, two more are useful:

• .sunshine--order--all--download - the "Download all order items" button, shown when an order has more than one downloadable item
• .sunshine--order--item--download - the small "Download" link on each individual item

Examples

Change the button color

By default the buttons are black with white text. This makes them match your brand color instead:

.button {
    background: #2E86AB;
    color: #FFFFFF;
}

Learn how to add this custom code to your WordPress website

Make download links stand out

This is a common request from photographers selling digital downloads. Customers open the receipt looking for their photos, and "View order" isn't what they're after. This tones down the standard buttons and gives the download links a color of their own. Change #E67E22 to whatever color you'd like.

/* Tone down the View order / View invoice buttons */
#order-actions .button {
    background: #EFEFEF;
    color: #333333;
}

/* Color the download links */
#order-actions .sunshine--order--all--download,
.sunshine--order--item--download {
    background: #E67E22;
    border-color: #E67E22;
    color: #FFFFFF;
    font-weight: bold;
}

/* Make the "Download all order items" button bigger */
#order-actions .sunshine--order--all--download {
    font-size: 20px;
    padding: 15px 30px;
}

Learn how to add this custom code to your WordPress website

Keep the rules in that order. The download rule needs to come after the first one so it takes priority.

Change the font and text color

p, div, li, h1, h2, h3, h4, td, th {
    font-family: Georgia, serif;
    color: #444444;
}

Learn how to add this custom code to your WordPress website

Changing the Layout

Custom CSS changes how things look, not where they are. If you need to move things around, add content, or remove a section entirely, you can replace the email template files themselves. See customize layouts and emails with template overrides for how that works.