We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Coding to Center All Content in customer Notification emails

Coding to Center All Content in customer Notification emails

heather_1211
New Member
8 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
Astronaut
1552 191 253

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
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month