【Shopify】明細表（明細書）まわりのまとめ

こんにちは。大野です。

最近では、地球環境保護や個人情報保護の観点から納品書・明細書は同梱を廃止するお店も少なくありません。

ただ、「納品書や明細書を同梱して欲しい」「ピッキング指示書として使いたい」といった需要が少なからず発生すると思います。そういったときにそのままの状態で使うのではなく日本仕様に手を入れたほうがよい点が発生するため、それををまとめました。

1. 明細書の発行方法

「注文管理」の注文詳細ページを開き、上のメニュー「印刷 ▼」をクリックすると「明細表を印刷する」をクリックします。

すると、別タブで明細書の印刷プレビューが表示されます。
以下が Shopify のデフォルトで何も手を加えていない状態です。

そのままの状態だと、全体が英語表記となっているため気になります。

2. 明細書の表示内容を変更する

「設定 > 配送と配達」に明細表の欄があるので「編集」をクリックします。

HTML/CSS、Liquid変数を駆使して気になるところを潰します。

3. 個人的に手を加えた箇所

英語はもちろん日本語化します。当たり前ですね。
条件によって「プレビュー」では確認しきれない英単語もあるので注意が必要です。（カートメモがあった場合などです。）

あとは英語配置が気になります。
・日付
・住所
あたりでしょうか。

▼ 日付（Before）

{{ order.created_at | date: "%B %e, %Y" }}

▼ 日付（After）

{{ order.created_at | date: "%Y-%m-%d" }}

▼ 住所（Before）

        {% if shipping_address != blank %}
         {{ shipping_address.name }}
         {% if shipping_address.company != blank %}
           <br>
           {{ shipping_address.company }}
         {% endif %}
         <br>
         {{ shipping_address.address1 }}
         {% if shipping_address.address2 != blank %}
           <br>
           {{ shipping_address.address2 }}
         {% endif %}
         {% if shipping_address.city_province_zip != blank %}
           <br>
           {{ shipping_address.city_province_zip }}
         {% endif %}
         <br>
         {{ shipping_address.country }}
         {% if shipping_address.phone != blank %}
           <br>
           {{ shipping_address.phone }}
         {% endif %}
       {% else %}
         No shipping address
       {% endif %}

▼ 住所（After）

        {% if shipping_address != blank %}
         {{ shipping_address.last_name }} {{ shipping_address.first_name }}様
         {% comment %}
         {{ shipping_address.country }}
         {% endcomment %}
         {% if shipping_address.zip != blank %}
           <br>
           〒{{ shipping_address.zip }}<br>
         {% endif %}
         {% if shipping_address.province != blank %}
           {{ shipping_address.province }}
         {% endif %}
          {% if shipping_address.city != blank %}
           {{ shipping_address.city }}
         {% endif %}
         {{ shipping_address.address1 }}
         {% if shipping_address.address2 != blank %}
           {{ shipping_address.address2 }}
         {% endif %}
         <br>
         {% if shipping_address.company != blank %}
           {{ shipping_address.company }}
         {% endif %}
         <br>
         {% if shipping_address.phone != blank %}
           <br>
           {{ shipping_address.phone }}
         {% endif %}
       {% else %}
        配送先住所なし
       {% endif %}

※請求書住所は割愛m(_ _)m

ポイントは姓名の逆転を Liquid変数 を使用し変更しました。

▼ お店の住所（Before）

    <p>
     <strong>
       {{ shop.name }}
     </strong>
     <br>
     {{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}
     <br>
     {{ shop.email }}
     <br>
     {{ shop.domain }}
   </p>

▼ お店の住所（After）

    <p>
     <strong>
       {{ shop.name }}
     </strong>
     <br>
     〒{{ shop_address.zip }} 
     {{ shop_address.province }} {{ shop_address.city }} {{ shop_address.address1 }}
     <br>
     {{ shop.email }}
     <br>
     {{ shop.domain }}
   </p>

ポイントは {{ shop_address.province_code }} を
 {{ shop_address.province }} とし、都道府県名を出すようにしました。

最後に、Quantity「個数」の箇所の of が謎だったため調べました。

{{ line_item.shipping_quantity }} of {{ line_item.quantity }}

とコード上なっており、

line_item.shipping_quantity- すでに発送済の商品の数量
line_item.quantity- 商品の合計数量

注文した数に対して在庫が足らないときに利用されそうな表現だったため、店舗によって利用は異なるかと思いますが、弊社の場合はこの2つはイコールであるため、 {{ line_item.shipping_quantity }} だけ残しています。

4. 手を加えたあとの見た目

日本語の安心感となりました。

以下の記事もおすすめです。

アプロ総研では『はじめてEC』というサービスを運営しています。
EC初心者に向けて、初期構築を弊社が行いすぐに販売可能なサイトをお作りいたします。月々のサポートやウェビナーも開催されますのでEC初心者にも安心してご利用いただけます。

ご契約やサービス内容を詳しく知りたい場合は以下のお問合せページよりご連絡をお待ちしております！

はじめてECの説明ページ