Shopify dawn them email confirmation: position of logo and order number

Shopify dawn them email confirmation: position of logo and order number

dasfwqqerwerqt
Visitor
1 0 0

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?

Reply 1 (1)

Small_Task_Help
Shopify Partner
830 28 75

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>

 

To Get Shopify Experts Help, E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Expert Agency
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad