How can I customize email notification design?

[kimbermiller]

Hey guys! I'm just about ready to launch my website but am having some issues customizing my email notifications (order confirmation, etc.).

I was able to add my logo and accent colors but can't figure out how to change the font and text color. Is anyone able to assist with this?

Also, the buttons are rounded (see below) in my email and I want to make them square. Is anyone able to assist with this?

Thanks in advance!

[KetanKumar]

Hello, @kimbermiller 

Welcome to the Shopify community!
and Thanks for your Good question.

see the attachment.

[kimbermiller]

Thank you for your response! I've clicked the 'Customize' button and have only gotten the below customization options. I'm trying to figure out how to change the font and square the button edges. Right now they're rounded.

[Tilde]

Did you ever find a solution to this? I would also like to change the font colour- especially the "Hi John, we're getting your order ready to be shipped." bit would need to be black instead of grey.

[WinkyApps]

Hello @Tilde 

Go to Settings > Notifications and click on the email template name that you want to customise. In your case it is "Order confirmation"

Search for 

<p>{{ email_body }}</p>

Replace this line with the one below. Make sure to replace with a HEX colour code of your choice. In this sample I have selected a variant of red #C70039. You can pick what you want using any "HEX" colour code tool like https://htmlcolorcodes.com/

<p style="color:#C70039">{{ email_body }}</p>

Hope this helps. 

[Tilde]

Superstar- thanks!!

[WinkyApps]

Hi @kimbermiller 

In your case, the button border is kept rounded by Shopify's default styles which I advise to use it as a best practice. If you still want to change it, you can do it by changing in each notification template manually. 

Open each template in which you want to update the rounded buttons and find the below line of code -

Replace this line

 .button__cell { background: {{ shop.email_accent_color }}; }

with the below line

.button__cell { background: {{ shop.email_accent_color }}; border-radius: 0px; }

To be clear, we are just setting the border-radius as 0 pixels to override the default style. This should solve your requirement.

Thanks,

WinkyApps Team

[RichardFS]

Hello - I know your reply was a few years old but I am trying to adapt this code to a) change the border radius to zero like your example and b) to change the background colour of the button. 

But nothing works, even when applying !important to it. 

Any ideas?