All things Shopify and commerce
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-usi...
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
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.
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 :
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
Brilliant - thanks for this tip. It works perfectly.
@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.
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.
Works brilliantly and with low effort. Thanks!
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
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).
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
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!
You don't need to use the link tag, just get the direct URL from your asset file.
@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 : )
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
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.
Hi May, has this feature been implemented 3 years later? Thanks
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
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024