Change background & font colour of order confirmation & shipping confirmation email

harper1989 · ‎09-01-2024

Hi All,

I would like to change the background colour and the font colour of my order confirmation & shipping confirmation emails.

The accent colour is already orange... the email currently looks like this:

Is there a code I can add on both templates to change the background and font colour?

Sweans · ‎09-02-2024

Hi @harper1989 ,

To change background & font colour of order confirmation & shipping confirmation email

1. Go to Your Shopify Admin:

Navigate to Settings > Notifications.

2. Select the Email Template to Edit:

Choose the email notification you want to customize, such as Order confirmation or Shipping confirmation.

3. Edit the Email Template:

Click on the email you want to edit. You'll see a template written in HTML and Liquid (Shopify's templating language).

4. Change the Background Color:

Locate the <body> tag or any <table> or <div> that you want to change the background color for.

Add or modify the style attribute to include a background-color property.

For example:

Replace #f5f5f5 with the hex code of your desired background color.

5. Change the Font Color:

Look for any <p>, <span>, or other text-containing elements.

Add or modify the style attribute to include a color property.

For example:

<p style="color: #333333;">Thank you for your order!</p>

Replace #333333 with the hex code of your desired font color.

6. Save Your Changes

I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!

Regards,

Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!☕
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

justlikered · ‎12-18-2024

Hi Sweans,

Hope you are well.

I have a similiar issue with the confirmation emails that are sent to the customers.

If the dark mode on the phone is enabled, the white background is not working. Is it overriding the white background? I followed your steps but it doesn't seem to work.

Is there any solution to the dark mode issue, the company logo is not visible, attaching the screenshot for reference.

Change background & font colour of order confirmation & shipping confirmation email

Change background & font colour of order confirmation & shipping confirmation email

Community Blog Articles