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

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

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

Community Blog Articles