Order Confirmation Email Preview

This is how the confirmation email appears to customers

HTML Template

    <div style="background:#E8E3DC;padding:40px 20px;font-family:'Inter',sans-serif;margin:0;">
    <div style="max-width:560px;margin:0 auto;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.05);">
      <!-- Header -->
      <div style="background:#E8E3DC;padding:36px 32px;text-align:center;">
        <img src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/6995441aa29ee6dedd2cbc53/3a81ee4a8_Screenshot2026-03-11at001312.png" alt="DRAPE LONDON" style="height:90px;width:auto;display:block;margin:0 auto;" />
      </div>

        <!-- Main Content -->
        <div style="padding:40px 32px;">
          <!-- Greeting -->
          <h2 style="font-family:'Cormorant Garamond',serif;font-weight:300;font-size:26px;color:#3D0C0C;letter-spacing:0.06em;margin:0 0 8px;text-align:center;">Order Confirmed</h2>
          <p style="text-align:center;color:#999;font-size:13px;margin:0 0 24px;">Thank you for your purchase</p>

          <!-- Order Number -->
          <div style="background:#F5F0EB;padding:16px;border-left:4px solid #C4A265;margin:24px 0;">
            <p style="font-size:12px;letter-spacing:0.15em;color:#666;margin:0 0 4px;text-transform:uppercase;">Order Number</p>
            <p style="font-size:18px;color:#3D0C0C;font-weight:500;margin:0;font-family:'Cormorant Garamond',serif;letter-spacing:0.05em;">DL-234567</p>
          </div>

          <!-- Personal Message -->
          <p style="font-size:14px;color:#2D2D2D;line-height:1.8;margin:24px 0;">Dear Sarah Ahmed,</p>
          <p style="font-size:14px;color:#2D2D2D;line-height:1.8;margin:0 0 24px;">Thank you for choosing Drape London. Your order has been confirmed and we're carefully preparing it for shipment. You'll receive a tracking number as soon as your items are on their way.</p>

          <!-- Order Items -->
          <div style="border:1px solid #E8E3DC;padding:24px;margin:24px 0;background:#fafaf8;">
            <p style="font-size:12px;letter-spacing:0.15em;color:#666;margin:0 0 16px;text-transform:uppercase;font-weight:500;">Order Details</p>
            
            <!-- Items -->
            
              <div style="padding:12px 0;border-bottom:1px solid #E8E3DC;">
                <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;">
                  <div>
                    <p style="font-size:13px;color:#2D2D2D;margin:0;font-weight:500;">Premium Silk Hijab</p>
                    <p style="font-size:12px;color:#999;margin:4px 0 0;">Qty: 2 • Midnight Blue</p>
                  </div>
                  <p style="font-size:13px;color:#3D0C0C;margin:0;font-weight:500;">£90.00</p>
                </div>
              </div>
            
              <div style="padding:12px 0;border-bottom:1px solid #E8E3DC;">
                <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;">
                  <div>
                    <p style="font-size:13px;color:#2D2D2D;margin:0;font-weight:500;">Luxury Abaya</p>
                    <p style="font-size:12px;color:#999;margin:4px 0 0;">Qty: 1 • Charcoal</p>
                  </div>
                  <p style="font-size:13px;color:#3D0C0C;margin:0;font-weight:500;">£95.00</p>
                </div>
              </div>
            

            <!-- Total -->
            <div style="padding:12px 0;margin-top:8px;border-top:2px solid #3D0C0C;">
              <div style="display:flex;justify-content:space-between;align-items:center;">
                <p style="font-size:14px;color:#3D0C0C;margin:0;font-weight:600;font-family:'Cormorant Garamond',serif;letter-spacing:0.05em;">Total</p>
                <p style="font-size:18px;color:#3D0C0C;margin:0;font-weight:600;font-family:'Cormorant Garamond',serif;letter-spacing:0.05em;">£185.00</p>
              </div>
            </div>
          </div>

          <!-- Shipping Address -->
          <div style="background:#F5F0EB;padding:16px;margin:24px 0;">
            <p style="font-size:12px;letter-spacing:0.15em;color:#666;margin:0 0 8px;text-transform:uppercase;font-weight:500;">Shipping Address</p>
            <p style="font-size:13px;color:#2D2D2D;line-height:1.8;margin:0;">123 High Street, London, W1A 1AA, United Kingdom</p>
          </div>

          <!-- Support -->
          <div style="margin:32px 0 0;padding-top:24px;border-top:1px solid #E8E3DC;">
            <p style="font-size:12px;color:#666;line-height:1.7;margin:0;">Have questions about your order? Our team is here to help.</p>
            <p style="font-size:12px;color:#666;line-height:1.7;margin:8px 0 0;">
              <a href="mailto:hello@drape-ldn.com" style="color:#3D0C0C;text-decoration:none;font-weight:500;">hello@drape-ldn.com</a>
            </p>
          </div>
        </div>

        <!-- Footer -->
        <div style="background:#E8E3DC;padding:24px 32px;text-align:center;border-top:1px solid #E8E3DC;">
          <p style="color:#3D0C0C;font-size:12px;letter-spacing:0.08em;margin:0 0 8px;font-weight:500;">© 2026 DRAPE LONDON</p>
          <p style="color:#666;font-size:11px;margin:0;">Handcrafted with care in the UK</p>
        </div>
      </div>
    </div>