Editing the Email Notifications styles.css

ecommerce-will
Tourist
3 0 13

I'm wanting to change some basic styles to my email notifications across all the different templates. Is my only option to add inline styles to each individual template without using a third party service? I can't see a way to access/edit the assets/notifications/styles.css

Many thanks,
Will

Replies 24 (24)

Arthur_Korniyen
Shopify Expert
198 3 85

Hi Will,

Yes, you need to add inline styles to each individual template.
Here's the related Shopify article - https://help.shopify.com/en/manual/sell-online/notifications/edit-template#style-email-templates-usi...

Best regards,
Arthur

Founder at GenovaWebArt | info@genovawebart.com

ecommerce-will
Tourist
3 0 13

Thanks Arthur,

Any plans to allow editing of that file in the future? It seems a bit time-consuming to have to edit each one individually and some global notifications styling would be useful

jean-philippe_3
Shopify Partner
3 0 3

This kind of hidden file is annoying! Let us change our email as easily as it should be!!!!!!!

keith88
Excursionist
17 0 21

Same. Add me to feature request!

HughOD
Visitor
1 0 1

Add me to the list as well!

AlexF_
Shopify Partner
8 0 12

Hi,

 

I figured out an interesting way to add global styling : just use a shop-level metafield that you will render at the end of the body of each notification.
You just have to include the metafield call once on every template, and after you'll just have to edit the metafield value to render it to each mail.

ConspireAgency
Shopify Expert
35 3 24
This is a very interesting solution. Love it 😃
Conspire Agency //
Los Angeles, California //
https://conspireagency.com
View my showreel: https://www.youtube.com/watch?v=E9upo48FQUg
BBKoozies
Visitor
1 0 0

Alex,

 

Can you reply with some instructions for those of us who are HTML/CSS newbies?

AlexF_
Shopify Partner
8 0 12

Hi BBKoozies,

Sure, here's a step-by-step explanation : 

1) Make sure you have a metafield app installed. I found that Advanced Custom Field is perfect if you need a free one. Metafields are basically user-defined attributes that you can attach to all your Shopify entities (customers, orders, products, variants, collections and so on).

2) Create a shop-level metafield, let's say with the "global" namespace and the "email_css" key. The type will depend on the app you chose, if it's a basic one you'll just choose "Text field", but if the app offers advanced types, you can select "HTML field", just make sure that when you edit its value you're editing the source HTML code and not the output.

3) In your newly created field, enter the style you need to apply to all your emails. Here is the one I configured for one of the shops I manage : 

 

<style> 
    *{
        color: black !important;
    } 
    td.button__cell{
        background-color:#8cafbf;
    } 
    td.link__cell{
        padding: 20px 25px;
    }
</style>​

 

4) Once you're done, just paste this line just before the </body> tag at the end of the code of all your notifications' template : 

 

{{ shop.metafields.global.email_css }}​

 

And voilà ! Be careful though, Shopify has a weird way of parsing the style in templates, so some of the CSS rules you entered may not be taken into account. Don't hesitate to try different classes/elements and use the !important directive when something does not work properly (but don't follow this advice in a regular web environment of course ;o ).

 

Cheers,

Alex

Jonathan_Ellima
Shopify Partner
2 0 0

Brilliant - thanks for this tip. It works perfectly.

Arundas
Shopify Partner
72 3 96

@AlexF_ wrote:

I figured out an interesting way to add global styling : just use a shop-level metafield that you will render at the end of the body of each notification.
You just have to include the metafield call once on every template, and after you'll just have to edit the metafield value to render it to each mail.


As you mentioned in another comment, metafields can only be edited using an app (because it's restricted to Shopify API). But I found an even better hack to do this without installing another app. (I HATE APPS! - or rather, I hate how apps are the de-facto solution for every problem here.)

Tested Working 100% - Just put your CSS in your password message! This is under Online Store > Preferences > Password protection. Note: Don't surround the CSS with <style> tag.

Screenshot_2021-02-07 Molinos de la Especia ~ Preferences ~ Shopify(2).png

Then, in all of your email notification templates, just put the {{ shop.password_message }} tag before the ending </style> tag (and you can prefix it with an optional but helpful comment):

<head>
  ...
  <style>
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }

/* Global email notification styles - Edit them under Online Store > Preferences > Password protection */
{{ shop.password_message }}
  </style>
</head>

Note: Unless for some weird reason you still use the password page, this shouldn't affect your website in any way. Even if you did, you can just remove the message's Liquid tag from your password.liquid file.

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Email me!
munkius
Visitor
3 0 0

Works brilliantly and with low effort. Thanks!

May
Shopify Staff
333 33 176

Hi, Will!

This is May from Shopify.

That is a good question. I just checked with our theme specialists team, and I can confirm that Arthur is correct. In order to change the styling on your notification emails, you will need to add inline styles to each individual template, since there isn’t a single stylesheet file for email notifications. I understand that this can be time consuming, however, depending on what changes you are planning to do, our theme specialists might be able to help.

That said being said, I would be happy to launch a feature request with our developers to see if this functionality can be added in the future. While I can't guarantee that it will be added, I'm more than happy to pass along your suggestions that would provide better services to the Shopify platform. If the request is already there, I can add to it to bump it up - as the more merchants that mention a feature, the more likely they are to be implemented.

Let me know what kind of modification you are planning to implement and if you’d like me to pass along your request to our team! Feel free to reply back to this thread or contact our 24/7 support!

Kind Regards,

May

Shopify Support

 

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

mizzinc
Visitor
1 0 2

Struggle to understand how the notifcation/style.css is NOT editable, at the very least it should be for Partner/Developer accounts. 
Absolutely painful having to access 20+ notifications to write the same class and style. Its not 1999 Shopify (and I was there writing tables).

 

ecommerce-will
Tourist
3 0 13

Hi May, thanks for getting back to me.

I definitely think that having at least some access to edit the default styles would be very useful. As simple things like changing the color of text or the horizontal rules can be difficult and long-winded when having to set them as inline styles for each notification. I also found that there were some default styles that would overwrite the inline styles.

So either some more advanced styles options in the CMS or ideally the ability to directly edit the '/assets/notifications/styles.css' (which is linked in the header and the Shopify set styles are coming from) in the same way you can edit the html files would be a huge timesaver. 

It would be great to have this feature for future projects – restyling 17 email templates gets pretty monotonous! I also can't really see many negatives to have the option to do this as an admin.

Many thanks,
Will

ChrisBeattie
Excursionist
41 0 14

Why not just create you own stylesheet and link it? Best work around without having to do everything inline.

Arundas
Shopify Partner
72 3 96

I haven't tried using "render" with a snippet. Also, I don't think using `link` tag works with email. Try it and let us know!

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Email me!
ChrisBeattie
Excursionist
41 0 14

You don't need to use the link tag, just get the direct URL from your asset file.

Arundas
Shopify Partner
72 3 96

@ChrisBeattie wrote:

You don't need to use the link tag, just get the direct URL from your asset file.


OK, and do what exactly with it? Please show your code : )

If my reply helped you, please give it a Like and mark it as Accepted Solution.
Do you need help customizing your theme or editing code? Email me!

May
Shopify Staff
333 33 176

Hi again, Will!

Thank you for taking the time to provide your feedback and suggestions on a feature you would like to see added to Shopify! I've gone ahead and sent your request to our products team for further review so they can look into implementing this in the future. I've also included your contact information should they want to reach out for your assistance or if they have further questions on the request! Hopefully, this will be something we can see released in the near future!

Please let me know if there is anything else I can help you with. ?

Warm Regards,

May

Shopify Support

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

stro
Excursionist
14 1 13

Hello @May,

 

I would just like to reinforce the interest in having the possibility of editing the styles.css file linked to the notification emails.

As @ecommerce-will mentioned, it would be extremely helpful to adapt the styling of the outgoing emails.

 

Do you know if this is something the theme developers are working on?
Thank you!

ConspireAgency
Shopify Expert
35 3 24

@May @ecommerce-will @stro 

 

Would love to see this as well!  The ability to apply front styling, colors, background colors etc to all templates at once would be great.

Conspire Agency //
Los Angeles, California //
https://conspireagency.com
View my showreel: https://www.youtube.com/watch?v=E9upo48FQUg
lolo9538
Visitor
1 0 8

Hi May, has this feature been implemented 3 years later? Thanks

krisgholson
Shopify Partner
4 0 3

If it helps anyone else that ends up here, I created the following gist (for the  styles.css for the order confirmation email template) to help with local development:

 

https://gist.github.com/krisgholson/01fc812a73080c21f35747e292434c12