Top Menu

Here’s an order confirmation email template with products, formatted in HTML and CSS:

<!DOCTYPE html>
<html>
<head>
  <title>Order Confirmation for [Order Number]</title>
  <style>
    /* Define styles for the table */
    table {
      border-collapse: collapse;
      margin-bottom: 20px;
      width: 100%;
    }

    th, td {
      border: 1px solid black;
      padding: 10px;
      text-align: left;
    }

    th {
      background-color: #ddd;
    }

    tfoot td {
      font-weight: bold;
    }

    /* Define styles for the header */
    .header {
      background-color: #f2f2f2;
      padding: 20px;
      text-align: center;
    }

    /* Define styles for the sections */
    .section {
      margin-bottom: 20px;
    }

    .section h3 {
      margin-bottom: 10px;
    }

    .section p {
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>Order Confirmation for [Order Number]</h1>
  </div>
  <div class="section">
    <h3>Your Order Details:</h3>
    <table>
      <thead>
        <tr>
          <th>Product Name</th>
          <th>Quantity</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>[Product Name]</td>
          <td>[Quantity]</td>
          <td>[Price]</td>
        </tr>
        <tr>
          <td>[Product Name]</td>
          <td>[Quantity]</td>
          <td>[Price]</td>
        </tr>
        <tr>
          <td>[Product Name]</td>
          <td>[Quantity]</td>
          <td>[Price]</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Total Amount:</td>
          <td>[Total Amount]</td>
        </tr>
      </tfoot>
    </table>
  </div>
  <div class="section">
    <h3>Billing Information:</h3>
    <p>[Customer Name]</p>
    <p>[Billing Address]</p>
    <p>[City, State, Zip Code]</p>
    <p>[Country]</p>
    <p>[Phone Number]</p>
  </div>
  <div class="section">
    <h3>Shipping Information:</h3>
    <p>[Shipping Address]</p>
    <p>[City, State, Zip Code]</p>
    <p>[Country]</p>
    <p>[Phone Number]</p>
  </div>
  <p>We will send you an email as soon as your order has shipped, which will include tracking information. If you have any questions or concerns about your order, please don't hesitate to contact us.</p>
  <p>Thank you for choosing [Company Name]! We appreciate your business.</p>
</body>
</html>

Please note that you will need to replace the placeholder values (enclosed in brackets []) with the actual values from your order confirmation email.

About The Author

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Close