How to change background colour for Email Notification?

Rozzy · ‎05-27-2021

Hi, I'm editing my emails notification regarding "order confirmation", "Item in the cart" etc..

Was easy to add Logo and do some modification but HOW DO YOU CHANGE THE WHITE BACKGROUND COLOR?

I really cannot find a solution for this.

Thank you if someone can help me with this.

MiriamRM · ‎06-12-2021

Hi! I am sorry I have been off this site for a few days. Did you figure it out already?

I am pasting some of my code to help you find the location for the color change, just scroll down your code until you find the "<!DOCTYPE html>" which I find very easy to find in the sea of code 🙂

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
body {
background-color: #efe7dd;
}
</style>
</head>

In my case the color I wanted is that #efe7dd but you can select the color you want from your brand. I hope this helps!

Miriam

View solution in original post

KetanKumar · ‎05-27-2021

@Rozzy

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

please share email code so i will update

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Rozzy · ‎05-28-2021

Hi Ketan

Thank you for your reply and the welcome me in.

What does it mean "share the email code" I have no idea..

KetanKumar · ‎05-28-2021

@Rozzy

oh sorry i have put the wrong text

i mean please share store url so i will check and update you

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Rozzy · ‎05-29-2021

How can you check the background of my customers notification email just looking the website?

By the way is not online yet so is protected by password.

I just need to know which HTML/LIQUID code I need to change the background colour for the email notification such same "order confirmation" and how to put it in.

Thank you

KetanKumar · ‎05-29-2021

@Rozzy

yes please add body color for example add this code email notification code

body {
    background: red;
}

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Rozzy · ‎05-30-2021

Thank you, I will try it.

If the colour code is the name of the colour where I can find a table with all the colours? I need a water green ahahah

Thanks

KetanKumar · ‎05-31-2021

@Rozzy

yes, please change color as you like

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

MiriamRM · ‎06-01-2021

Hello!

I have the same issue, and thanks to your explanation I managed to edit the code and got the background changed to the color I wanted (#efe7dd).

The problem is that even though it shows perfectly fine in the preview, when I send a test email, still comes up as white.

Can you help? Do I need to start a new thread? I don't mean to hijack this thread, sorry!

www.myecoveganshop.com

Rozzy · ‎06-01-2021

Me too, I don't know where to put the code.

If I put it on the top of the notification page code just appear as a text.

KetanKumar · ‎06-01-2021

@MiriamRM @Rozzy

test email preview doesn't work properly can you please real test order and check

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Rozzy · ‎06-02-2021

Ok I will try it, but just to confirm the code need to go complete as it is just on the top of all the code right?

Thank you for you patience.

Rozzy · ‎06-02-2021

I sent the email with the code on the top, and the code where the HTML start and both didn't work...

The code appear as a text.

KetanKumar · ‎06-03-2021

@Rozzy

if possible to share screenshot and code so i will proper guide

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Rozzy · ‎06-03-2021

sure

MiriamRM · ‎06-03-2021

You were right, it worked when I did the test order. Thank you!

I have one more question for you (sorry!). If I want to separate paragraphs in the main message, how do I do that? Right now, it just says all in one paragraph, but I would like to separate 2 or 3.

Thanks a lot!

Miriam

KetanKumar · ‎06-03-2021

@MiriamRM

Thanks

yes please use p tag and add more text

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Rozzy · ‎06-04-2021

Miriam can you please screenshot where did you put the code, I'm happy you did it but I still have the issue lol

KetanKumar · ‎06-05-2021

@Rozzy

yes, please share code so i will check and update

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

MiriamRM · ‎06-06-2021

Hi!

To be honest, it worked when I did the test purchase, but once I had a real
purchase yesterday it went back to white!! Let me figure it out and I will
paste the code here for you

Rozzy · ‎06-06-2021

Thank you, would be really appreciated. Shopify should add a easy section on the main editing with background and text colours in html, it would help a lot.

KetanKumar · ‎06-07-2021

@Rozzy @MiriamRM

Thanks or both are update

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Rozzy · ‎06-07-2021

Still have the problem, still don't understand where to put the code. I posted a screenshot with the code but I didn't get any answer. I will keep hoping someone can help...

KetanKumar · ‎06-08-2021

@Rozzy

oh sorry.

can you please share full code i will update here...

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Rozzy · ‎06-08-2021

What do you mean for full code? It is too long to screenshot in one pic. It is not clear from the one I posted? There is not a simple explanation to where to put the colour code? Like for example before or after the "<body>" html code? Why it is so hard to explain this? I appreciate your time dedicate to my issue but we are not going anywhere eheh

KetanKumar · ‎06-09-2021

@Rozzy

yes i need email notification code so i will quick fix this issue

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Rozzy · ‎06-09-2021

{% capture email_title %}Thank you for your purchase! {% endcapture %}
{% capture email_body %}
{% if requires_shipping %}
{% case delivery_method %}
{% when 'pick-up' %}
You’ll receive an email when your order is ready for pickup.
{% when 'local' %}
Hi {{ customer.first_name }}, we're getting your order ready for delivery.
{% else %}
Hi {{ customer.first_name }}, we're getting your order ready to be shipped. We will notify you when it has been sent.
{% endcase %}
{% if delivery_instructions != blank %}
<p><b>Delivery information:</b> {{ delivery_instructions }}</p>
{% endif %}
{% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
</style>
</head>

<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>

<td class="order-number__cell">
<span class="order-number__text">
Order {{ order_name }}
</span>
</td>
</tr>
</table>

</td>
</tr>
</table>

</center>
</td>
</tr>
</table>

<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>

<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>
{% if order_status_url %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
</tr>
</table>
{% endif %}

</td>
</tr>
</table>

{% else %}
{% if shop.url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}

{% endif %}

</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

{% assign gift_card_line_item = line_items | where: "gift_card" %}
{% if gift_card_line_item.first %}
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Gift card</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>

<p> You’ll receive separate emails for any gift cards.</p>

</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
{% endif %}

<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Order summary</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>

<table class="row">
{% for line in subtotal_line_items %}
<tr class="order-list__item">
<td class="order-list__item__cell">
<table>
<td>
{% if line.image %}
<img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% endif %}
</td>
<td class="order-list__product-description-cell">
{% if line.product.title %}
{% assign line_title = line.product.title %}
{% else %}
{% assign line_title = line.title %}
{% endif %}

{% if line.quantity < line.quantity %}
{% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
{% else %}
{% assign line_display = line.quantity %}
{% endif %}

<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>

{% if line.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% endif %}

{% if line.selling_plan_allocation %}
<span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
{% endif %}

{% if line.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Refunded</span>
{% endif %}

{% if line.discount_allocations %}
{% for discount_allocation in line.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != 'all' %}
<span class="order-list__item-discount-allocation">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span>
{{ discount_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})
</span>
</span>
{% endif %}
{% endfor %}
{% endif %}
</td>
<td class="order-list__price-cell">
{% if line.original_line_price != line.final_line_price %}
<del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if line.final_line_price > 0 %}
{{ line.final_line_price | money }}
{% else %}
Free
{% endif %}
</p>
</td>
</table>
</td>
</tr>{% endfor %}
</table>

<table class="row subtotal-lines">
<tr>
<td class="subtotal-spacer"></td>
<td>
<table class="row subtotal-table">
{% for discount_application in discount_applications %}
{% if discount_application.target_selection == 'all' %}
{% capture discount_title %}
{% if discount_application.title %}
{{ discount_application.title | upcase }}
{% else %}
Discount
{% endif %}
{% endcapture %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Discount</span>
<span class="subtotal-line__discount">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span class="subtotal-line__discount-title">{{ discount_title }}</span>
</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>-{{ discount_application.total_allocated_amount | money }}</strong>
</td>
</tr>

{% endif %}
{% endfor %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Subtotal</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ subtotal_price | money }}</strong>
</td>
</tr>

{% if delivery_method == 'pick-up' %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Pickup</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ shipping_price | money }}</strong>
</td>
</tr>

{% else %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Shipping</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ shipping_price | money }}</strong>
</td>
</tr>

{% endif %}

{% if current_total_duties %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Duties</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ current_total_duties | money }}</strong>
</td>
</tr>

{% endif %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Taxes</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ tax_price | money }}</strong>
</td>
</tr>

{% if total_tip and total_tip > 0 %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Tip</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ total_tip | money }}</strong>
</td>
</tr>

{% endif %}
</table>
<table class="row subtotal-table subtotal-table--total">

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Total</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ total_price | money_with_currency }}</strong>
</td>
</tr>

</table>

{% if total_discounts > 0 %}
<p class="total-discount">
You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
</p>
{% endif %}

{% assign transaction_size = 0 %}
{% assign transaction_amount = 0 %}
{% for transaction in transactions %}
{% unless transaction.kind == "capture" or transaction.kind == "void" %}
{% assign transaction_size = transaction_size | plus: 1 %}
{% assign transaction_amount = transaction_amount | plus: transaction.amount %}
{% endunless %}
{% endfor %}

{% if transaction_size > 1 or transaction_amount < total_price %}
<table class="row subtotal-table">
<tr><td colspan="2" class="subtotal-table__line"></td></tr>
<tr><td colspan="2" class="subtotal-table__small-space"></td></tr>

{% for transaction in transactions %}
{% if transaction.status == "success" and transaction.kind == "authorization" or transaction.kind == "sale" %}
{% if transaction.payment_details.credit_card_company %}
{% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (ending in {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
{% else %}
{% capture transaction_name %}{{ transaction.gateway_display_name }}{% endcapture %}
{% endif %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{transaction_name}}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ transaction.amount | money }}</strong>
</td>
</tr>

{% endif %}
{% if transaction.kind == 'refund' %}
{% if transaction.payment_details.credit_card_company %}
{% assign refund_method_title = transaction.payment_details.credit_card_company %}
{% else %}
{% assign refund_method_title = transaction.gateway %}
{% endif %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Refund</span>
<br>
<small>{{ refund_method_title | capitalize }}</small>
</p>
</td>
<td class="subtotal-line__value">
<strong>- {{ transaction.amount | money }}</strong>
</td>
</tr>

{% endif %}
{% endfor %}
</table>
{% endif %}
</td>
</tr>
</table>

</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Customer information</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>

<table class="row">
<tr>
{% if requires_shipping and shipping_address %}
<td class="customer-info__item">
<h4>Shipping address</h4>
{{ shipping_address | format_address }}
</td>
{% endif %}
{% if billing_address %}
<td class="customer-info__item">
<h4>Billing address</h4>
{{ billing_address | format_address }}
</td>
{% endif %}
</tr>
</table>
<table class="row">
<tr>
{% if requires_shipping and shipping_address %}
<td class="customer-info__item">
<h4>Shipping method</h4>
<p>{{ shipping_method.title }}</p>
</td>
{% endif %}
{% assign transaction_count = transactions | size %}
{% if transaction_count > 0 %}
<td class="customer-info__item">
<h4>Payment method</h4>
{% for transaction in transactions %}
{% if transaction.status == "success" or transaction.status == "pending" %}
{% if transaction.kind == "authorization" or transaction.kind == "sale" %}
{% if transaction.payment_details.credit_card_company %}
<p class="customer-info__item-content">
<img src="{{ transaction.payment_details.credit_card_company | payment_icon_png_url }}" class="customer-info__item-credit" height="24" alt="{{ transaction.payment_details.credit_card_company }}">
<span>ending with {{ transaction.payment_details.credit_card_last_four_digits }} — <strong>{{ transaction.amount | money }}</strong></span>
</p>
{% elsif transaction.gateway_display_name == "Gift card" %}
<p class="customer-info__item-content">
<img src="{{ transaction.gateway_display_name | downcase | replace: ' ', '-' | payment_type_img_url }}" class="customer-info__item-credit" height="24">
ending with {{ transaction.payment_details.gift_card.last_four_characters | upcase }} — <strong>{{ transaction.amount | money }}</strong> <br />
Gift card balance: {{ transaction.payment_details.gift_card.balance | money }}
</p>
{% else %}
<p class="customer-info__item-content">
{{ transaction.gateway_display_name }} — <strong>{{ transaction.amount | money }}</strong>
</p>
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</td>
{% endif %}
</tr>
</table>

</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>

<p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

</td>
</tr>
</table>
</body>
</html>

MiriamRM · ‎06-12-2021

Hi! I am sorry I have been off this site for a few days. Did you figure it out already?

I am pasting some of my code to help you find the location for the color change, just scroll down your code until you find the "<!DOCTYPE html>" which I find very easy to find in the sea of code 🙂

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
body {
background-color: #efe7dd;
}
</style>
</head>

In my case the color I wanted is that #efe7dd but you can select the color you want from your brand. I hope this helps!

Miriam

Rozzy · ‎06-13-2021

Thank you so much to have find time to get back to me. I will do it for sure! Thanks again all the best!

KetanKumar · ‎06-13-2021

@Rozzy

thanks for code yes please update this code

{% capture email_title %}Thank you for your purchase! {% endcapture %}
{% capture email_body %}
{% if requires_shipping %}
{% case delivery_method %}
{% when 'pick-up' %}
You’ll receive an email when your order is ready for pickup.
{% when 'local' %}
Hi {{ customer.first_name }}, we're getting your order ready for delivery.
{% else %}
Hi {{ customer.first_name }}, we're getting your order ready to be shipped. We will notify you when it has been sent.
{% endcase %}
{% if delivery_instructions != blank %}
<p><b>Delivery information:</b> {{ delivery_instructions }}</p>
{% endif %}
{% endif %}
{% endcapture %}

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
background-color: #ff0000;
</style>
</head>

<body>
<table class="body">
<tr>
<td>
<table class="header row">
<tr>
<td class="header__cell">
<center>

<table class="container">
<tr>
<td>

<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>

<td class="order-number__cell">
<span class="order-number__text">
Order {{ order_name }}
</span>
</td>
</tr>
</table>

</td>
</tr>
</table>

</center>
</td>
</tr>
</table>

<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>

<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>
{% if order_status_url %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
</tr>
</table>
{% endif %}

</td>
</tr>
</table>

{% else %}
{% if shop.url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}

{% endif %}

</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

{% assign gift_card_line_item = line_items | where: "gift_card" %}
{% if gift_card_line_item.first %}
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Gift card</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>

<p> You’ll receive separate emails for any gift cards.</p>

</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
{% endif %}

<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Order summary</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>


<table class="row">
{% for line in subtotal_line_items %}
<tr class="order-list__item">
<td class="order-list__item__cell">
<table>
<td>
{% if line.image %}
<img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% endif %}
</td>
<td class="order-list__product-description-cell">
{% if line.product.title %}
{% assign line_title = line.product.title %}
{% else %}
{% assign line_title = line.title %}
{% endif %}

{% if line.quantity < line.quantity %}
{% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
{% else %}
{% assign line_display = line.quantity %}
{% endif %}

<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>

{% if line.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% endif %}

{% if line.selling_plan_allocation %}
<span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
{% endif %}

{% if line.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Refunded</span>
{% endif %}

{% if line.discount_allocations %}
{% for discount_allocation in line.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != 'all' %}
<span class="order-list__item-discount-allocation">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span>
{{ discount_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})
</span>
</span>
{% endif %}
{% endfor %}
{% endif %}
</td>
<td class="order-list__price-cell">
{% if line.original_line_price != line.final_line_price %}
<del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if line.final_line_price > 0 %}
{{ line.final_line_price | money }}
{% else %}
Free
{% endif %}
</p>
</td>
</table>
</td>
</tr>{% endfor %}
</table>

<table class="row subtotal-lines">
<tr>
<td class="subtotal-spacer"></td>
<td>
<table class="row subtotal-table">
{% for discount_application in discount_applications %}
{% if discount_application.target_selection == 'all' %}
{% capture discount_title %}
{% if discount_application.title %}
{{ discount_application.title | upcase }}
{% else %}
Discount
{% endif %}
{% endcapture %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Discount</span>
<span class="subtotal-line__discount">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span class="subtotal-line__discount-title">{{ discount_title }}</span>
</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>-{{ discount_application.total_allocated_amount | money }}</strong>
</td>
</tr>

{% endif %}
{% endfor %}


<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Subtotal</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ subtotal_price | money }}</strong>
</td>
</tr>

{% if delivery_method == 'pick-up' %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Pickup</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ shipping_price | money }}</strong>
</td>
</tr>

{% else %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Shipping</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ shipping_price | money }}</strong>
</td>
</tr>

{% endif %}

{% if current_total_duties %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Duties</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ current_total_duties | money }}</strong>
</td>
</tr>

{% endif %}


<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Taxes</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ tax_price | money }}</strong>
</td>
</tr>


{% if total_tip and total_tip > 0 %}

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Tip</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ total_tip | money }}</strong>
</td>
</tr>

{% endif %}
</table>
<table class="row subtotal-table subtotal-table--total">

<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Total</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ total_price | money_with_currency }}</strong>
</td>
</tr>

</table>

{% if total_discounts > 0 %}
<p class="total-discount">
You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
</p>
{% endif %}

{% assign transaction_size = 0 %}
{% assign transaction_amount = 0 %}
{% for transaction in transactions %}
{% unless transaction.kind == "capture" or transaction.kind == "void" %}
{% assign transaction_size = transaction_size | plus: 1 %}
{% assign transaction_amount = transaction_amount | plus: transaction.amount %}
{% endunless %}
{% endfor %}

{% if transaction_size > 1 or transaction_amount < total_price %}
<table class="row subtotal-table">
<tr><td colspan="2" class="subtotal-table__line"></td></tr>
<tr><td colspan="2" class="subtotal-table__small-space"></td></tr>

{% for transaction in transactions %}
{% if transaction.status == "success" and transaction.kind == "authorization" or transaction.kind == "sale" %}
{% if transaction.payment_details.credit_card_company %}
{% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (ending in {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
{% else %}
{% capture transaction_name %}{{ transaction.gateway_display_name }}{% endcapture %}
{% endif %}


<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{transaction_name}}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ transaction.amount | money }}</strong>
</td>
</tr>

{% endif %}
{% if transaction.kind == 'refund' %}
{% if transaction.payment_details.credit_card_company %}
{% assign refund_method_title = transaction.payment_details.credit_card_company %}
{% else %}
{% assign refund_method_title = transaction.gateway %}
{% endif %}


<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Refund</span>
<br>
<small>{{ refund_method_title | capitalize }}</small>
</p>
</td>
<td class="subtotal-line__value">
<strong>- {{ transaction.amount | money }}</strong>
</td>
</tr>

{% endif %}
{% endfor %}
</table>
{% endif %}
</td>
</tr>
</table>


</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Customer information</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>

<table class="row">
<tr>
{% if requires_shipping and shipping_address %}
<td class="customer-info__item">
<h4>Shipping address</h4>
{{ shipping_address | format_address }}
</td>
{% endif %}
{% if billing_address %}
<td class="customer-info__item">
<h4>Billing address</h4>
{{ billing_address | format_address }}
</td>
{% endif %}
</tr>
</table>
<table class="row">
<tr>
{% if requires_shipping and shipping_address %}
<td class="customer-info__item">
<h4>Shipping method</h4>
<p>{{ shipping_method.title }}</p>
</td>
{% endif %}
{% assign transaction_count = transactions | size %}
{% if transaction_count > 0 %}
<td class="customer-info__item">
<h4>Payment method</h4>
{% for transaction in transactions %}
{% if transaction.status == "success" or transaction.status == "pending" %}
{% if transaction.kind == "authorization" or transaction.kind == "sale" %}
{% if transaction.payment_details.credit_card_company %}
<p class="customer-info__item-content">
<img src="{{ transaction.payment_details.credit_card_company | payment_icon_png_url }}" class="customer-info__item-credit" height="24" alt="{{ transaction.payment_details.credit_card_company }}">
<span>ending with {{ transaction.payment_details.credit_card_last_four_digits }} — <strong>{{ transaction.amount | money }}</strong></span>
</p>
{% elsif transaction.gateway_display_name == "Gift card" %}
<p class="customer-info__item-content">
<img src="{{ transaction.gateway_display_name | downcase | replace: ' ', '-' | payment_type_img_url }}" class="customer-info__item-credit" height="24">
ending with {{ transaction.payment_details.gift_card.last_four_characters | upcase }} — <strong>{{ transaction.amount | money }}</strong> <br />
    Gift card balance: {{ transaction.payment_details.gift_card.balance | money }}
</p>
{% else %}
<p class="customer-info__item-content">
{{ transaction.gateway_display_name }} — <strong>{{ transaction.amount | money }}</strong>
</p>
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</td>
{% endif %}
</tr>
</table>

</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>

<p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>

<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

</td>
</tr>
</table>
</body>
</html>

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

Rozzy · ‎06-13-2021

Thanks sir.

KetanKumar · ‎06-13-2021

@Rozzy

it's my pleasure to help us

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

vapegateuae · ‎09-01-2021

@KetanKumar

thanks for the solution you provided, i used the same to update my store background color & its worked.

However, the area around the store logo still White , even though I have changed the store logo photo to PNG.

as shown in the screen shoot , any advice on that?

KetanKumar · ‎09-01-2021

@vapegateuae

thanks for update are you sure your logo png?

can you please sent your logo i will check my demo store

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

DuoDuo · ‎09-09-2021

Hi @KetanKumar

I also encounter problem like the preview is exactly what I want but test email shows part of the background colour turns white.

Please could you help ammending mine? I attached the code as below. Many thanks.

{% capture email_title %}Your order has been dispatched {% endcapture %}

{% capture email_body %}

Your order is on its way and will arrive soon. Track your shipment to see delivery status.

{% endcapture %}

<!DOCTYPE html>

<head>

<title>{{ email_title }}</title>

<style>

.button__cell { background: #d99581; }

a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }

body {

background-color: #ede6dd;

}

</style>

</head>

<body>

<tr>

<td>

<tr>

<tr>

<td>

<tr>

{%- if shop.email_logo_url %}

{%- else %}

</h1>

{%- endif %}

</td>

Order {{ order_name }}

</span>

</td>

</tr>

</table>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

<tr>

<tr>

<td>

<h2>{{ email_title }}</h2>

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

{% if order_status_url %}

<tr>

</tr>

<tr>

</table>

{% if shop.url %}

</table>

{% endif %}

</td>

</tr>

</table>

{% endif %}

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

<tr>

<tr>

<td>

<h3>Items in delivery</h3>

</td>

</tr>

</table>

<tr>

<td>

{% for line in fulfillment.fulfillment_line_items %}

<table>

<td>

{% if line.line_item.image %}

{% endif %}

</td>

{% if line.line_item.product.title %}

{% assign line_title = line.line_item.product.title %}

{% else %}

{% assign line_title = line.line_item.title %}

{% endif %}

{% if line.quantity < line.line_item.quantity %}

{% capture line_display %} {{ line.quantity }} of {{ line.line_item.quantity }} {% endcapture %}

{% else %}

{% assign line_display = line.line_item.quantity %}

{% endif %}

<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>

{% if line.line_item.variant.title != 'Default Title' %}

<span class="order-list__item-variant">{{ line.line_item.variant.title }}</span><br/>

{% endif %}

{% if line.line_item.selling_plan_allocation %}

<span class="order-list__item-variant">{{ line.line_item.selling_plan_allocation.selling_plan.name }}</span><br/>

{% endif %}

{% if line.line_item.refunded_quantity > 0 %}

<span class="order-list__item-refunded">Refunded</span>

{% endif %}

{% if line.line_item.discount_allocations %}

{% for discount_allocation in line.line_item.discount_allocations %}

{% if discount_allocation.discount_application.target_selection != 'all' %}

<span>

(-{{ discount_allocation.amount | money }})

</span>

{% endif %}

{% endfor %}

{% endif %}

</td>

</table>

</td>

</tr>{% endfor %}

</table>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

<tr>

<tr>

<td>

</td>

</tr>

</table>

</center>

</td>

</tr>

</table>

</div><div class="cb cb-3 cb-footer"><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td style="background-color:#ede6dd;" bgcolor="#ede6dd"><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td style="padding-left:20px;padding-right:20px;"><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td style="border-top:1px solid #666666;"><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td style="padding-bottom:35px;padding-top:35px;"><div class="cbvariant cbvariant-2_columns_social"><div class="mobile-footer-table" style="display: table; margin: 0 auto;"><div class="mobile-footer-row" style="display: table-row;"><div class="mobile-footer-cell" style="display: table-cell; width: 290px; vertical-align: top;"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td style="color:#999999;font-family:Arial, sans-serif;font-size:14px;font-weight:normal;line-height:114%;text-align:left;text-decoration:none;"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="mobile-footer-text appleFooterLinks webfont-fallback-1" style="color:#999999;font-family:Arial, sans-serif;font-size:14px;font-weight:normal;line-height:114%;text-align:left;text-decoration:none;"><p style="margin:0;"><a href="http://www.glowfromwithinmy.com" rel="noopener noreferrer" style="color:#999999;font-family:Arial, sans-serif;font-size:14px;font-weight:normal;line-height:114%;text-decoration:underline;" target="_blank">GLOW FROM WITHIN</a>- Your go-to destination for Skincare products.</p><p style="margin:0;"><br></p><p style="margin:0;"><em>'Glowing skin is always in.'</em></p><p style="margin:0;"><br></p><p style="margin:0;"><br></p></td></tr></table></td></tr></table></div><div class="mobile-footer-cell mobile-footer-separator" style="display: table-cell; width: 20px; vertical-align: top;"></div><div class="mobile-footer-cell" style="display: table-cell; width: 290px; vertical-align: top;"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><div><div class="mobile-footer-social-table" style="display: table; float: right;"><div class="mobile-footer-social-row" style="display: table-row;"><div style="display: table-cell; vertical-align: top;"><table border="0" cellpadding="0" cellspacing="0"><tr><td style="padding-left: 20px; padding-bottom: 6px;" class="mobile-footer-social-cell"><a target="_blank" href="https://www.facebook.com/%F0%9D%92%A2%F0%9D%93%81%F0%9D%91%9C%F0%9D%93%8C-%F0%9D%90%B9%F0%9D%93%87%F..."><img alt="" border="0" src="https://static.soundestlink.com/images/social_facebook_s_w.png" width="25" height="25" style="vertical-align: top;"></a></td></tr></table></div><div style="display: table-cell; vertical-align: top;"><table border="0" cellpadding="0" cellspacing="0"><tr><td style="padding-left: 20px; padding-bottom: 6px;" class="mobile-footer-social-cell"><a target="_blank" href="https://www.instagram.com/glowithin__/"><img alt="" border="0" src="https://static.soundestlink.com/images/social_instagram_s_w.png" width="25" height="25" style="vertical-align: top;"></a></td></tr></table></div></div></div></div></td></tr><tr><td style="color:#999999;font-family:Arial, sans-serif;font-size:14px;font-weight:normal;line-height:114%;padding-top:20px;text-align:right;text-decoration:none;"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr></tr><tr><td class="mobile-footer-text" style="color:#999999;font-family:Arial, sans-serif;font-size:14px;font-weight:normal;line-height:114%;text-align:right;text-decoration:none;"></td></tr></table></td></tr></table></div></div></div></div></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table>

</div></td></tr></table></td></tr></table></td></tr></table>

</td>

</tr>

</table>

</body>

</html>

KetanKumar · ‎09-09-2021

@DuoDuo

yes its perfect code what's issue?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

DuoDuo · ‎09-09-2021

@KetanKumar

It looks perfect in preview but the actual email I send got no change in background colour in main body.

As the screenshot below, only footer has the background colour but in preview it is all filled.

sabine4 · ‎02-22-2022

Hi, the background colour is only changed at the preview, but not in real life. What can I do?

I have changed the code as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
body {
background-color: #ede6dd;
}
</style>
</head>

KetanKumar · ‎02-22-2022

@sabine4

yes that's current please try

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

sabine4 · ‎02-22-2022

thanks, but unfortunately it is not working

KetanKumar · ‎02-23-2022

@sabine4

oh sorry for that issue if possible to add staff account so i will check this issue and let you know

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

How to change background colour for Email Notification?

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links