明細書コード 明細書のコードになります。※ 208行目、〒〇〇<br>住所〇〇となっている部分に住所の記入が必要です 例:〒123-4567<br>東京都新宿区1-1 カーソルを乗せると「Copy」と表示されますので、クリックでコピーができます。 👇ここから下をコピーしてお使いください。 <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> {% if order.po_number != blank %} <p class="text-align-right"> 注文書番号 #{{ order.po_number }} </p> {% endif %} <p class="text-align-right"> {{ order.created_at | date: format: "date" }} </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 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> <p class="text-align-right"> {{ line_item.final_line_price | money }} </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> <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> <p class="text-align-right"> (うち消費税){{ order.tax_price | money }} </p> {% 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> 〒〇〇<br>住所〇〇 <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>