Hello Community!
I have a customized Order Notification email, but I need to make some changes, and I understand it is possible only via changing code, which I don’t know at all. Is anyone able to help? Thank you!
Share you Notification email code (use </> button when pasting it here) and tell what you want to change.
Thank you for getting back to me! Somewhere in this code should be the logo, I think. We have a new logo now, and I wonder how we can change it. Thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<!-- Order confirmation email template for Shopify -->
<style type="text/css" data-premailer="ignore">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / Margin and add a background color to the compose a reply window. */
html, body {
Margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="Margin: 16px 0"] {
Margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
th {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* What it does: Fixes Outlook.com line height. */
.ExternalClass,
.ExternalClass * {
line-height: 100% !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
border: none;
Margin: 0 auto;
direction: ltr;
}
div[style*="Margin: 16px 0"] {
Margin:0 !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Overrides blue, underlined link auto-detected by iOS Mail. */
/* Create a class for every link style needed; this template needs only one for the link in the footer. */
/* What it does: A work-around for email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */
.x-gmail-data-detectors, /* Gmail */
.x-gmail-data-detectors *,
.aBn {
border-bottom: none !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Overrides blue, underlined link auto-detected by Gmail. */
u #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
a,
a:link,
a:visited {
color: #142673;
text-decoration: none !important;
}
.header a {
color: #b2b2b2;
text-decoration: none;
text-underline: none;
}
.main a {
color: #142673;
text-decoration: none;
text-underline: none;
word-wrap: break-word;
}
.main .section.customer_and_shipping_address a,
.main .section.shipping_address_and_fulfillment_details a {
color: #646478;
text-decoration: none;
text-underline: none;
word-wrap: break-word;
}
.footer a {
color: #ffffff;
text-transform: none;
text-decoration: none;
text-underline: none;
}
/* What it does: Overrides styles added images. */
img {
border: none !important;
outline: none !important;
text-decoration:none !important;
}
td.menu_bar_1 a:hover,
td.menu_bar_6 a:hover {
color: #142673 !important;
}
th.related_product_wrapper.first {
border-right: 11px solid #edeff2;
padding-right: 5px;
}
th.related_product_wrapper.last {
border-left: 11px solid #edeff2;
padding-left: 5px;
}
</style>
<!--[if (mso)|(mso 16)]>
<style type="text/css" data-premailer="ignore">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]>
<style>
li {
text-indent: -1em; /* Normalise space between bullets and text */
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css" data-premailer="ignore">
/* What it does: Fixes fonts for Google WebFonts; */
[style*="Poppins"] {
font-family: 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}
[style*="Poppins"] {
font-family: 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}
[style*="Poppins"] {
font-family: 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}
[style*="Poppins"] {
font-family: 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700|Poppins:700,400|Poppins:400,700|Poppins:400,400,700&subset=latin-ext" rel="stylesheet" type="text/css" data-premailer="ignore">
<!--<![endif]-->
<style type="text/css" data-premailer="ignore">
/* Media Queries */
/* What it does: Removes right gutter in Gmail iOS app */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6 */
.container {
min-width: 375px !important;
}
}
/* Main media query for responsive styles */
@media only screen and (max-width:480px) {
/* What it does: Overrides email-container's desktop width and forces it into a 100% fluid width. */
.email-container {
width: 100% !important;
min-width: 100% !important;
}
.section > th {
padding: 11px 22px 11px 22px !important;
}
.section.divider > th {
padding: 22px 22px !important;
}
.main .section:first-child > th,
.main .section:first-child > td {
padding-top: 22px !important;
}
.main .section:last-child > th,
.main .section:last-child > td {
padding-bottom: 33px !important;
}
.section.recommended_products > th,
.section.discount > th {
padding: 22px 22px !important;
}
/* What it does: Forces images to resize to the width of their container. */
img.fluid,
img.fluid-centered {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
Margin: auto !important;
box-sizing: border-box;
}
/* and center justify these ones. */
img.fluid-centered {
Margin: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
th.stack-column,
th.stack-column-left,
th.stack-column-center,
th.related_product_wrapper,
.column_1_of_2,
.column_2_of_2 {
display: block !important;
width: 100% !important;
min-width: 100% !important;
direction: ltr !important;
box-sizing: border-box;
}
/* and left justify these ones. */
th.stack-column-left {
text-align: left !important;
}
/* and center justify these ones. */
th.stack-column-center,
th.related_product_wrapper {
text-align: center !important;
border-right: none !important;
border-left: none !important;
}
.column_button,
.column_button > table,
.column_button > table th {
width: 100% !important;
text-align: center !important;
Margin: 0 !important;
}
.column_1_of_2 {
padding-bottom: 22px !important;
}
.column_1_of_2 th {
padding-right: 0 !important;
}
.column_2_of_2 th {
padding-left: 0 !important;
}
.column_text_after_button {
padding: 0 11px !important;
}
/* Adjust product images */
th.table-stack {
padding: 0 !important;
}
th.product-image-wrapper {
padding: 22px 0 11px 0 !important;
}
img.product-image {
width: 240px !important;
max-width: 240px !important;
}
tr.row-border-bottom th.product-image-wrapper {
border-bottom: none !important;
}
th.related_product_wrapper.first,
th.related_product_wrapper.last {
padding-right: 0 !important;
padding-left: 0 !important;
}
.text_banner th.banner_container {
padding: 11px !important;
}
.mobile_app_download .column_1_of_2 .image_container {
padding-bottom: 0 !important;
}
.mobile_app_download .column_2_of_2 .image_container {
padding-top: 0 !important;
}
.image_with_text th.column_1_of_2 {
padding: 22px !important;
padding-bottom: 11px !important;
}
.image_with_text th.column_2_of_2 {
padding: 22px !important;
padding-top: 11px !important;
}
.images_in_2_columns th.column_1_of_2 {
padding: 0 !important;
padding-bottom: 11px !important;
}
.images_in_2_columns th.column_2_of_2 {
padding: 0 !important;
padding-top: 11px !important;
}
}
</style>
<style type="text/css" data-premailer="ignore">
/* Custom Media Queries */
@media only screen and (max-width:480px) {
.section_th {
padding: 44px 22px !important;
}
.header .section_th {
padding: 0 22px 0 22px !important;
}
.header .section_wrapper_th {
padding: 0 22px 0 22px !important;
}
.footer .section_wrapper_th {
padding: 22px 22px 22px 22px !important;
}
.footer .column_2_of_2,
.footer .column_2_of_2 th,
.footer .column_2_of_2 th p {
text-align: left !important;
}
}
</style>
</head>
<body class="body" id="body" leftMargin="0" topMargin="0" Marginwidth="0" Marginheight="0" bgcolor="#edeff2" style="-webkit-text-size-adjust: none; -ms-text-size-adjust: none; Margin: 0; padding: 0;">
<!--[if !mso 9]><!-->
<div style="display: none; overflow: hidden; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; mso-hide: all;">
1 Like
Not full. Ended almost immediately after <body> started…
Oh I am sorry… I am so bad at it! I will post the whole email here, as I need several changes to that: new logo; changes in the text + insert a link to the registration form on our website. Thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<!-- Order confirmation email template for Shopify -->
<style type="text/css" data-premailer="ignore">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / Margin and add a background color to the compose a reply window. */
html, body {
Margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="Margin: 16px 0"] {
Margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
th {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* What it does: Fixes Outlook.com line height. */
.ExternalClass,
.ExternalClass * {
line-height: 100% !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
border: none;
Margin: 0 auto;
direction: ltr;
}
div[style*="Margin: 16px 0"] {
Margin:0 !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Overrides blue, underlined link auto-detected by iOS Mail. */
/* Create a class for every link style needed; this template needs only one for the link in the footer. */
/* What it does: A work-around for email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */
.x-gmail-data-detectors, /* Gmail */
.x-gmail-data-detectors *,
.aBn {
border-bottom: none !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Overrides blue, underlined link auto-detected by Gmail. */
u #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
a,
a:link,
a:visited {
color: #142673;
text-decoration: none !important;
}
.header a {
color: #b2b2b2;
text-decoration: none;
text-underline: none;
}
.main a {
color: #142673;
text-decoration: none;
text-underline: none;
word-wrap: break-word;
}
.main .section.customer_and_shipping_address a,
.main .section.shipping_address_and_fulfillment_details a {
color: #646478;
text-decoration: none;
text-underline: none;
word-wrap: break-word;
}
.footer a {
color: #ffffff;
text-transform: none;
text-decoration: none;
text-underline: none;
}
/* What it does: Overrides styles added images. */
img {
border: none !important;
outline: none !important;
text-decoration:none !important;
}
td.menu_bar_1 a:hover,
td.menu_bar_6 a:hover {
color: #142673 !important;
}
th.related_product_wrapper.first {
border-right: 11px solid #edeff2;
padding-right: 5px;
}
th.related_product_wrapper.last {
border-left: 11px solid #edeff2;
padding-left: 5px;
}
</style>
<!--[if (mso)|(mso 16)]>
<style type="text/css" data-premailer="ignore">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]>
<style>
li {
text-indent: -1em; /* Normalise space between bullets and text */
}
</style>
<![endif]-->
<!--[if !mso]><!-->
<style type="text/css" data-premailer="ignore">
/* What it does: Fixes fonts for Google WebFonts; */
[style*="Poppins"] {
font-family: 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}
[style*="Poppins"] {
font-family: 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}
[style*="Poppins"] {
font-family: 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}
[style*="Poppins"] {
font-family: 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700|Poppins:700,400|Poppins:400,700|Poppins:400,400,700&subset=latin-ext" rel="stylesheet" type="text/css" data-premailer="ignore">
<!--<![endif]-->
<style type="text/css" data-premailer="ignore">
/* Media Queries */
/* What it does: Removes right gutter in Gmail iOS app */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6 */
.container {
min-width: 375px !important;
}
}
/* Main media query for responsive styles */
@media only screen and (max-width:480px) {
/* What it does: Overrides email-container's desktop width and forces it into a 100% fluid width. */
.email-container {
width: 100% !important;
min-width: 100% !important;
}
.section > th {
padding: 11px 22px 11px 22px !important;
}
.section.divider > th {
padding: 22px 22px !important;
}
.main .section:first-child > th,
.main .section:first-child > td {
padding-top: 22px !important;
}
.main .section:last-child > th,
.main .section:last-child > td {
padding-bottom: 33px !important;
}
.section.recommended_products > th,
.section.discount > th {
padding: 22px 22px !important;
}
/* What it does: Forces images to resize to the width of their container. */
img.fluid,
img.fluid-centered {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
Margin: auto !important;
box-sizing: border-box;
}
/* and center justify these ones. */
img.fluid-centered {
Margin: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
th.stack-column,
th.stack-column-left,
th.stack-column-center,
th.related_product_wrapper,
.column_1_of_2,
.column_2_of_2 {
display: block !important;
width: 100% !important;
min-width: 100% !important;
direction: ltr !important;
box-sizing: border-box;
}
/* and left justify these ones. */
th.stack-column-left {
text-align: left !important;
}
/* and center justify these ones. */
th.stack-column-center,
th.related_product_wrapper {
text-align: center !important;
border-right: none !important;
border-left: none !important;
}
.column_button,
.column_button > table,
.column_button > table th {
width: 100% !important;
text-align: center !important;
Margin: 0 !important;
}
.column_1_of_2 {
padding-bottom: 22px !important;
}
.column_1_of_2 th {
padding-right: 0 !important;
}
.column_2_of_2 th {
padding-left: 0 !important;
}
.column_text_after_button {
padding: 0 11px !important;
}
/* Adjust product images */
th.table-stack {
padding: 0 !important;
}
th.product-image-wrapper {
padding: 22px 0 11px 0 !important;
}
img.product-image {
width: 240px !important;
max-width: 240px !important;
}
tr.row-border-bottom th.product-image-wrapper {
border-bottom: none !important;
}
th.related_product_wrapper.first,
th.related_product_wrapper.last {
padding-right: 0 !important;
padding-left: 0 !important;
}
.text_banner th.banner_container {
padding: 11px !important;
}
.mobile_app_download .column_1_of_2 .image_container {
padding-bottom: 0 !important;
}
.mobile_app_download .column_2_of_2 .image_container {
padding-top: 0 !important;
}
.image_with_text th.column_1_of_2 {
padding: 22px !important;
padding-bottom: 11px !important;
}
.image_with_text th.column_2_of_2 {
padding: 22px !important;
padding-top: 11px !important;
}
.images_in_2_columns th.column_1_of_2 {
padding: 0 !important;
padding-bottom: 11px !important;
}
.images_in_2_columns th.column_2_of_2 {
padding: 0 !important;
padding-top: 11px !important;
}
}
</style>
<style type="text/css" data-premailer="ignore">
/* Custom Media Queries */
@media only screen and (max-width:480px) {
.section_th {
padding: 44px 22px !important;
}
.header .section_th {
padding: 0 22px 0 22px !important;
}
.header .section_wrapper_th {
padding: 0 22px 0 22px !important;
}
.footer .section_wrapper_th {
padding: 22px 22px 22px 22px !important;
}
.footer .column_2_of_2,
.footer .column_2_of_2 th,
.footer .column_2_of_2 th p {
text-align: left !important;
}
}
</style>
</head>
<body class="body" id="body" leftMargin="0" topMargin="0" Marginwidth="0" Marginheight="0" bgcolor="#edeff2" style="-webkit-text-size-adjust: none; -ms-text-size-adjust: none; Margin: 0; padding: 0;">
<!--[if !mso 9]><!-->
<div style="display: none; overflow: hidden; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; mso-hide: all;">
Thank you for your booking!We are now processing your order. If you chose to pay with PayPal in full, you will automatically receive a second email with the forms that you need to fill out and return to info@seascopefrance.com.If you selected the 50% deposit option then we will call you in the next few days to process the payment and the forms will be emailed to you once that deposit payment is received.
</div>
<!--<![endif]-->
<!-- BEGIN: CONTAINER -->
<table class="container container_header" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; min-width: 100%;" role="presentation" bgcolor="#edeff2">
<tbody>
<tr>
<th valign="top" style="mso-line-height-rule: exactly;">
<center style="width: 100%;">
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center" style="width: 600px; min-width: 600px; max-width: 600px; Margin: auto;" class="email-container" role="presentation">
<tbody>
<tr>
<th valign="top" style="mso-line-height-rule: exactly;">
<!-- BEGIN : SECTION : HEADER -->
<table class="section_wrapper header" data-id="header" id="section-header" border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="min-width: 100%;" role="presentation" bgcolor="#edeff2">
<tr>
<td class="section_wrapper_th" style="mso-line-height-rule: exactly; padding: 0 44px;" bgcolor="#edeff2">
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="min-width: 100%;" role="presentation">
<tr>
<th class="column_logo" style="mso-line-height-rule: exactly; padding-top: 22px; padding-bottom: 22px; Margin: 0;" align="left" bgcolor="#edeff2">
<!-- Logo : BEGIN -->
<a href="https://{{ shop.domain }}/tools/emails/click/order-confirmation/1/logo/link?url={% capture oe_uri %}{{ shop.url }}{% endcapture %}{{ oe_uri | strip | url_encode }}" target="_blank" style="color: #b2b2b2; text-decoration: none !important; text-underline: none;">
<img src="https://cdn.shopify.com/s/files/1/0282/0269/6739/files/SEPTEMBER_-_INSTA_POSTS_1_152x182.png?fit=max&w=200" class="logo " width="100" border="0" style="width: 100px; height: auto !important; display: block; text-align: left; Margin: 0;">
</a>
<!-- Logo : END -->
</th>
</tr>
</table>
</td>
</tr>
</table>
<!-- END : SECTION : HEADER -->
</th>
</tr>
</tbody>
</table>
</center>
</th>
</tr>
</tbody>
</table>
<!-- END : CONTAINER -->
<!-- BEGIN: CONTAINER -->
<table class="container container_main" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; min-width: 100%;" role="presentation" bgcolor="#edeff2">
<tbody>
<tr>
<th valign="top" style="mso-line-height-rule: exactly;">
<center style="width: 100%;">
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center" style="width: 600px; min-width: 600px; max-width: 600px; Margin: auto;" class="email-container" role="presentation">
<tbody>
<tr>
<th valign="top" style="mso-line-height-rule: exactly;">
<!-- BEGIN : SECTION : MAIN -->
<table class="section_wrapper main" data-id="main" id="section-main" border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="min-width: 100%; text-align: left;" role="presentation" bgcolor="#edeff2">
<tr>
<td class="section_wrapper_th" style="mso-line-height-rule: exactly; padding-top: 22px;" align="left" bgcolor="#edeff2">
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="min-width: 100%;" id="mixContainer" role="presentation">
<!-- BEGIN SECTION: Heading -->
<tr id="section-5870026" class="section heading">
<th style="mso-line-height-rule: exactly; padding: 22px 44px 11px;" align="left" bgcolor="#edeff2">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<tr>
<th style="mso-line-height-rule: exactly;" align="left" bgcolor="#edeff2" valign="top">
<h1 data-key="5870026_heading" style="font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,'Poppins'; font-size: 28px; line-height: 38px; font-weight: 700; color: #142673; text-transform: none; Margin: 0;">Order Confirmation</h1>
</th>
</tr>
</table>
</th>
</tr>
<!-- END SECTION: Heading -->
<!-- BEGIN SECTION: Introduction -->
<tr id="section-5870027" class="section introduction">
<th style="mso-line-height-rule: exactly; padding: 11px 44px;" align="left" bgcolor="#edeff2">
{% if customer.first_name != blank or billing_address.first_name != blank %}
<p style="mso-line-height-rule: exactly; direction: ltr; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,'Poppins'; font-size: 15px; line-height: 22px; font-weight: 400; text-transform: none; color: #646478; Margin: 0 0 11px;" align="left">
<span data-key="5870027_greeting_text" style="text-align: left; direction: ltr; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,'Poppins'; font-size: 15px; line-height: 22px; font-weight: 400; text-transform: none; color: #646478;">
Hi
</span>
{{ customer.first_name | default: billing_address.first_name }},
</p>
{% endif %}
{% if custom_message != blank %}
<p style="mso-line-height-rule: exactly; direction: ltr; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,'Poppins'; font-size: 15px; line-height: 22px; font-weight: 400; text-transform: none; color: #646478; Margin: 11px 0;" align="left">{{ custom_message }}</p>
{% endif %}
<span data-key="5870027_introduction_text" class="text" style="text-align: left; direction: ltr; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,'Poppins'; font-size: 15px; line-height: 22px; font-weight: 400; text-transform: none; color: #646478;">
<p style="mso-line-height-rule: exactly; direction: ltr; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,'Poppins'; font-size: 15px; line-height: 22px; font-weight: 400; text-transform: none; color: #646478; Margin: 11px 0 0;" align="left"></p>
<p style="mso-line-height-rule: exactly; direction: ltr; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,'Poppins'; font-size: 15px; line-height: 22px; font-weight: 400; text-transform: none; color: #646478; Margin: 11px 0 0;" align="left">Thank you for your booking!</p>
It looks like I cant paste the whole code as it is too long.
The logo image seems to be on the line 373:
<img src="https://cdn.shopify.com/s/files/1/0282/0269/6739/files/SEPTEMBER_-_INSTA_POSTS_1_152x182.png?fit=max&w=200" class="logo " width="100" border="0" style="width: 100px; height: auto !important; display: block; text-align: left; Margin: 0;">
As for the rest – maybe pastebin ?
Looks more complex than default templates – maybe there was an app to create/customize those?
Thank you for your reply. So, can I just change the link to a new logo in the code?
What is a pastebin please?
I honestly don’t know if an app was used, but if it was, it could be Orderly Emails.
Yes, replace the image URL to change the logo.
pastebin.com is a service to share pieces of code and I believe it will accept larger files.
If the app was used, maybe you would be able to update the template with the app, however it’s not guaranteed.
Hi Tim! Thank you for all your replies. It looks too complicated for me. I’ve just spent 20 mins looking for the link to change it, and I can’t find it.
I wonder if it is possible to find an expert / developer in the community who would take the project and make all the necessary changes for us?