Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I'm using the Shopify Dawn theme, and the default layout of the email confirmation places the company logo on the left side and the order number on the right side. I want to move the order number from the right side to underneath the logo.
Does anyone know how to change the code?
Hi,
Edit the "Order Confirmation" email template and move the order number code to below the logo , also you can use css for styling
Example of code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
color: #333;
background-color: #f7f7f7;
margin: 0;
padding: 0;
}
.email-wrapper {
width: 100%;
background-color: #f7f7f7;
padding: 20px;
}
.email-content {
background-color: #fff;
max-width: 600px;
margin: 0 auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.email-header {
text-align: center;
padding-bottom: 20px;
}
.email-header img {
max-width: 200px;
margin-bottom: 10px;
}
.email-header p {
margin: 0;
font-size: 18px;
font-weight: bold;
}
.email-body {
padding: 20px 0;
}
</style>
</head>
<body>
<div class="email-wrapper">
<div class="email-content">
<div class="email-header">
<img src="{{ shop.logo | img_url: 'medium' }}" alt="{{ shop.name }}" />
<p>Order #{{ order.name }}</p>
</div>
<div class="email-body">
<!-- Your existing email content goes here -->
</div>
</div>
</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