Coding to Center All Content in customer Notification emails

Coding to Center All Content in customer Notification emails

heather_1211
New Member
7 0 0

Hello Everyone, 

I would like to know if there is some custom coding that can be added to each of the auto-generated Shopify customer notification emails that will center the LOGO, HEADING, BODY, FOOTER etc. *it's okay if the ORDER SUMMARY table and CUSTOMER INFORMATION areas are left justified*

I realize I will most likely have to add this coding to each individual email. I have already added coding to change the font family and font sizing & color throughout the <p> areas, and I am able to center the logo - however, I really need help with centering the other portions of these emails. 

 

Thanks!

Reply 1 (1)

topnewyork
Globetrotter
633 114 124

To center the logo, heading, body, and footer in Shopify notification emails, add custom HTML and CSS to each email template. Here’s a quick guide:

  • Log in to Shopify > Settings > Notifications.
  • Select an email to edit.


    Add the following code around the elements you want to center:

     

    Center the Logo

     

     

 

<div style="text-align: center;">
  <img src="your-logo-url.png" alt="Your Logo" />
</div>

 

 

Center the Heading

 

 

 

<div style="text-align: center;">
  <h1>Your Heading Here</h1>
</div>

 

 

Center the Body

 

 

 

<div style="text-align: center;">
  <p>Your body content here.</p>
</div>

 

 

 

 

Center the Footer

 

 

 

<div style="text-align: center;">
  <p>Your footer content here.</p>
</div>

 

 

 

 

Example Template

 

 

 

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: 'YourFontFamily';
      font-size: 16px;
      color: #YourColor;
    }
  </style>
</head>
<body>
  <div style="text-align: center;">
    <img src="your-logo-url.png" alt="Your Logo" />
  </div>
  <div style="text-align: center;">
    <h1>Your Heading Here</h1>
  </div>
  <div style="text-align: center;">
    <p>Your body content here.</p>
  </div>
  <div>
    <!-- Order Summary and Customer Information will remain left-aligned -->
  </div>
  <div style="text-align: center;">
    <p>Your footer content here.</p>
  </div>
</body>
</html>

 


Repeat this for each email template. Save changes after updating each one.

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel