Shopify themes, liquid, logos, and UX
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!
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:
Add the following code around the elements you want to center:
<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 style="text-align: center;">
<p>Your footer content here.</p>
</div>
<!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.
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024