ShopifyやEコマースに関連することを話してみよう
お世話になっています。
設定画面から配送と配達→明細表のテンプレートを編集するより、明細書を作成する際、
記載を日本語に変換することは可能でしょうか?
下記の記事に(アメリカまたはカナダに拠点があるストアで) Shopify Shippingを使用する場合、未発送セクションで [配送ラベルを作成する] 選択します。
とあるのですが、こちらは日本のストアでは使用することはできないのでしょうか?
https://help.shopify.com/ja/manual/orders/packing-slips
ご存知の方、お力添えいただければば、幸いです。
よろしくお願い申し上げます。
残念ながら日本語に変換することはできません。
代わりに、こちらで編集してみました。
内容に責任は持てないので、あくまで参考としてご利用ください。
<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: "%Y年%m月%d日" }}
</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.name }}
{% if shipping_address.company != blank %}
<br>
{{ shipping_address.company }}
{% endif %}
<br>
{{ shipping_address.country }}
{% 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 %}
{% 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.name }}
{% if billing_address.company != blank %}
<br>
{{ billing_address.company }}
{% endif %}
<br>
{{ billing_address.country }}
{% 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 %}
{% 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 %}
ラインアイテム画像のサイズを調整するには、希望する画像サイズを変更します。
その他の変数は、画像を高品質で印刷するためのものです。
{% 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 }} / {{ line_item.quantity }}
</p>
</div>
</div>
{% endfor %}
</div>
{% unless includes_all_line_items_in_order %}
<hr class="subdued-separator">
<p class="missing-line-items-text ">
今回の発送には含まれていない他の商品があります。
</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">
納品のご案内
</p>
<p class="notes-details">
{{ delivery_method.instructions }}
</p>
</div>
{% endif %}
<div class="footer">
<p>
この度は、ご注文いただきありがとうございました
</p>
<p>
<strong>
{{ shop.name }}
</strong>
<br>
{{ shop_address.country }},
〒{{ shop_address.city_province_zip }},
{{ shop_address.address1 }}
<br>
{{ shop.email }}
<br>
{{ shop.domain }}
</p>
</div>
</div>
<style type="text/css">
body {
font-size: 15px;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 831px;
margin: auto;
padding: 4em;
font-family: "Noto Sans", sans-serif;
font-weight: 250;
}
.header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
}
.header p {
margin: 0;
}
.shop-title {
-webkit-box-flex: 6;
-webkit-flex: 6;
flex: 6;
font-size: 1.9em;
}
.order-title {
-webkit-box-flex: 4;
-webkit-flex: 4;
flex: 4;
}
.customer-addresses {
width: 100%;
display: inline-block;
margin: 2em 0;
}
.address-detail {
margin: 0.7em 0 0;
line-height: 1.5;
}
.subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 0.85em;
}
.to-uppercase {
text-transform: uppercase;
}
.text-align-right {
text-align: right;
}
.shipping-address {
float: left;
min-width: 18em;
max-width: 50%;
}
.billing-address {
padding-left: 20em;
min-width: 18em;
}
.order-container {
padding: 0 0.7em;
}
.order-container-header {
display: inline-block;
width: 100%;
margin-top: 1.4em;
}
.order-container-header-left-content {
float: left;
}
.order-container-header-right-content {
float: right;
}
.flex-line-item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
margin: 1.4em 0;
page-break-inside: avoid;
}
.flex-line-item-img {
margin-right: 1.4em;
min-width: {{ desired_image_size }}px;
}
.flex-line-item-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}
.line-item-description-line {
display: block;
}
.flex-line-item-description p {
margin: 0;
line-height: 1.5;
}
.flex-line-item-quantity {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.subdued-separator {
height: 0.07em;
border: none;
color: lightgray;
background-color: lightgray;
margin: 0;
}
.missing-line-items-text {
margin: 1.4em 0;
padding: 0 0.7em;
}
.notes {
margin-top: 2em;
}
.notes p {
margin-bottom: 0;
}
.notes .notes-details {
margin-top: 0.7em;
}
.footer {
margin-top: 2em;
text-align: center;
line-height: 1.5;
}
.footer p {
margin: 0;
margin-bottom: 1.4em;
}
hr {
height: 0.14em;
border: none;
color: black;
background-color: black;
margin: 0;
}
.aspect-ratio {
position: relative;
display: block;
background: #fafbfc;
padding: 0;
}
.aspect-ratio::before {
z-index: 1;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(195,207,216,0.3);
}
.aspect-ratio--square {
width: 100%;
padding-bottom: 100%;
}
.aspect-ratio__content {
position: absolute;
max-width: 100%;
max-height: 100%;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
>>さんつ様
ご返答ありがとうございました!
コードまで頂き、大変感謝です。
頂いたコードを貼り付けてみたところ、日本語に変換できました。
回答で頂いた、日本語設定できないと言うのは、管理画面上ではできず、コードの編集により可能と言うことでしょうか?
追加の質問になり、申し訳ございませんが、お手隙の際にご返答いただければ幸いです。よろしくお願いします。
管理画面上ではできず、コードの編集により可能ということです。
宜しくお願い致します。
>>さんつ様
ありがとうございました!
大変助かりました!
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024