Email Notification Design

kimbermiller
Excursionist
36 0 13

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?

kimbermiller_0-1595213527128.png

 

Thanks in advance!

 

KetanKumar
Shopify Partner
14376 1669 5165

Hello, @kimbermiller 

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

see the attachment.

Notifications _ Shopify.png

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
kimbermiller
Excursionist
36 0 13

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.

kimbermiller_0-1595215582476.png

 

0 Likes
Tilde
Excursionist
20 0 9

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.Screen Shot 2021-01-22 at 11.18.54.png

0 Likes
WinkyApps
Explorer
50 13 12

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. 

Did my answer work for you? Please drop a Like and Mark it as Accepted.
If you need further help or want to get something custom built for your Shopify store, then feel free to mail our team on winkyapps18@gmail.com
Happy to help.
Tilde
Excursionist
20 0 9

Superstar- thanks!!

0 Likes
WinkyApps
Explorer
50 13 12

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 -

WinkyApps_0-1611319809107.png

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

Did my answer work for you? Please drop a Like and Mark it as Accepted.
If you need further help or want to get something custom built for your Shopify store, then feel free to mail our team on winkyapps18@gmail.com
Happy to help.
0 Likes