All things Shopify and commerce
Hello guys,
Im not sure why but for some reason the background color of my email on mobile is transparent ive tried to change it but it doesnt work. If anyone would be willing to help me that would be great. I was also wondering how I can make a nice responsive product display under the button in the code. But mainly I need help with the background color on mobile not showing. I would really appreciate it if you can help me. Also im not sure why its so long I made it on a template editor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <meta name="x-apple-disable-message-reformatting"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="telephone=no" name="format-detection"> <title></title> <!--[if (mso 16)]> <style type="text/css"> a {text-decoration: none;} </style> <![endif]--> <!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]--> <!--[if gte mso 9]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG></o:AllowPNG> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--> <style type="text/css"> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf); } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu52xPKTM1K9nz.ttf); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9vAx05IsDqlA.ttf); } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51S7ABc9AMX6lJBP.ttf); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlvAx05IsDqlA.ttf); } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBhc9AMX6lJBP.ttf); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtvAx05IsDqlA.ttf); } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 900; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TLBBc9AMX6lJBP.ttf); } </style> <!--[if !mso]><!-- --> <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet"> <!--<![endif]--> </head> <body data-new-gr-c-s-loaded="14.1166.0"> /* END RESPONSIVE STYLES */ <style type="text/css"> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf); } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu52xPKTM1K9nz.ttf); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9vAx05IsDqlA.ttf); } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51S7ABc9AMX6lJBP.ttf); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlvAx05IsDqlA.ttf); } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBhc9AMX6lJBP.ttf); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtvAx05IsDqlA.ttf); } @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 900; src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TLBBc9AMX6lJBP.ttf); } /* CONFIG STYLES Please do not delete and edit CSS styles below */ /* IMPORTANT THIS STYLES MUST BE ON FINAL EMAIL */ #outlook a { padding: 0; } .es-button { mso-style-priority: 100 !important; text-decoration: none !important; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .es-desk-hidden { display: none; float: left; overflow: hidden; width: 0; max-height: 0; line-height: 0; mso-hide: all; } /* END OF IMPORTANT */ body { width: 100%; font-family: arial, 'helvetica neue', helvetica, sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; border-spacing: 0px; } table td, body, .es-wrapper { padding: 0; Margin: 0; } .es-content, .es-header, .es-footer { table-layout: fixed !important; width: 100%; } img { display: block; border: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } p, hr { Margin: 0; } h1, h2, h3, h4, h5 { Margin: 0; line-height: 120%; mso-line-height-rule: exactly; font-family: arial, 'helvetica neue', helvetica, sans-serif; } p, ul li, ol li, a { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; } .es-left { float: left; } .es-right { float: right; } .es-p5 { padding: 5px; } .es-p5t { padding-top: 5px; } .es-p5b { padding-bottom: 5px; } .es-p5l { padding-left: 5px; } .es-p5r { padding-right: 5px; } .es-p10 { padding: 10px; } .es-p10t { padding-top: 10px; } .es-p10b { padding-bottom: 10px; } .es-p10l { padding-left: 10px; } .es-p10r { padding-right: 10px; } .es-p15 { padding: 15px; } .es-p15t { padding-top: 15px; } .es-p15b { padding-bottom: 15px; } .es-p15l { padding-left: 15px; } .es-p15r { padding-right: 15px; } .es-p20 { padding: 20px; } .es-p20t { padding-top: 20px; } .es-p20b { padding-bottom: 20px; } .es-p20l { padding-left: 20px; } .es-p20r { padding-right: 20px; } .es-p25 { padding: 25px; } .es-p25t { padding-top: 25px; } .es-p25b { padding-bottom: 25px; } .es-p25l { padding-left: 25px; } .es-p25r { padding-right: 25px; } .es-p30 { padding: 30px; } .es-p30t { padding-top: 30px; } .es-p30b { padding-bottom: 30px; } .es-p30l { padding-left: 30px; } .es-p30r { padding-right: 30px; } .es-p35 { padding: 35px; } .es-p35t { padding-top: 35px; } .es-p35b { padding-bottom: 35px; } .es-p35l { padding-left: 35px; } .es-p35r { padding-right: 35px; } .es-p40 { padding: 40px; } .es-p40t { padding-top: 40px; } .es-p40b { padding-bottom: 40px; } .es-p40l { padding-left: 40px; } .es-p40r { padding-right: 40px; } .es-menu td { border: 0; } .es-menu td a img { display: inline-block !important; vertical-align: middle; } /* END CONFIG STYLES */ s { text-decoration: line-through; } p, ul li, ol li { font-family: arial, 'helvetica neue', helvetica, sans-serif; line-height: 150%; } ul li, ol li { Margin-bottom: 15px; margin-left: 0; } a { text-decoration: underline; } .es-menu td a { text-decoration: none; display: block; font-family: arial, 'helvetica neue', helvetica, sans-serif; } .es-wrapper { width: 100%; height: 100%; background-repeat: repeat; background-position: center top; } .es-wrapper-color, .es-wrapper { background-color: #f6f6f6; } .es-header { background-color: transparent; background-repeat: repeat; background-position: center top; } .es-header-body { background-color: #ffffff; } .es-header-body p, .es-header-body ul li, .es-header-body ol li { color: #333333; font-size: 14px; } .es-header-body a { color: #2cb543; font-size: 14px; } .es-content-body { background-color: #ffffff; } .es-content-body p, .es-content-body ul li, .es-content-body ol li { color: #333333; font-size: 14px; } .es-content-body a { color: #2cb543; font-size: 14px; } .es-footer { background-color: transparent; background-repeat: repeat; background-position: center top; } .es-footer-body { background-color: #ffffff; } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li { color: #333333; font-size: 14px; } .es-footer-body a { color: #2cb543; font-size: 14px; } .es-infoblock, .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li { line-height: 120%; font-size: 12px; color: #cccccc; } .es-infoblock a { font-size: 12px; color: #cccccc; } h1 { font-size: 30px; font-style: normal; font-weight: normal; color: #333333; } h2 { font-size: 24px; font-style: normal; font-weight: normal; color: #333333; } h3 { font-size: 20px; font-style: normal; font-weight: normal; color: #333333; } .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size: 30px; } .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size: 24px; } .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { font-size: 20px; } a.es-button, button.es-button { padding: 10px 20px 10px 20px; display: inline-block; background: #31cb4b; border-radius: 30px; font-size: 18px; font-family: arial, 'helvetica neue', helvetica, sans-serif; font-weight: normal; font-style: normal; line-height: 120%; color: #ffffff; text-decoration: none; width: auto; text-align: center; mso-padding-alt: 0; mso-border-alt: 10px solid #31cb4b; } .es-button-border { border-style: solid solid solid solid; border-color: #2cb543 #2cb543 #2cb543 #2cb543; background: #31cb4b; border-width: 0px 0px 2px 0px; display: inline-block; border-radius: 30px; width: auto; } .es-button img { display: inline-block; vertical-align: middle; } /* RESPONSIVE STYLES Please do not delete and edit CSS styles below. If you don't need responsive layout, please delete this section. */ @media only screen and (max-width: 600px) { body { background-color: #cccccc; } p, ul li, ol li, a { line-height: 150% !important; } h1, h2, h3, h1 a, h2 a, h3 a { line-height: 120% !important; } h1 { font-size: 30px !important; text-align: left; } h2 { font-size: 24px !important; text-align: left; } h3 { font-size: 20px !important; text-align: left; } .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size: 30px !important; text-align: left; } .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size: 24px !important; text-align: left; } .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { font-size: 20px !important; text-align: left; } .es-menu td a { font-size: 16px !important; } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size: 20px !important; } .es-content-body p, .es-content-body ul li, .es-content-body ol li, .es-content-body a { font-size: 16px !important; } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size: 16px !important; } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size: 14px !important; } *[class="gmail-fix"] { display: none !important; } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align: center !important; } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align: right !important; } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align: left !important; } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display: inline !important; } .es-button-border { display: inline-block !important; } a.es-button, button.es-button { font-size: 18px !important; display: inline-block !important; } .es-adaptive table, .es-left, .es-right { width: 100% !important; } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width: 100% !important; max-width: 600px !important; } .es-adapt-td { display: block !important; width: 100% !important; } .adapt-img { width: 100% !important; height: auto !important; } .es-m-p0 { padding: 0px !important; } .es-m-p0r { padding-right: 0px !important; } .es-m-p0l { padding-left: 0px !important; } .es-m-p0t { padding-top: 0px !important; } .es-m-p0b { padding-bottom: 0 !important; } .es-m-p20b { padding-bottom: 20px !important; } .es-mobile-hidden, .es-hidden { display: none !important; } tr.es-desk-hidden, td.es-desk-hidden, table.es-desk-hidden { width: auto !important; overflow: visible !important; float: none !important; max-height: inherit !important; line-height: inherit !important; } tr.es-desk-hidden { display: table-row !important; } table.es-desk-hidden { display: table !important; } td.es-desk-menu-hidden { display: table-cell !important; } .es-menu td { width: 1% !important; } .es-menu-z8chm1c5 .es-adapt-td { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } .es-menu-z8chm1c5 td { border: 0 !important; } .es-menu-z8chm1c5 td:not(:last-child) { border-bottom: 2px solid #DBD9D6 !important; } table.es-table-not-adapt, .esd-block-html table { width: auto !important; } table.es-social { display: inline-block !important; } table.es-social td { display: inline-block !important; } .es-desk-hidden { display: table-row !important; width: auto !important; overflow: visible !important; max-height: inherit !important; } } .layout { padding-top: 10px !important; padding-bottom: 30px !important; padding-left: 10px !important; padding-right: 10px !important; } .row-container { padding: 0 !important; } .row-container-td { padding-left: 0 !important; padding-right: 0 !important; } .element-td { padding-left: 0 !important; padding-right: 0 !important; } .element-td.text-type, .element-td.button-type { padding-left: 10px !important; padding-right: 10px !important; } .row.mobile-stacked .row-column { display: block !important; width: 600px !important; } .icons-element.mobile-stacked .icon-item { display: block !important; padding: 4px 8px !important; height: auto !important; } .order-confirmation-table { width: 100%; border-collapse: collapse; /* Ensures table fills available width within 600px max */ } .order-item-row td { padding: 15px; border-bottom: 1px solid #ddd; } .product-image-cell { width: 40%; /* Adjust width to accommodate both image and info */ } .product-image-cell img { width: 100%; max-width: 100px; } .product-info-cell { width: 60%; text-align: left; /* Adjust width to accommodate remaining space */ } .product-vendor { font-weight: bold; } .product-price { font-weight: bold; } </style> <!--[if !mso]><!-- --> <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet"> <!--<![endif]--> <div dir="ltr" class="es-wrapper-color"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" color="#f6f6f6"></v:fill> </v:background> <![endif]--> <table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="esd-email-paddings" valign="top"> <table class="esd-header-popover es-header" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td class="esd-stripe" align="center"> <table class="es-header-body" width="570" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center"> <tbody> <tr> <td class="es-p20t es-p20r es-p20l esd-structure" align="left"> <!--[if mso]><table width="530" cellpadding="0" cellspacing="0"><tr><td width="163" valign="top"><![endif]--> <table class="es-left" cellspacing="0" cellpadding="0" align="left"> <tbody> <tr> <td class="es-m-p0r es-m-p20b esd-container-frame" width="143" valign="top" align="center"> <table width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td align="center" class="esd-block-spacer" height="40"></td> </tr> </tbody> </table> </td> <td class="es-hidden" width="20"></td> </tr> </tbody> </table> <!--[if mso]></td><td width="201" valign="top"><![endif]--> <table class="es-left" cellspacing="0" cellpadding="0" align="left"> <tbody> <tr> <td class="esd-container-frame es-m-p20b" width="201" align="left"> <table width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td align="center" class="esd-block-image" style="font-size: 0px;"><a target="_blank"><img class="adapt-img" src="https://eicecyb.stripocdn.email/content/guids/CABINET_54569bee0c712796f683f5fec9137df21feab82817c286fc60442e28451e9202/images/untitled_design_4_jgw.png" alt style="display: block;" width="150"></a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!--[if mso]></td><td width="20"></td><td width="146" valign="top"><![endif]--> <table cellpadding="0" cellspacing="0" class="es-right" align="right"> <tbody> <tr> <td width="146" align="left" class="esd-container-frame"> <table cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td align="center" class="esd-block-spacer" height="40"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <!--[if mso]></td></tr></table><![endif]--> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <table class="es-content" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td class="esd-stripe" align="center"> <table class="es-content-body" width="570" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center"> <tbody> <tr> <td class="esd-structure es-p20r es-p20l" align="left"> <table width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td class="esd-container-frame" width="530" valign="top" align="center"> <table width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td align="center" class="esd-block-spacer es-p15b es-p10r es-p10l" style="font-size: 0px;"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="border-bottom: 1px solid #f07f83; background: unset; height: 1px; width: 100%; margin: 0px;"></td> </tr> </tbody> </table> </td> </tr> <tr> <td class="esd-block-menu" esd-tmp-menu-padding="10|10" esd-tmp-divider="2|solid|#DBD9D6"> <table cellpadding="0" cellspacing="0" width="100%" class="es-menu es-menu-z8chm1c5"> <tbody> <tr class="links"> <td align="center" valign="top" width="33.33%" class="es-p10t es-p10b es-p5r es-p5l es-adapt-td" style="padding-top: 10px;"><a target="_blank" href="https://" style="color: #f07f83;">SHOP</a></td> <td align="center" valign="top" width="33.33%" class="es-p10t es-p10b es-p5r es-p5l es-adapt-td" style="padding-top: 10px; border-left: 2px solid #dbd9d6;"><a target="_blank" href="https://" style="color: #f07f83;">CONTACT</a></td> <td align="center" valign="top" width="33.33%" class="es-p10t es-p10b es-p5r es-p5l es-adapt-td" style="padding-top: 10px; border-left: 2px solid #dbd9d6;"><a target="_blank" href="https://" style="color: #f07f83;">OUR STORY</a></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <table class="esd-footer-popover es-footer" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td class="esd-stripe" align="center"> <table class="es-footer-body" width="570" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center"> <tbody> <tr> <td class="esd-structure es-p25t es-p20r es-p20l" align="left"> <table cellspacing="0" cellpadding="0" width="100%"> <tbody> <tr> <td class="esd-container-frame" width="530" align="left"> <table width="100%" cellspacing="0" cellpadding="0"> <tbody> <tr> <td align="center" class="esd-block-text"> <p style="font-size: 30px; color: #444444;"><strong>Order Confirmation</strong></p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="esd-structure es-p20t es-p20r es-p20l" align="left"> <table cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td width="530" class="esd-container-frame" align="center" valign="top"> <table cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td align="left" class="esd-block-text es-p15b"> <p style="font-size: 25px; color: #444444;">Hey, {{ customer.name }}</p> </td> </tr> <tr> <td align="left" class="esd-block-text"> <p style="color: #444444;">Thank you for your purchase, this email confirms your order. We will send you another email as soon as your order is shipped.</p> </td> </tr> <tr> <td align="center" class="esd-block-text es-p20t es-p5b"> <p style="font-size: 26px; color: #444444;">Order No. <strong>{{ order_name }}</strong></p> </td> </tr> <tr> <td align="center" class="esd-block-image es-p20t es-p15r es-p15l" style="font-size: 0px;"><a target="_blank"><img class="adapt-img" src="https://eicecyb.stripocdn.email/content/guids/CABINET_54569bee0c712796f683f5fec9137df21feab82817c286fc60442e28451e9202/images/aaa_VnF.png" alt style="display: block;" width="500"></a></td> </tr> <tr> <td align="center" class="esd-block-button es-p10t"><span class="es-button-border" style="border-radius: 0px; border-color: #f07f83; border-top-width: 4px; border-right-width: 15px; border-left-width: 15px; background: #f07f83;"><a href="{{ order_status_url }}" class="es-button" target="_blank" style="background: #f07f83; border-radius: 0px; padding: 10px 20px; mso-border-alt: 10px solid #f07f83">View Order Status ></a></span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </body> </html>
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025