悩んでいる人Shopifyで明細書を発行したいけど、いい感じの表示にならなくて、、、、
コピペで終わらせたい！
本記事では上記の悩みを解決します。
本記事の信頼性
30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
現在は名古屋の自社開発企業のフロントエンドエンジニアしています。フリーランスとしても活動しています。
それでは、いきましょー！
目次
アプリのインストール
Order Printerというアプリをインストールしてください。
無料でインストール可能です！
明細書/請求書
一行目のロゴのURLの部分にご自身のストアのロゴのURLを入力ください。
{% assign shop_logo = "ロゴのURL" %}
<p style="float: right; text-align: right; margin: 0;">
{{ "now" | date: "%Y年%m月%d日" }}<br />
注文番号 {{ order_name }}
</p>
<div style="float: left;" >
<!-- <strong style="font-size: 2em;">{{ shop_name }}</strong><br /><br /> -->
<div class="img" style="width: 100px;" >
<img style="width: 100%;" src="{{ shop_logo }}"></div>
</div>
<div class="title" style="text-align: center;">
<h3 style="text-align: center;">購入明細書</h3>
</div>
<div style="text-align: left; clear: both;">
<p>〒{{ 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 }}<br>
{{ shop.street }}{{ shop.address }}
</p>
</div>
<hr style="margin-top: 0; margin-bottom: .2em;" />
<h4 style="margin: 0 0 .5em 0;">注文情報（注文日時：{{ date | date: "%Y年%m月%d日 %H時%M分" }}）</h4>
<table class="table-tabular" style="margin: 0 0 0.5em 0;">
<thead>
<tr style="border-bottom: double;">
<th style="min-width: 30px;">数量</th>
<th>商品</th>
<th style="text-align: right; padding-right: 20px; min-width: 30px;">金額</th>
</tr>
</thead>
<tbody>
{% for line_item in line_items %}
<tr>
{% assign final_price = line_item.quantity | times : line_item.price %}
<td>{{ line_item.quantity }} x</td>
<td><b>{{ line_item.title }}</b></td>
<td style="text-align: right;">
{{ line_item.price | money }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<h4 style="margin: 0 0 .5em 0;">お支払い</h4>
<table class="table-tabular" style="margin: 0 0 0.5em 0;">
<thead>
<tr style="border-bottom: double;">
<th>支払方法</th>
<th style="text-align: right; padding-right: 20px;">金額</th>
</tr>
</thead>
<tbody>
{% for transaction in transactions %}
{% if forloop.last == true %}
<tr>
<td>{{ transaction.gateway | payment_method | replace: 'Credit Card', 'クレジットカード'}}</td>
<td style="text-align: right;">{{ total_price | money }}</td>
</tr>
{% else %}
{% endif %}
{% endfor %}
</tbody>
</table>
<h4 style="margin: 0 0 .5em 0;">金額</h4>
<table class="table-tabular" style="margin: 0 0 0.5em 0;">
<tr>
<td>商品金額（税込）</td>
<td style="text-align: right;">{{ subtotal_price | money }}</td>
</tr>
<tr>
<td>消費税</td>
<td style="text-align: right;">{{ tax_price | money }}</td>
</tr>
<tr>
<td>送料</td>
<td style="text-align: right;">{{ shipping_price | money }}</td>
</tr>
<tr>
<td><strong>合計金額</strong></td>
<td style="text-align: right;"><strong>{{ total_price | money }}</strong></td>
</tr>
</table>
{% if shipping_address %}
<h4 style="margin: 0 0 .5em 0;">配送先住所</h4>
<div style="margin: 0 0 .5em 0; padding: 1em; border: 1px solid black;">
<p>
<strong><span class="shipping-delivery__name">
{{ shipping_address.last_name }} {{ shipping.first_name }}様<br>
</span></strong>
<span class="shipping-delivery__aaddress">
{% if shipping_address.zip contains '-' %}
〒{{ shipping_address.zip }}
{% else %}
{% assign prevZip = shipping_address.zip | slice: 0, 3 %}
{% assign nextZip = shipping_address.zip | slice: 3, 6 %}
〒{{ prevZip }}-{{ nextZip }}
{% endif %}
{% if shipping_address.province != blank %}
{{ 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', '鹿児島県' }}
{% endif %}
{% if shipping_address.city != blank %}
{{ shipping_address.city }}
{% endif %}
{{ shipping_address.address1 }}
{% if shipping_address.address2 != blank %}
{{ shipping_address.address2 }}
{% endif %}
</span>
</p>
</div>
{% endif %}
<p>この度は当店をご利用いただきありがとうございます。</p>
<p>{{ shop.name }}</p>
梱包書
<div style="margin: 0 0 1.5em 0; padding: 1.5em; border: 1px solid black;">
<h2 style="margin: 0 0 1em 0;">ご依頼主</h2>
<strong>{{ shop.name }}</strong><br/>
氏名：{{ shop.owner }}<br/>
郵便番号：〒{{ shop.zip | upcase }}<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/>
電話番号：{{ shop.phone }}
</div>
{% if shipping_address %}
<div style="padding: 1.5em; border: 1px solid black;">
<h2 style="margin: 0 0 1em 0;">お届け先</h2>
<strong>氏名：{{ shipping_address.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.street }}<br/>
電話番号：{{ shipping_address.phone }}
</div>
{% endif %}
まとめ
結構こういう細かいところもめんどくさいので、最近はこちらをベースにして都度ご依頼があればカスタマイズするようにしています。
ぜひご活用ください^^
