【Shopify/コピペで完了】明細書(納品書)のテンプレートを日本対応に変更するコード
PR ※当サイトではアフィリエイト広告を利用しています
Shopifyの明細書(納品書)のテンプレートを日本対応に変更するコードをコピペでできるようまとめてみました。
海外仕様であるShopifyは、住所の位置や国名の有無など、日本とは違った表記で設定されています。
なので、毎回ストアを立ち上げるたびにコードを修正しては面倒ですので、手軽に編集できるようコピペで貼り付ければ完了できるようにしました。
Shopify参考記事一覧
- Shopifyの構築から運用まで担当いたします【お気軽に無料相談から】
- 【Ruby/Shopify】rbenv install 3.1.3のインストールがうまくいかない時
- 【Mac】brew install rbenvでインストールがうまくいかない時【Shopify】
- 【Shopify/liquid】商品タグを自由に好きなページに出力する方法を解説
- 【shopify】アプリ無しでギフトラッピングの実装をする方法【コピペOK】
- 【Shopify/コピペで完了】明細書(納品書)のテンプレートを日本対応に変更するコード
- 【Shopify / コピペOK】アカウントの住所登録をカスタマイズする方法
【Shopify/コピペで完了】明細書(納品書)のテンプレートを日本対応に変更するコード
下記のコードをコピペすればOKです。後半部分にstyleがあるので、その手前をすべて下記のコードで上書きしてください。
<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>
<p class="text-align-right">
{{ order.created_at | date: "%B %e, %Y" }}
</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.last_name }}{{ shipping_address.first_name }} 様
{% if shipping_address.company != blank %}
<br>
{{ shipping_address.company }}
{% endif %}
{% 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 %}
<br>
{% if shipping_address.phone != blank %}
<br>
{{ shipping_address.phone }}
{% 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.last_name }}{{ billing_address.first_name }}様
{% if billing_address.company != blank %}
<br>
{{ billing_address.company }}
{% endif %}
{% 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 %}
<br>
{% else %}
請求先住所無し
{% endif %}
</p>
</div>
</div>
<hr>
<div class="order-container">
<div class="order-container-header">
<div class="order-container-header-left-content">
<p class="subtitle-bold to-uppercase">
商品
</p>
</div>
<div class="order-container-header-right-content">
<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 line_items_in_shipment %}
<div class="flex-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="flex-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 %}
</p>
</div>
<div class="flex-line-item-quantity">
<p class="text-align-right">
{{ line_item.shipping_quantity }}
</p>
</div>
</div>
{% endfor %}
</div>
{% unless includes_all_line_items_in_order %}
<hr class="subdued-separator">
<p class="missing-line-items-text ">
There are other items from your order not included in this shipment.
</p>
{% endunless %}
<hr>
{% if order.note != blank %}
<div class="notes">
<p class="subtitle-bold to-uppercase">
Notes
</p>
<p class="notes-details">
{{ order.note }}
</p>
</div>
{% endif %}
{% if delivery_method.instructions != blank %}
<div class="notes">
<p class="subtitle-bold to-uppercase">
Delivery instructions
</p>
<p class="notes-details">
{{ delivery_method.instructions }}
</p>
</div>
{% endif %}
<div class="footer">
<p>
お買い上げいただきましてありがとうございます。
</p>
<p>
<strong>
「ここに店舗名にが入る」
</strong>
<br>
「ここに住所名が入る」
<br>
「ここにアドレスが入る」
<br>
「ここにドメイン名が入る」
</p>
</div>
</div>
明細表の印刷と編集
明細表の印刷と編集
明細表は、荷物に同梱されるアイテムのリストが記載されている文書です。明細表には、配送先住所と請求先住所、ならびにSKU番号、重量、数量、その他の商品情報が記載されています。明細表は、商品の梱包時に商品がすべて同梱されているかどうかを確かめ、お客様に何が送付されたかについて情報を伝えるのに役立ちます。注文をフルフィルメントするときに明細表を印刷できます。
//Shopify公式
明細表を個別に印刷する方法
- 管理画面から、注文に移動
- 明細表を印刷する注文をクリック
- [その他の操作] > [明細表を印刷する] をクリック
- 明細表を印刷するorプレビュー
簡単ですねー！サクッとコピペで時短しちゃいましょう＼(^^)／
Shopify参考記事一覧
- Shopifyの構築から運用まで担当いたします【お気軽に無料相談から】
- 【Ruby/Shopify】rbenv install 3.1.3のインストールがうまくいかない時
- 【Mac】brew install rbenvでインストールがうまくいかない時【Shopify】
- 【Shopify/liquid】商品タグを自由に好きなページに出力する方法を解説
- 【shopify】アプリ無しでギフトラッピングの実装をする方法【コピペOK】
- 【Shopify/コピペで完了】明細書(納品書)のテンプレートを日本対応に変更するコード
- 【Shopify / コピペOK】アカウントの住所登録をカスタマイズする方法
合わせて読みたい記事
