2025.11.12[Wed]

Shopifyの明細表に商品価格・消費税などを表示するカスタマイズ方法【コピペでできる】

Shopify

Shopifyでは、管理画面から注文の「明細表」を印刷することができますが、初期状態では商品価格や消費税などの情報が含まれていません。
納品書や領収書としてそのまま利用したい場合、表示内容を整える必要があります。

本記事では、Shopify明細表テンプレートの修正方法と、そのままコピペで使えるカスタマイズコードを紹介します。

明細表テンプレートの格納箇所

Shopify管理画面から以下の手順でアクセスします。
管理画面 → 設定 → 配送と配達 → 配送書類 → 明細表テンプレート
このテンプレートのコードを修正することで、印刷時の明細表レイアウトを自由にカスタマイズできます。

商品一覧に商品価格を表示する

デフォルトの明細表では、商品名と購入個数しか表示されません。
そのため「どの商品がいくらなのか」が分からない状態になっています。

カスタマイズでは以下を追加します。

各商品の単価（税込）
小計（税込）

これにより、印刷時に価格情報が一覧で確認できるようになります。

合計額や送料・消費税を表示する

初期状態の明細表では、購入合計・送料・消費税・注文合計などが非表示です。
下記のカスタマイズコードを利用することで、これらの情報を明細表に追加できます。

また、軽減税率（8％）と標準税率（10％）の両方に対応しています。
そのため、食品や日用品などを扱うショップでも正確な税区分を印字可能です。

コピペで使えるカスタマイズコード

以下のコードを明細表テンプレートにそのまま貼り付けるだけで反映されます。

管理画面 → 設定 → 配送と配達 → 配送書類 → 明細表テンプレート → コード編集

コード全文はこちらです

<div class="wrapper">
  <div class="header">
    <div class="shop-title">
      <p class="to-uppercase">
        {{ shop.name }}
      </p>
    </div>
    <div class="order-title">
      <p class="text-align-right">注文番号 {{ order.name }}</p>
      {% if order.po_number != blank %}
        <p class="text-align-right">注文書番号 #{{ order.po_number }}</p>
      {% endif %}
      <p class="text-align-right">{{ order.created_at | date: format: "date" }}</p>
    </div>
  </div>

  <div class="customer-addresses">
    <div class="shipping-address">
      <p class="subtitle-bold to-uppercase">
        {% if delivery_method.instructions != blank %}
          配達先
        {% else %}
          配送先
        {% endif %}
      </p>
      <p class="address-detail">
        {% if shipping_address != blank %}
          {{ shipping_address.name }}
          {% if shipping_address.company != blank %}
            <br>
            {{ shipping_address.company }}
          {% endif %}
          <br>
          {{ shipping_address.country }}
          {% if shipping_address.city_province_zip != blank %}
            <br>
            〒{{ shipping_address.city_province_zip }}
          {% endif %}
            <br>
          {{ shipping_address.address1 }}
          {% if shipping_address.address2 != blank %}
            <br>
            {{ shipping_address.address2 }}
          {% endif %}
          {% if shipping_address.phone != blank %}
            <br>
            {% assign shipping_phone_number = shipping_address.phone | replace_first: '+81', '0' %}
            {{ shipping_phone_number }}
          {% endif %}
        {% else %}
          配送先住所がありません
        {% endif %}
      </p>
    </div>

    <div class="billing-address">
      <p class="subtitle-bold to-uppercase">請求先</p>
      <p class="address-detail">
        {% if billing_address != blank %}
          {{ billing_address.name }}
          {% if billing_address.company != blank %}
            <br>
            {{ billing_address.company }}
          {% endif %}
            <br>
          {{ billing_address.country }}
          {% if billing_address.city_province_zip != blank %}
            <br>
            〒{{ billing_address.city_province_zip }}
          {% endif %}
          <br>
          {{ billing_address.address1 }}
          {%  if billing_address.address2 != blank %}
            <br>
            {{ billing_address.address2 }}
          {% endif %}
        {% else %}
          請求先住所がありません
        {% endif %}
      </p>
    </div>
  </div>

  <hr>

  <style>
    div.grid-line-item-header {
      display: grid;
      grid-template-columns: 62% 10% 14% 14%;
      gap: 0;
      align-items: center;
      text-align: right;
    }

    .order-container-header-left-content {
      text-align: left;
    }

    div.grid-line-item {
      display: grid;
      grid-template-columns: 12% 50% 10% 14% 14%;
      gap: 0;
      align-items: center;
      margin: 20px 0;
      text-align: right;
    }

    .line-item-description {
      text-align: left;
    }

    .total-box {
      margin: 0;
      padding: 10px 0;
    }

    .total-box div {
      display: grid;
      grid-template-columns: 86% 14%;
      gap: 0;
      align-items: center;
      text-align: right;
      margin: 0;
      padding: 0;
    }

    .total-left-content {
      margin: 10px 0;
      padding: 0;
      font-weight: bold;
    }

    .total-right-content {
      margin: 10px 0;
      padding: 0;
    }
  </style>

  <div class="order-container">
    <div class="order-container-header grid-line-item-header">
      <div class="order-container-header-left-content">
        <p class="subtitle-bold to-uppercase">アイテム</p>
      </div>
      <div>
        <p class="subtitle-bold to-uppercase">数量</p>
      </div>
      <div>
        <p class="subtitle-bold to-uppercase">単価 (税込)</p>
      </div>
      <div>
        <p class="subtitle-bold to-uppercase">小計 (税込)</p>
      </div>
    </div>

    {% comment %}
      To adjust the size of line item images, change desired_image_size.
      The other variables make sure your images print at high quality.
    {% endcomment %}
    {% assign desired_image_size = 58 %}
    {% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
    {% capture effective_image_dimensions %}
      {{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
    {% endcapture %}

    {% for line_item in order.line_items %}
      <div class="grid-line-item">
        <div class="flex-line-item-img">
          {% if line_item.image != blank %}
            <div
              class="aspect-ratio aspect-ratio-square"
              style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;"
            >
              {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
            </div>
          {% endif %}
        </div>

        <div class="line-item-description">
          <p>
            <span class="line-item-description-line">{{ line_item.title }}</span>
            {% if line_item.variant_title != blank %}
              <span class="line-item-description-line">{{ line_item.variant_title }}</span>
            {% endif %}
            {% if line_item.sku != blank %}
              <span class="line-item-description-line">{{ line_item.sku }}</span>
            {% endif %}
            {% for group in line_item.groups %}
              {% if group.deliverable? %}
                <span class="line-item-description-line">対象：{{ group.title }}</span>
              {% else %}
                <span class="line-item-description-line">{{ group.title }}の一部</span>
              {% endif %}
            {% endfor %}
          </p>
        </div>

        <div>{{ line_item.quantity }}個</div>
        <div>{{ line_item.price | money }}</div>
        <div>{{ line_item.price | times: line_item.quantity | money }}</div>
      </div>
    {% endfor %}

    <hr>

    {% assign subtotal_8 = 0 %}
    {% assign subtotal_10 = 0 %}
    {% for line_item in order.line_items %}
      {% for tax_line in line_item.tax_lines %}
        {% if tax_line.rate == 0.08 %}
          {% assign subtotal_8 = subtotal_8 | plus: line_item.line_price %}
        {% elsif tax_line.rate == 0.10 %}
          {% assign subtotal_10 = subtotal_10 | plus: line_item.line_price %}
        {% endif %}
      {% endfor %}
    {% endfor %}

    {% assign tax_8 = 0 %}
    {% assign tax_10 = 0 %}
    {% for tax_line in order.tax_lines %}
      {% if tax_line.rate == 0.08 %}
        {% assign tax_8 = tax_line.price %}
      {% elsif tax_line.rate == 0.10 %}
        {% assign tax_10 = tax_line.price %}
      {% endif %}
    {% endfor %}

    <div class="total-box">
      {% if subtotal_8 > 0 %}
        <div>
          <p class="total-left-content">購入合計 (8%税込)</p>
          <p class="total-right-content">{{ subtotal_8 | money }}</p>
        </div>
      {% endif %}

      {% if tax_8 > 0 %}
        <div>
          <p class="total-left-content">内8%消費税</p>
          <p class="total-right-content">{{ tax_8 | money }}</p>
        </div>
      {% endif %}

      {% if subtotal_10 > 0 %}
        <div>
          <p class="total-left-content">購入合計 (10%税込)</p>
          <p class="total-right-content">{{ subtotal_10 | money }}</p>
        </div>
      {% endif %}

      <div>
        <p class="total-left-content">送料 (10%税込)</p>
        <p class="total-right-content">{{ order.shipping_price | money }}</p>
      </div>

      {% if tax_10 > 0 %}
        <div>
          <p class="total-left-content">内10%消費税</p>
          <p class="total-right-content">{{ tax_10 | money }}</p>
        </div>
      {% endif %}

      <div>
        <p class="total-left-content">注文合計 (税込)</p>
        <p class="total-right-content">{{ order.total_price | money }}</p>
      </div>
    </div>
  </div>

  {% unless includes_all_line_items_in_order %}
    <hr class="subdued-separator">
    <p class="missing-line-items-text">この発送に含まれていない注文の他のアイテムがあります。</p>
  {% endunless %}

  <hr>

  {% if order.note != blank %}
    <div class="notes">
      <p class="subtitle-bold to-uppercase">メモ</p>
      <p class="notes-details">{{ order.note }}</p>
    </div>
  {% endif %}

  {% if delivery_method.instructions != blank %}
    <div class="notes">
      <p class="subtitle-bold to-uppercase">配達指示</p>
      <p class="notes-details">{{ delivery_method.instructions }}</p>
    </div>
  {% endif %}

  <div class="footer">
    <p>お買い上げいただき、ありがとうございます！</p>
    <p>
      <strong>{{ shop.name }}</strong><br>
      {{ shop_address.summary }}<br>
      {{ shop.email }}<br>
      {{ shop.domain }}
    </p>
  </div>
</div>

<style type="text/css">
  body {
    font-size: 15px;
  }

  * {
    box-sizing: border-box;
  }

  .wrapper {
    width: 831px;
    margin: auto;
    padding: 4em;
    font-family: "Noto Sans", sans-serif;
    font-weight: 250;
  }

  .header {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: top;
  }

  .header p {
    margin: 0;
  }

  .shop-title {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    flex: 6;
    font-size: 1.9em;
  }

  .order-title {
    -webkit-box-flex: 4;
    -webkit-flex: 4;
    flex: 4;
  }

  .customer-addresses {
    width: 100%;
    display: inline-block;
    margin: 2em 0;
  }

  .address-detail {
    margin: 0.7em 0 0;
    line-height: 1.5;
  }

  .subtitle-bold {
    font-weight: bold;
    margin: 0;
    font-size: 0.85em;
  }

  .to-uppercase {
    text-transform: uppercase;
  }

  .text-align-right {
    text-align: right;
  }

  .shipping-address {
    float: left;
    min-width: 18em;
    max-width: 50%;
  }

  .billing-address {
    padding-left: 20em;
    min-width: 18em;
  }

  .order-container {
    padding: 0 0.7em;
  }

  .order-container-header {
    display: inline-block;
    width: 100%;
    margin-top: 1.4em;
  }

  .order-container-header-left-content {
    float: left;
  }

  .order-container-header-right-content {
    float: right;
  }

  .flex-line-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 1.4em 0;
    page-break-inside: avoid;
  }

  .flex-line-item-img {
    margin-right: 1.4em;
    min-width: {{ desired_image_size }}px;
  }

  .flex-line-item-description {
    -webkit-box-flex: 7;
    -webkit-flex: 7;
    flex: 7;
  }

  .line-item-description-line {
    display: block;
  }

  .flex-line-item-description p {
    margin: 0;
    line-height: 1.5;
  }

  .flex-line-item-quantity {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    flex: 3;
  }

  .subdued-separator {
    height: 0.07em;
    border: none;
    color: lightgray;
    background-color: lightgray;
    margin: 0;
  }

  .missing-line-items-text {
    margin: 1.4em 0;
    padding: 0 0.7em;
  }

  .notes {
    margin-top: 2em;
  }

  .notes p {
    margin-bottom: 0;
  }

  .notes .notes-details {
    margin-top: 0.7em;
  }

  .footer {
    margin-top: 2em;
    text-align: center;
    line-height: 1.5;
  }

  .footer p {
    margin: 0;
    margin-bottom: 1.4em;
  }

  hr {
    height: 0.14em;
    border: none;
    color: black;
    background-color: black;
    margin: 0;
  }

  .aspect-ratio {
    position: relative;
    display: block;
    background: #fafbfc;
    padding: 0;
  }

  .aspect-ratio::before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid rgba(195, 207, 216, 0.3);
  }

  .aspect-ratio--square {
    width: 100%;
    padding-bottom: 100%;
  }

  .aspect-ratio__content {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
</style>

※上記のコードを貼り付け後、プレビューでレイアウトを確認し、必要に応じてフォントや余白などを微調整してください。

まとめ

Shopifyの明細表をカスタマイズすることで、次のようなメリットがあります。

価格や税率が明確に表示されるため、顧客への説明がスムーズになる
納品書・領収書としてそのまま使えるフォーマットに仕上がる
軽減税率にも対応し、正確な金額表示が可能

「Shopifyの明細表をもっと実務で使いやすくしたい」という方は、ぜひ本記事のコードをそのまま活用してみてください。

Shopifyについての
無料相談実施中

Shopifyでの新規制作、
移行を検討中の方や、
既存Shopifyサイトの悩みについて、
ぜひお気軽にご相談ください。

無料相談はこちら

Shopifyの制作実績はこちら

Shopifyの新しい商品ステータス「非公開」Shopifyで、誰でも開発ストアを作成できるようになりました

Shopifyの明細表に商品価格・消費税などを表示するカスタマイズ方法【コピペでできる】

目次

明細表テンプレートの格納箇所

商品一覧に商品価格を表示する

合計額や送料・消費税を表示する

コピペで使えるカスタマイズコード

まとめ

Shopifyについての
無料相談実施中

Share

Shopifyアプリことはじめ

Dokku + Github Actions でプルリクエストに連動したサーバーを立てる

Lexicalでリッチテキストエディターを自作する

Shopify Post-Purchase Checkout Extension

Shopifyの明細表に商品価格・消費税などを表示するカスタマイズ方法【コピペでできる】

目次

明細表テンプレートの格納箇所

商品一覧に商品価格を表示する

合計額や送料・消費税を表示する

コピペで使えるカスタマイズコード

まとめ

Shopifyについての無料相談実施中

Share

Shopifyについての
無料相談実施中