こんにちは、Hammy'sです!

ここ最近、Shopify(ショッピファイ)でECサイトを構築している事業者さんがとても増えてきた印象です。弊社のような制作会社に委託している業者さんもたくさんいると思いますが、ご自分で頑張ってサイト構築をしている事業者さんもいると思います。

しかし、未経験だとなかなか難しいのがShopify。納品書の作成すら難しい。

多くの方が使っている納品書が生成できるShopifyの神アプリ「Order Printer」。

今回は、Order Printerで作る納品書のコピペコードを紹介します!

Order Printerとは

order Printer

Shopifyデフォルトの明細書は、「明細書」しか出力することができません。お店を運営していたら、納品書も領収書も必要ですよね?

Order Printerは、テンプレートを複数保存しておくことができ、用途に合わせてPDF印刷することができる、Shopifyで超人気のアプリです。

しかも無料!(これが人気の秘訣)

完全無料なのは、Shopifyアプリでは珍しいですね。

Order Printerで日本語の納品書を作る

まず今回のゴールですが、こんな感じの納品書が完成します!

今回紹介するコードでは、以下の内容を実現させています。

  • 日本語化
  • 姓名の順番
  • 都道府県の日本語化
  • 電話番号から+81を削除
  • 請求先と配送先の表示
  • お届け日、時間指定の表示(サンプル画像には表示されていません)

以上、Shopifyのデフォルト機能ではできなかったことを可能にしました。

インストールすると上のの画面になると思いますが、右上の「Message template」をクリックして、編集画面に入ります。

そして「Add template」

編集画面に入ったら、わかりやすいタイトルを入力し、以下のコードを丸々コピペしちゃいましょう!

コピペで簡単、Order Printerの日本語納品書

Hammy's

右上のアイコンを押すと簡単にコピーができます

<div style="display:flex; justify-content: space-between;">
<div style="">
    <strong style="font-size: 1rem;">{{ shop_name }}</strong>
</div>
<p style="font-size:.5rem;">
    注文日: {{ processed_at | date: "%y/%m/%d" }}<br>
    注文番号: {{ order_name }}
</p>
</div>
    <p style="font-size: 1.5rem; text-align: center; border-top:1px solid; border-bottom: 1px solid; padding: 10px 0;">
        <strong>納品書</strong>
    </p>
<div style="display:flex; justify-content: space-between; font-size: 0.7rem;">
    <p style="">
        <strong>お届け先: {{ shipping_address.last_name }} {{ shipping_address.first_name }} 様</strong><br />
        〒{{ shipping_address.zip }}<br />
        住所:{{ shipping_address.province | replace: 'Aichi', '愛知県' | replace: 'Akita', '秋田県' | replace: 'Aomori', '青森県' |
        replace: 'Chiba', '千葉県' | replace: 'Ehime', '愛媛県' | replace: 'Fukui', '福井県' | replace: 'Fukuoka', '福岡県' |
        replace:
        'Fukushima', '福島県' | replace: 'Gifu', '岐阜県' | replace: 'Gunma', '群馬県' | replace: 'Hiroshima', '広島県' | replace:
        'Hokkaidō', '北海道' | replace: 'Hyōgo', '兵庫県' | replace: 'Ibaraki', '茨城県' | replace: 'Ishikawa', '石川県' | replace:
        'Iwate', '岩手県' | replace: 'Kagawa', '香川県' | replace: 'Yamanashi', '山梨県' | replace: 'Yamaguchi', '山口県' | replace:
        'Kōchi', '高知県' | replace: 'Kumamoto', '熊本県' | replace: 'Kyōto', '京都府' | replace: 'Mie', '三重県' | replace:
        'Yamagata',
        '山形県' | replace: 'Miyazaki', '宮崎県' | replace: 'Nagano', '長野県' | replace: 'Nagasaki', '長崎県' | replace: 'Nara',
        '奈良県'
        | replace: 'Niigata', '新潟県' | replace: 'Ōita', '大分県' | replace: 'Okayama', '岡山県' | replace: 'Okinawa', '沖縄県' |
        replace: 'Ōsaka', '大阪府' | replace: 'Saga', '佐賀県' | replace: 'Saitama', '埼玉県' | replace: 'Shiga', '滋賀県' |
        replace:
        'Shimane', '島根県' | replace: 'Shizuoka', '静岡県' | replace: 'Tochigi', '栃木県' | replace: 'Tokushima', '徳島県' |
        replace:
        'Tottori', '鳥取県' | replace: 'Toyama', '富山県' | replace: 'Tōkyō', '東京都' | replace: 'Miyagi', '宮城県' | replace:
        'Wakayama', '和歌山県' | replace: 'Kanagawa', '神奈川県' | replace: 'Kagoshima', '鹿児島県' }}{{ shipping_address.city }}{{ shipping_address.address1 }}<br />
        {% if shipping_address.address2 %}{{ shipping_address.address2 }}<br />{% endif %}
        {% if shipping_address.phone %}電話番号: {{ shipping_address.phone | replace: '+81', '0' }}<br />{% endif %}
        {% if shipping_address.email %}メール: {{ shipping_email }}<br />{% endif %}
        {% if attributes["配送日"] %}
        {% for attribute in attributes %}
        {{ attribute |first }}:
        {{ attribute |last }}<br>
        {% endfor %}
        {% endif %}
        <br>
    </p>
    <p>
        <strong>発送元: {{ shop_name }}</strong><br />
        〒{{ shop.zip }}<br />
        {{ shop.province | replace: 'Aichi', '愛知県' | replace: 'Akita', '秋田 県' | replace: 'Aomori', '青森県' |
        replace: 'Chiba', '千葉県' | replace: 'Ehime', '愛媛県' | replace: 'Fukui', '福井県' | replace: 'Fukuoka', '福岡県' |
        replace:
        'Fukushima', '福島県' | replace: 'Gifu', '岐阜県' | replace: 'Gunma', '群馬県' | replace: 'Hiroshima', '広島県' | replace:
        'Hokkaidō', '北海道' | replace: 'Hyōgo', '兵庫県' | replace: 'Ibaraki', '茨城県' | replace: 'Ishikawa', '石川県' | replace:
        'Iwate', '岩手県' | replace: 'Kagawa', '香川県' | replace: 'Yamanashi', '山梨県' | replace: 'Yamaguchi', '山口県' | replace:
        'Kōchi', '高知県' | replace: 'Kumamoto', '熊本県' | replace: 'Kyōto', '京都府' | replace: 'Mie', '三重県' | replace:
        'Yamagata',
        '山形県' | replace: 'Miyazaki', '宮崎県' | replace: 'Nagano', '長野県' | replace: 'Nagasaki', '長崎県' | replace: 'Nara',
        '奈良県'
        | replace: 'Niigata', '新潟県' | replace: 'Ōita', '大分県' | replace: 'Okayama', '岡山県' | replace: 'Okinawa', '沖縄県' |
        replace: 'Ōsaka', '大阪府' | replace: 'Saga', '佐賀 県' | replace: 'Saitama', '埼玉県' | replace: 'Shiga', '滋賀県' |
        replace:
        'Shimane', '島根県' | replace: 'Shizuoka', '静岡県' | replace: 'Tochigi', '栃木県' | replace: 'Tokushima', '徳島県' |
        replace:
        'Tottori', '鳥取県' | replace: 'Toyama', '富山県' | replace: 'Tōkyō', '東京都' | replace: 'Miyagi', '宮城県' | replace:
        'Wakayama', '和歌山県' | replace: 'Kanagawa', '神奈川県' | replace: 'Kagoshima', '鹿児島県' }}{{ shop.city }}{{ shop.address }}<br />
        Tel: {{ shop.phone }}<br>
        Mail: {{ shop.email }}
    </p>
</div>
<div style=" border-top:1px solid; padding: 10px 0;">
    <p>
        <strong style="font-size: 1rem;">購⼊⾦額 : {{ total_price | money }}(税込)</strong><br />
        この度は、{{ shop_name }}の商品をお買い上げいただき、誠にありがとうございます。<br /><br />
    </p>
</div>
<table class="table-tabular" style="margin: 1.5rem 0 ; font-size:0.6rem;">
    <thead>
        <tr>
            <th>商品名</th>
            <th>数量 </th>
            <th>単価</th>
            <th>⼩計(税込)</th>
        </tr>
    </thead>
    <tbody>
        {% for line_item in line_items %}
        <tr>
            <td>{{ line_item.title }}</td>
            <td>{{ line_item.quantity }}</td>
            <td>{{ line_item.price | money }}</td>
            <td> {{ line_item.line_price | money }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>


<table class="table-tabular" style="margin: 0 0 1.5em 0; font-size:0.6rem;">
    <tr>
        <td>⼩計(税込): </td>
        <td>{{ subtotal_price | money }}</td>
    </tr>
    {% for discount in discounts %}
    <tr>
        <td>ディスカウント "{{ discount.code }}"</td>
        <td>{{ discount.savings | money }}</td>
    </tr>
    {% endfor %}
    <tr>
        <td>消費税: </td>
        <td>{{ tax_price | money }}</td>
    </tr>
    {% if shipping_address %}
    <tr>
        <td>送料: </td>
        <td>{{ shipping_price | money }}</td>
    </tr>
    {% endif %}
    <tr>
        <td><strong>合計⾦額: </strong></td>
        <td><strong>{{ total_price | money }}</strong></td>
    </tr>
</table>

{% if shipping_address.address1 != billing_address.address1 %}
<p style="margin: 0 0 0.8rem 0;"><strong>請求先</strong></h3>
<div style="padding: 10px; border: 1px solid; font-size: 0.7rem;">
    <strong>{{ billing_address.last_name }} {{ billing_address.first_name }} 様</strong><br />
    {% if billing_address.company %}
    {{ billing_address.company }}<br />
    {% endif %}
    {{ billing_address.zip }}
    {{ billing_address.province | replace: 'Aichi', '愛知県' | replace: 'Akita', '秋田県' | replace: 'Aomori', '青森県' |
        replace: 'Chiba', '千葉県' | replace: 'Ehime', '愛媛県' | replace: 'Fukui', '福井県' | replace: 'Fukuoka', '福岡県' |
        replace:
        'Fukushima', '福島県' | replace: 'Gifu', '岐阜県' | replace: 'Gunma', '群馬県' | replace: 'Hiroshima', '広島県' | replace:
        'Hokkaidō', '北海道' | replace: 'Hyōgo', '兵庫県' | replace: 'Ibaraki', '茨城県' | replace: 'Ishikawa', '石川県' | replace:
        'Iwate', '岩手県' | replace: 'Kagawa', '香川県' | replace: 'Yamanashi', '山梨県' | replace: 'Yamaguchi', '山口県' | replace:
        'Kōchi', '高知県' | replace: 'Kumamoto', '熊本県' | replace: 'Kyōto', '京都府' | replace: 'Mie', '三重県' | replace:
        'Yamagata',
        '山形県' | replace: 'Miyazaki', '宮崎県' | replace: 'Nagano', '長野県' | replace: 'Nagasaki', '長崎県' | replace: 'Nara',
        '奈良県'
        | replace: 'Niigata', '新潟県' | replace: 'Ōita', '大分県' | replace: 'Okayama', '岡山県' | replace: 'Okinawa', '沖縄県' |
        replace: 'Ōsaka', '大阪府' | replace: 'Saga', '佐賀県' | replace: 'Saitama', '埼玉県' | replace: 'Shiga', '滋賀県' |
        replace:
        'Shimane', '島根県' | replace: 'Shizuoka', '静岡県' | replace: 'Tochigi', '栃木県' | replace: 'Tokushima', '徳島県' |
        replace:
        'Tottori', '鳥取県' | replace: 'Toyama', '富山県' | replace: 'Tōkyō', '東京都' | replace: 'Miyagi', '宮城県' | replace:
        'Wakayama', '和歌山県' | replace: 'Kanagawa', '神奈川県' | replace: 'Kagoshima', '鹿児島県' }}{{ biliing_address.city }}{{ billing_address.street }}<br />
</div>
{% endif %}

<p style="font-size:0.5rem;">ご質問、お問い合わせは, こちらのアドレスまでお願い致します。<br>
    <u>{{ shop.email }}</u>
</p>

はい、こんな感じです。

うまくいかないとき、わからないときはご気軽にお問い合わせよりご連絡下さい!安価で対応いたします!