かんろぐ Written by kan

【Shopify/コピペで完了】明細書(納品書)のテンプレートを日本対応に変更するコード

shopify

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート

Shopifyの明細書(納品書)のテンプレートを日本対応に変更するコードをコピペでできるようまとめてみました。

海外仕様であるShopifyは、住所の位置や国名の有無など、日本とは違った表記で設定されています。

なので、毎回ストアを立ち上げるたびにコードを修正しては面倒ですので、手軽に編集できるようコピペで貼り付ければ完了できるようにしました。

【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プレビュー

簡単ですねー!サクッとコピペで時短しちゃいましょう\(^^)/

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート

7月21日(木)までキャンペーン開催中!初期費用0円&月額料金20%OFFキャンペーン
10日間無料はこちらから>
7月21日(木)までキャンペーン開催中!初期費用0円&月額料金20%OFFキャンペーン
10日間無料はこちらから>