Shopify merchants cannot directly edit the styles.css file for email notification templates, forcing them to add inline CSS to each of the 17+ individual notification templates. This limitation makes global styling changes time-consuming and repetitive.
Official Response:
Community Workarounds:
Metafield Method (AlexF_1):
{{ shop.metafields.global.email_css }} before the </body> tag in each template!important directive due to Shopify’s parsingPassword Message Hack (Arundas):
{{ shop.password_message }} before </style> in templatesCurrent Status:
The discussion remains unresolved with no official solution. Multiple users continue requesting this feature, emphasizing the inefficiency of the current inline-only approach.
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
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-using-inline-css
Best regards,
Arthur
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
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
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
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
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!
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.
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).
This kind of hidden file is annoying! Let us change our email as easily as it should be!!!
Same. Add me to feature request!
Add me to the list as well!
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.
This is a very interesting solution. Love it =)
Alex,
Can you reply with some instructions for those of us who are HTML/CSS newbies?
Hi BBKoozies,
Sure, here’s a step-by-step explanation :
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).
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.
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 :
{{ 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
Brilliant - thanks for this tip. It works perfectly.
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 tag.
Then, in all of your email notification templates, just put the {{ shop.password_message }} tag before the ending tag (and you can prefix it with an optional but helpful comment):
...
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.
Why not just create you own stylesheet and link it? Best work around without having to do everything inline.
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!