Blogブログ

TORAT | 2023.11.27

【コピペOK】shopifyの明細表を日本向けにカスタマイズ（日本語対応、料金の表示、レイアウト変更）

  • shopify
  • コピペ
【コピペOK】shopifyの明細表を日本向けにカスタマイズ（日本語対応、料金の表示、レイアウト変更）

Shopifyにはデフォルトで明細表を印刷できる機能が備わっています。
しかし、「英語表記」「料金の表示がない」「住所が見にくい」など、デフォルトのまま使うには少し改善が必要な状態です。今回は明細表のレイアウト、内容を変えたいという方向けに明細表のカスタマイズ方法をご紹介します。

Shopifyの明細表は『設定＞配送と配達＞明細表』から編集することができます。

shopifyの明細表は注文の個別ページから『その他の操作＞明細表を印刷する』から印刷することができます。

完成イメージ

カスタマイズ前の明細表

shopifyデフォルトの明細表

カスタマイズ後の明細表

shopifyカスタマイズした後の明細表

明細表カスタマイズ

タイトルと日付を表示

headerクラスのついてる要素の中身を下記コードに変更します。

<div class="header">
  <div>
      <h1 class="center">お買い上げ明細書</h1>
      <p>この度は{{shop.name}}をご利用いただき誠にありがとうございます。</p>
  </div>
</div>

CSSも調整します。

  .header {
    width: 100%;
/*     display: -webkit-box; 削除 */
/*     display: -webkit-flex; 削除 */
/*     display: flex;  削除 */
/*     flex-direction: row;  削除 */
/*     align-items: top;  削除 */
  }
  .header p {
/*     margin: 0;  削除 */
    margin-bottom: 30px;
  }

明細を表示（注文情報、お届け先住所）

注文日、注文番号、お届け先、住所 ＋ 自社の情報を表示を表示させます。

配送先、請求先ブロックを下のコードに変更してください。

<div class="header">
　省略（先ほど変更したコード）
</div>

<!--注文詳細-->
<div class="block-outer">
    <div class="block-l">
        <div class="border">
            <p class="border-l">ご注文日：</p>
            <p class="border-r">{{ order.created_at | date: "%Y年%m月%e日 %p %I:%M " }}</p>
        </div>
        <div class="border">
            <p class="border-l">注文番号：</p>
            <p class="border-r">{{ order.name }}</p>
        </div>
        <div class="border">
            <p class="border-l">お届け方法：</p>
            <p class="border-r">{{ order.shipping_method.title }}</p>
        </div>

        <div class="border">
            <p class="border-l">発送先：</p>
            <p class="border-r">
                {% if shipping_address != blank %}
                    {% if shipping_address.city_province_zip != blank %}
                        〒{{ shipping_address.city_province_zip }}
                    {% endif %}
                    {{ shipping_address.address1 }}
                    {% if shipping_address.address2 != blank %}
                        {{ shipping_address.address2 }}
                    {% endif %}
                    {% if shipping_address.company != blank %}
                        <br>
                        {{ shipping_address.company }}
                    {% endif %}
                    {% if shipping_address.phone != blank %}
                        <br>
                        {{ shipping_address.phone }}
                    {% endif %}
                    <span class="big">{{ shipping_address.last_name }} {{ shipping_address.first_name }}様</span>
                {% else %}
                    -
                {% endif %}
            </p>
        </div>

        <div class="border">
            <p class="border-l">購入者：</p>
            <p class="border-r">
                {% if billing_address != blank %}
                    {% if billing_address.city_province_zip != blank %}
                        〒{{ billing_address.city_province_zip }}
                    {% endif %}
                    {{ billing_address.address1 }}
                    {%  if billing_address.address2 != blank %}
                        {{ billing_address.address2 }}
                    {% endif %}
                    {% if billing_address.company != blank %}
                        <br>
                        {{ billing_address.company }}
                    {% endif %}
                    <span class="big">{{ billing_address.last_name }} {{ billing_address.first_name }}様</span>
                {% else %}
                -
                {% endif %}
            </p>
        </div>
    </div>

    <div class="block-r">
        <p>株式会社D-lepus</p>
        <p>〒105-0012<br>東京都港区芝大門1丁目16番8号</p>
        <p>Email. {{ shop.email }}</p>
        <p>TEL.03-4400-7027</p>
    </div>
</div>

新しくCSSを追加します。

p {
    margin: 0;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.block-outer {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
      margin-bottom: 3rem;
} 
.block-l {
    width: 55%;
}
.block-r {
    width: 40%;
    padding-left: 60px;
}
.border {
    padding-bottom: 6px;
    border-bottom: 1px solid black;
    margin-bottom: 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.border-l {
    width: 95px;
    min-width: 95px;
}
.border-r {
    word-break:break-all;
    width: 296px;
    min-width: 296px;
}
.big {
    font-size: 18px;
    display: block;
}

動的部分はこのように出力しています

{{ order.created_at | date: “%Y年%m月%e日 %p %I:%M ” }}　注文日時
{{ order.name }}　注文番号
{{ order.shipping_method.title }}　発送方法

{{ shipping_address.city_province_zip }}　郵便番号
{{ shipping_address.address1 }}　都道府県
{{ shipping_address.address2 }}　市町村　番地　マンション名
{{ shipping_address.company }}　会社名
{{ shipping_address.phone }}　電話番号
{{ shipping_address.last_name }} 　姓
{{ shipping_address.first_name }}　名

{{ billing_address.city_province_zip }}　郵便番号
{{ billing_address.address1 }}　都道府県
{{ billing_address.address2 }}　市町村　番地　マンション名
{{ billing_address.company }}　会社名
{{ billing_address.last_name }}　姓
{{ billing_address.first_name }}　名

商品情報に単価と小計を表示

デフォルトでは商品画像、商品名、数量しか表示されませんが、単価と小計を追加していきます。
また「ITEMS」や「QUENTITY」と英語表記なのも一緒に直していきましょう。

まずは購入商品一覧の項目を追加していきます。
<div class=”order-container-header”>を下記コードに変更します。

<div class="order-container">
<div class="flex-line-item">
    <div class="flex-line-item-img">
        <p class="subtitle-bold">
        商品
        </p>
    </div>
    <div class="flex-line-item-description">
        <p class="subtitle-bold">
        商品名
        </p>
    </div>
    <div class="flex-line-item-quantity">
        <p class="subtitle-bold text-align-right">
        数量
        </p>
    </div>
    <div class="flex-line-item-quantity">
        <p class="subtitle-bold text-align-right">
        単価
        </p>
    </div>
    <div class="flex-line-item-quantity">
        <p class="subtitle-bold text-align-right">
        小計
        </p>
    </div>
</div>
<!-- 省略-->
数量の修正、小計や単価を追加していきます。

■数量

総数量はいらないので下記コードに書き換えます。
line_itemオブジェクトはカート内の1種類のアイテムを返してくれます。

<!-- 数量-->
<div class="flex-line-item-quantity">
  <p class="text-align-right">
    {{ line_item.quantity }} 
    <!-- {{ line_item.shipping_quantity }} of {{ line_item.quantity }} 削除 -->
  </p>
</div>

■単価、小計

数量ブロックを複製し、単価、小計項目を増やしていきます。
line_item.quantityは数量、line_item.final_line_price は商品ごとの合計（小計）を返してくれます。
price | divided_by : quantity の divided_byはLiquidの割り算フィルターで、商品の合計を数量で割っています。

price | divided_by : quantity　＝　商品の合計 | divided_by: 数量

<!-- 単価-->
<div class="flex-line-item-quantity">
  <p class="text-align-right">
      {% assign quantity = line_item.quantity %}
      {% assign price = line_item.final_line_price %}
      {% assign unitPrice = price | divided_by : quantity %}
      {{ unitPrice | money }}
  </p>
</div>
<!-- 小計-->
<div class="flex-line-item-quantity">
  <p class="text-align-right">
      {{ line_item.final_line_price | money }}
  </p>
</div>

まだこれだと単価、小計は表示されません。
{% for line_item in line_items_in_shipment %}では金額を取ってくることができないため、{% for line_item in order.line_items %}に変更しましょう。

    {% for line_item in order.line_items %}

送料込みの合計料金表示

送料などを含めた合計料金を表示させていきます。
<div class=”order-container”></div>の下に下記コードを追加してください。

orderオブジェクトから各情報を引っ張ってきて表示させます。

<div class="order-container">
　<!-- 購入リスト-->
</div>
<div class="order-price-outer">
  <p class="text-align-right">小計：{{ order.subtotal_price | money }}</p>
  <p class="text-align-right">送料：{{ order.shipping_price | money }}</p>
  {%- if order.total_discount -%}
  <p class="text-align-right">割引：-{{ order.total_discount | money }}</p>
  {%- endif -%}
  <p class="text-align-right">合計金額：{{ order.total_price | money }}</p>
</div>　

CSSを追加します。

    .order-price-outer {
        margin-top: 1rem;
    }

完成版のコード

<div class="wrapper">
  <div class="header">
    <div>
        <h1 class="center">お買い上げ明細書</h1>
        <p>この度は{{shop.name}}をご利用いただき誠にありがとうございます。</p>
    </div>
  </div>
    
  <!--注文詳細-->
  <div class="block-outer">
      <div class="block-l">
          <div class="border">
              <p class="border-l">ご注文日：</p>
              <p class="border-r">{{ order.created_at | date: "%Y年%m月%e日 %p %I:%M " }}</p>
          </div>
          <div class="border">
              <p class="border-l">注文番号：</p>
              <p class="border-r">{{ order.name }}</p>
          </div>
          <div class="border">
              <p class="border-l">お届け方法：</p>
              <p class="border-r">{{ order.shipping_method.title }}</p>
          </div>
  
          <div class="border">
              <p class="border-l">発送先：</p>
              <p class="border-r">
                  {% if shipping_address != blank %}
                      {% if shipping_address.city_province_zip != blank %}
                          〒{{ shipping_address.city_province_zip }}
                      {% endif %}
                      {{ shipping_address.address1 }}
                      {% if shipping_address.address2 != blank %}
                          {{ shipping_address.address2 }}
                      {% endif %}
                      {% if shipping_address.company != blank %}
                          <br>
                          {{ shipping_address.company }}
                      {% endif %}
                      {% if shipping_address.phone != blank %}
                          <br>
                          {{ shipping_address.phone }}
                      {% endif %}
                      <span class="big">{{ shipping_address.last_name }} {{ shipping_address.first_name }}様</span>
                  {% else %}
                      -
                  {% endif %}
              </p>
          </div>
  
          <div class="border">
              <p class="border-l">購入者：</p>
              <p class="border-r">
                  {% if billing_address != blank %}
                      {% if billing_address.city_province_zip != blank %}
                          〒{{ billing_address.city_province_zip }}
                      {% endif %}
                      {{ billing_address.address1 }}
                      {%  if billing_address.address2 != blank %}
                          {{ billing_address.address2 }}
                      {% endif %}
                      {% if billing_address.company != blank %}
                          <br>
                          {{ billing_address.company }}
                      {% endif %}
                      <span class="big">{{ billing_address.last_name }} {{ billing_address.first_name }}様</span>
                  {% else %}
                  -
                  {% endif %}
              </p>
          </div>
      </div>
  
      <div class="block-r">
          <p>株式会社TORAT</p>
          <p>〒103-0013<br>東京都中央区日本橋人形町3−8−2</p>
          <p>Email. {{ shop.email }}</p>
          <p>TEL.03-6280-5891</p>
      </div>
  </div>

  <hr>
  <!-- 商品-->
  <div class="order-container">
    <div class="flex-line-item">
        <div class="flex-line-item-img">
            <p class="subtitle-bold">
            商品
            </p>
        </div>
        <div class="flex-line-item-description">
            <p class="subtitle-bold">
            商品名
            </p>
        </div>
        <div class="flex-line-item-quantity">
            <p class="subtitle-bold text-align-right">
            数量
            </p>
        </div>
        <div class="flex-line-item-quantity">
            <p class="subtitle-bold text-align-right">
            単価
            </p>
        </div>
        <div class="flex-line-item-quantity">
            <p class="subtitle-bold text-align-right">
            小計
            </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 order.line_items %}
      <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 %}
            {% for group in line_item.groups %}
              <span class="line-item-description-line">
                {{ group.title }}の一部
              </span>
            {% endfor %}
          </p>
        </div>
        <div class="flex-line-item-quantity">
          <p class="text-align-right">
            {{ line_item.quantity }} 
          </p>
        </div>
        <div class="flex-line-item-quantity">
          <p class="text-align-right">
            {% assign quantity = line_item.quantity %}
            {% assign price = line_item.final_line_price %}
            {% assign unitprice = price | divided_by : quantity %}
            {{ unitprice | money }}
          </p>
        </div>
        <div class="flex-line-item-quantity">
          <p class="text-align-right">
            {{ line_item.final_line_price | money }}
          </p>
        </div>
      </div>
    {% endfor %}
  </div>
  <hr>
  <div class="order-price-outer">
    <p class="text-align-right">小計：{{ order.subtotal_price | money }}</p>
    <p class="text-align-right">送料：{{ order.shipping_price | money }}</p>
    {%- if order.total_discount -%}
    <p class="text-align-right">割引：-{{ order.total_discount | money }}</p>
    {%- endif -%}
    <p class="text-align-right">合計金額：{{ order.total_price | money }}</p>
  </div>　
  
  {% if order.note != blank %}
    <div class="notes">
      <p class="subtitle-bold to-uppercase">
        メモ
      </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.summary }}
      <br>
      {{ shop.email }}
      <br>
      {{ shop.domain }}
    </p>
  </div>
</div>

CSS

<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; */
    margin-bottom: 30px;
  }

  .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;
  }

/*   追加 */
p {
    margin: 0;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.block-outer {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
      margin-bottom: 3rem;
} 
.block-l {
    width: 55%;
}
.block-r {
    width: 40%;
    padding-left: 60px;
}
.border {
    padding-bottom: 6px;
    border-bottom: 1px solid black;
    margin-bottom: 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.border-l {
    width: 95px;
    min-width: 95px;
}
.border-r {
    word-break:break-all;
    width: 296px;
    min-width: 296px;
}
.big {
    font-size: 18px;
    display: block;
}
</style>

この記事を書いた人

TORAT 管理者

関連記事

ブログ一覧へ

Recommend愛されているブログ