明細表のカスタマイズ

明細表のカスタマイズ Shopify設定

Shopifyの明細表でできること

明細表とは、お客様が商品を購入した際に商品を手元にお届けする際に同梱する購入内容を記したものです
国により書式の形式やそもそも物流の常識が違うため内容を対象地域に変える必要が出てきます
初期の明細書のデフォルトでは海外仕様となっていますから、内容の見直しは必須と考えます

今回は日本式の明細表の提案をまとめます

Shopifyの明細表の編集場所

Shopifyの明細表は初期機能として搭載されています

明細表の編集場所は、設定 > 配送と配達 ページの下の方「明細表」（もしくは「明細表のテンプレート」）というエリアがありますのでそこの「編集」から内容を確認することができます

Shopifyの配送と配達ページ明細表のエリア

「明細表」の編集をクリックするとHTML/CSSとLiquidでマークアップされたページに遷移します
ここをマークアップし内容を更新します
ただ、コードを見るだけではどのような表示になるのかわかりにくいため右上の「テンプレートをプレビューする」で実際にどのような内容が印刷できるのかを確認することができます

Shopifyの配送と配達ページ明細表を編集する箇所

Shopifyの明細表の出力内容（デフォルト）

上記で説明した明細表のプレビューが下図となります

Shopifyの明細表初期表示

① ヘッダー：明細表の上部に表示する内容。店舗名・注文番号・商品注文日
② 配送先請求先：商品を購入したときに購入画面で入力した情報。配送先の住所と氏名・請求先の住所と氏名
③ 購入商品：購入した商品の内容。商品名・商品画像・SKU・同梱数と注文数・カートメモ備考
④ フッター：明細表の下部に表示する内容。店舗からのメッセージ・所在地・連絡先

特に何も手を加えない場合の初期は上図のような内容で出力されます

Shopifyの明細表の変更提案箇所

明細書ヘッダーの変更提案

店舗名をロゴに変更
店舗名は表示されますが、ロゴを表示することもできます
{{ shop.name }}
↓
imgタグに置き換える（ファイルページにあらかじめロゴ画像をアップしておく）ことで店舗ロゴに変更することができます

注文番号・注文日のフォーマットを合わせる
初期では注文日の説明はなく日付だけの表示となっています
これでは購入されたお客様も何の日付なのかわかりにくい状態です
「注文日：」のように日付の説明を入れてあげるとお客様にとってストレスフルです
また、その際に上の行にある「注文番号」についても表示フォーマットを揃えると美しいということと整合性が取れて信頼感のあるサイトという印象を持ってもらうことができます

明細書配送先請求先の変更提案

タイトルの変更
明細表の初期表示は「配送先」と「請求先」の表示でいたってシンプルです
購入画面の表示内容に統一する、もしくはそれぞれの店舗表記に統一するのがよいと思います

住所の配置を日本式に変更
明細表の初期のままだと海外の住所配置となっているため変更が必要です
下記を参考に変更するのがよいと思います（配送先の住所部分だけ抜き出しています）

▼ Before（デフォルトのコード）

<p class="address-detail">
        {% 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 %}
          配送先住所がありません
        {% endif %}
      </p>

▼ After（変更後のコード）

<p class="address-detail">
	{% if shipping_address != blank %}
	  {{ shipping_address.name }} 様
	  <br>
	  {{ shipping_address.country }}
	  {% if shipping_address.zip != blank %}
	  <br>
		  〒 {{ shipping_address.zip }}
	  {% endif %}
	  {% if shipping_address.province != blank %}
		  <br>
		  {{ shipping_address.province }}
	  {% endif %}
	  {{ shipping_address.address1 }}
	  {% if shipping_address.address2 != blank %}
		<br>
		{{ shipping_address.address2 }}
	  {% endif %}
	{% else %}
	  配送先住所がありません
	{% endif %}
  </p>

あくまでも変更例ですが、名前を下に持っていきたい場合や会社名の表示位置、「日本」表記を消したい場合など別途コード編集が必要です

明細書購入商品の変更提案

数量の部分の表示検討
Shopifyで商品を購入した際、デフォルトで設定できる明細表の印刷には数量の箇所にofという表記があります
こちらは何を表しているかと言うとコード上では下記の様な内容を表示するように設定されています

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

今回発送する商品数 of 購入した商品の合計数
という表記になっています

お客様が商品を購入したが、欠品などの理由で1度の発送で商品を配送できない場合にこの表記は役立ちます
ただ、日本の配送の基本としては商品が揃った段階で配送されることが多いことから、もしも一部発送を行わない店舗に限っては{{ line_item.quantity }}のみの表記でも問題なさそうです

念のためこのままにしておいて万が一の一部発送に備える場合は、

{{ line_item.quantity }} 個購入のうち {{ line_item.shipping_quantity }} 個

にするなどし違和感のないようにする・・・という提案でしょうか

実際に一部発送をした際の明細表の表示例が下図です

▼ 一部商品を発送した（フルフィルメントした）場合に印刷できる明細表の内容

Shopifyの明細表一部発送商品の場合

▼ 残りの商品を発送した（フルフィルメントした）場合に印刷できる明細表の内容

Shopifyの明細表一部発送から残りの商品を発送した明細表

この場合、注意しておくこととして一部発送を行った場合に
「この発送に含まれていない注文の他のアイテムがあります。」と表示されることです
一部発送を行い、最終的に発送を終えた場合の明細書にもこの内容が表示されるのでお客様がまだ届く商品があるのかな？と勘違いされることのないようにしましょう

カートメモの表記
お客様が商品を購入する際にカートメモ「注文に関する特別な指示・備考」に内容を記載した際にその内容が表示されるような設定となっています（下図参照）
こちらも購入画面の表示内容に統一するとよいと思います

Shopifyの明細表カートメモを入れた場合

コードは以下のような感じです

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

カートメモ欄が空欄でなかった場合に記入内容を出力します

明細書フッターの変更提案

店舗からのメッセージ
ブランドイメージに合わせた変更をするのがよいと思います
店舗によってテンションが違うため（明るさ・丁寧さ　など）言い回しを変えることもそれぞれのカラーをお伝えするのに役立ちます

所在地・連絡先の見直し
所在地である住所の設定やメールアドレスの出力は、設定 > ストアの詳細 のページの「プロフィール」に記載されているメールアドレス、「請求情報」のビジネスの住所として登録した内容となります
これらを変えたい場合は、上記の設定を変えるか明細書の{{ shop_address.summary }}{{ shop.email }}を直接指定した内容に変更することで強制的にストアの詳細ページで設定したものとは違う内容に置き換えることが可能です

まとめ

元も子もないですが、最近では明細書を同梱する店舗は減っています
とはいえ、同梱する店舗がゼロということないので参考にしていただけば幸いです

明細書の表記については「商品金額も出したい」「デザインを入れたい」などの要望がある場合もあります
商品金額に関してはShopifyのデフォルトでは出力することができません
出力できる変数は下記ページを参考にしてください

明細表の参照変数

デザインに関してはCSSを入れて調節するこができます
金額表示やそれ以上の機能を求める場合はアプリを入れて実現します

コメント

  1. 柳田佑樹 より:
    2024年7月30日 11:45 AM

    はじめまして！素敵な記事をありがとうございます！
    質問したいことがあるのですが、よろしければお教えいただけないでしょうか？

    こちらの記事で、明細書にカートメモを追加されていますが、このやり方をお教えいただけないでしょうか？

    気が向いたらお願いいたします！！

タイトルとURLをコピーしました