How to modify an order statement

Online Store and Theme Development
1

Hello, I would like to know how to correct the invoice (or statement) details. I edited an existing order, but the invoice still displays the old information. Specifically, the original order included:

Small tote bag: ¥40
Medium tote bag: ¥40
Product A: ¥3,000
After editing the order, I removed the medium tote bag, so the new order is:

Small tote bag: ¥40
Product A: ¥3,000
However, the invoice still shows a total amount of ¥3,080, reflecting the original order. Is there a way to display the updated total of ¥3,040 on the invoice or statement? If so, could you please explain how to make that adjustment?

Thank you in advance!

The current code is as follows

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{{ shop.name }} - 注文明細書</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      color: #333;
      background: #fff;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 30px;
    }

    .shop-name {
      font-size: 24px;
      font-weight: normal;
    }

    .order-info {
      text-align: right;
      font-size: 15px;
      line-height: 1.8;
    }

    .addresses {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      margin-bottom: 30px;
      font-size: 15px;
    }

    .address-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .address-content {
      line-height: 1.8;
    }

    .items {
      width: 100%;
      margin-bottom: 20px;
      table-layout: fixed;
    }

    .items-header {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(80px, 1fr);
      gap: 20px;
      padding: 15px 0;
      font-size: 15px;
      font-weight: bold;
      border-bottom: 1px solid #e5e5e5;
      text-align: right;
    }

    .items-header .text-left {
      text-align: left;
    }

    .line-item {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(80px, 1fr);
      gap: 20px;
      padding: 20px 0;
      border-bottom: 1px solid #e5e5e5;
      align-items: center;
      font-size: 15px;
    }

    .line-item-info {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .line-item-image {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border: 1px solid #e5e5e5;
    }

    .line-item-details > div {
      margin-bottom: 6px;
    }

    .line-item-variant {
      color: #666;
      font-size: 14px;
    }

    .line-item-sku {
      color: #666;
      font-size: 13px;
    }

    .line-item-price,
    .line-item-subtotal,
    .line-item-quantity {
      text-align: right;
    }

    .order-summary {
      width: 100%;
      max-width: 300px;
      margin-left: auto;
      margin-bottom: 60px;
      font-size: 15px;
    }

    .summary-row {
      display: flex;
      justify-content: space-between;
      padding: 2px 10px;
    }

    .summary-row.final {
      border-top: 1.5px solid #000;
      margin-top: 12px;
      padding-top: 10px;
      font-weight: bold;
    }

    .notes {
      margin-bottom: 20px;
    }

    .notes-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 12px;
    }

    .notes-content {
      font-size: 15px;
      line-height: 1.8;
    }

    .footer {
      text-align: center;
      margin-top: 40px;
      padding-top: 30px;
      border-top: 1px solid #e5e5e5;
      font-size: 15px;
    }

    .footer p {
      margin-bottom: 5px;
      line-height: 1.8;
    }

    .footer .shop-info {
      margin-top: 15px;
    }

    .footer .shop-name {
      font-size: 18px;
      margin-bottom: 7px;
    }

    @media print {
      body {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }
      
      .container {
        padding: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Header -->
    <div class="header">
       
        <img src="https://cdn.shopify.com/s/files/1/0636/5718/1397/files/logo_dde952cb-15ba-4504-9005-a110654db810.png?v=1666958027" alt="{{ shop.name }}" width="100px">
      
      <div class="order-info">
        <div>注文番号 #{{ order.name | remove: '#' }}</div>
        {% if order.po_number != blank %}
          <div>注文書番号 #{{ order.po_number }}</div>
        {% endif %}
        <div>{{ order.created_at | date: "%Y年%m月%d日" }}</div>
      </div>
    </div>

    <!-- Addresses -->
    <div class="addresses">
      <div class="shipping-address">
        <div class="address-title">配送先</div>
        <div class="address-content">
          {% if shipping_address != blank %}
            {{ shipping_address.name }}
            {% if shipping_address.company != blank %}
              <br>{{ shipping_address.company }}
            {% endif %}
            <br>〒{{ shipping_address.zip }}
            <br>{{ shipping_address.province }}{{ shipping_address.city }}
            <br>{{ shipping_address.address1 }}
            {% if shipping_address.address2 != blank %}
              <br>{{ shipping_address.address2 }}
            {% endif %}
            <br>{{ shipping_address.country }}
            {% if shipping_address.phone != blank %}
              <br>{{ shipping_address.phone }}
            {% endif %}
          {% else %}
            配送先住所がありません
          {% endif %}
        </div>
      </div>

      <div class="billing-address">
        <div class="address-title">請求先</div>
        <div class="address-content">
          {% if billing_address != blank %}
            {{ billing_address.name }}
            {% if billing_address.company != blank %}
              <br>{{ billing_address.company }}
            {% endif %}
            <br>〒{{ billing_address.zip }}
            <br>{{ billing_address.province }}{{ billing_address.city }}
            <br>{{ billing_address.address1 }}
            {% if billing_address.address2 != blank %}
              <br>{{ billing_address.address2 }}
            {% endif %}
            <br>{{ billing_address.country }}
          {% else %}
            請求先住所がありません
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Items -->
    <div class="items">
      <div class="items-header">
        <div class="text-left">品名</div>
        <div>単価</div>
        <div>数量</div>
        <div>金額</div>
      </div>

      {% for line_item in order.line_items %}
        <div class="line-item">
          <div class="line-item-info">
            {% if line_item.image %}
              <img src="{{ line_item.image | img_url: '160x160' }}" alt="{{ line_item.title }}" class="line-item-image">
            {% endif %}
            <div class="line-item-details">
              <div>{{ line_item.title }}</div>
              {% if line_item.variant_title != blank %}
                <div class="line-item-variant">{{ line_item.variant_title }}</div>
              {% endif %}
              {% if line_item.sku != blank %}
                <div class="line-item-sku">{{ line_item.sku }}</div>
              {% endif %}
            </div>
          </div>
          <div class="line-item-price">
            ¥{{ line_item.price | money_without_currency | remove: '.00' | strip }}
          </div>
          <div class="line-item-quantity">
            {{ line_item.quantity }}個
          </div>
          <div class="line-item-subtotal">
            ¥{{ line_item.line_price | money_without_currency | remove: '.00' | strip }}
          </div>
        </div>
      {% endfor %}
    </div>

    <!-- Order Summary -->
    <div class="order-summary">
      <div class="summary-row">
        <div>小計</div>
        <div>¥{{ order.subtotal_price | money_without_currency | remove: '.00' | strip }}</div>
      </div>
      {% if order.shipping_price > 0 %}
        <div class="summary-row">
          <div>配送料</div>
          <div>¥{{ order.shipping_price | money_without_currency | remove: '.00' | strip }}</div>
        </div>
      {% endif %}
    
      {% assign tax_10_percent = 0 %}
      {% assign tax_8_percent = 0 %}
      
      {% for tax_line in order.tax_lines %}
        {% if tax_line.rate == 0.10 %}
          {% assign tax_10_percent = tax_10_percent | plus: tax_line.price %}
        {% elsif tax_line.rate == 0.08 %}
          {% assign tax_8_percent = tax_8_percent | plus: tax_line.price %}
        {% endif %}
      {% endfor %}

      {% if tax_10_percent > 0 %}
        <div class="summary-row">
          <div>消費税（10%）</div>
          <div>¥{{ tax_10_percent | money_without_currency | remove: '.00' | strip }}</div>
        </div>
      {% endif %}

      {% if tax_8_percent > 0 %}
        <div class="summary-row">
          <div>消費税（8%）</div>
          <div>¥{{ tax_8_percent | money_without_currency | remove: '.00' | strip }}</div>
        </div>
      {% endif %}


    

      <div class="summary-row final">
        <div>合計</div>
        <div>¥{{ order.total_price | money_without_currency | remove: '.00' | strip }}</div>
      </div>
    </div>

    <!-- Notes -->
     {%- comment -%}
    {% if order.note != blank %}
      <div class="notes">
        <div class="notes-title">備考欄</div>
        <div class="notes-content">{{ order.note }}</div>
      </div>
    {% endif %}
    {%- endcomment -%}

    {% if order.shipping_lines.size > 0 %}
      <div class="notes">
        <div class="notes-title">配送方法</div>
        <div class="notes-content">
          {{ order.shipping_lines.first.title }}
        </div>
      </div>
    {% endif %}
    <!-- Footer -->
    <div class="footer">
      <p>お買い上げいただき、ありがとうございます！</p>
      <div class="shop-info">
        <img src="https://cdn.shopify.com/s/files/1/0636/5718/1397/files/logo_yoko_footer.png?v=1703484859" alt="{{ shop.name }}" width="200px">
        {% if shop.email != blank %}
          <p>{{ shop.email }}</p>
        {% endif %}
      </div>
    </div>
  </div>
</body>
</html>