การสร้างและการแก้ไขเทมเพลตโดยใช้ Shopify Order Printer

คุณสามารถสร้างและแก้ไขเทมเพลตสำหรับแอป Shopify Order Printer ได้ในส่วนผู้ดูแล Shopify ของคุณ ตามค่าเริ่มต้น แอป Shopify Order Printer จะมีเทมเพลตต่อไปนี้:

• ใบแจ้งหนี้: ใบแจ้งหนี้ที่คุณสามารถส่งให้แก่ลูกค้าได้
• บันทึกการจัดส่ง - สิ่งพิมพ์ระบุที่อยู่ร้านค้าของคุณและที่อยู่สำหรับการจัดส่งของลูกค้า

คุณสามารถใช้ Liquid เพื่อสร้างเทมเพลตที่คุณกำหนดเองสำหรับใบแทรกบรรจุภัณฑ์อื่นๆ เช่น คูปอง ป้ายกำกับ หรือใบเสร็จ แอป Shopify Order Printer รองรับเทมเพลตที่สร้างโดยใช้ตัวแปร HTML, CSS และ Liquid

ข้อควรพิจารณาในการสร้างเทมเพลตในแอป Shopify Order Printer

ตรวจสอบข้อควรพิจารณาต่อไปนี้ก่อนที่คุณจะสร้างเทมเพลตในแอป Shopify Order Printer:

• หากต้องการสร้างหรือแก้ไขเทมเพลตในแอป Shopify Order Printer คุณต้องทำความคุ้นเคยกับ HTML, CSS และ Liquid ฝ่ายช่วยเหลือด้านธีมของ Shopify สามารถช่วยในการปรับเปลี่ยนเล็กน้อยภายในขอบเขตของนโยบายการออกแบบของ Shopify
• คุณสามารถสร้างเทมเพลตได้สูงสุด 15 เทมเพลต
• ตรวจสอบตัวแปร Liquid และข้อมูลอ้างอิงตัวกรองของ Shopify Order Printerสำหรับการปรับแต่งเทมเพลตที่รองรับทั้งหมด

สร้างเทมเพลต

คุณสามารถสร้างเทมเพลตใหม่สำหรับเอกสารคำสั่งซื้อของคุณได้

ขั้นตอนมีดังนี้

1. ในส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่การตั้งค่า > แอปและช่องทางการขาย

2. คลิก Order Printer

3. คลิก “เปิดแอป”

4. คลิก "เทมเพลต"

5. คลิกที่สร้างเทมเพลต

6. ในช่องชื่อ ให้ป้อนชื่อเทมเพลตของคุณ เช่น ป้ายกำกับหรือคูปอง

7. ในส่วนแก้ไขโค้ด ให้เพิ่มโค้ด HTML, CSS หรือ Liquid เพื่อสร้างเทมเพลตของคุณ

8. ตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง

9. แล้วคลิกที่บันทึก

แก้ไขเทมเพลต

คุณสามารถแก้ไขเทมเพลตที่มีอยู่ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่เทมเพลต Order Printer

ขั้นตอนมีดังนี้

1. ในส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่การตั้งค่า > แอปและช่องทางการขาย

2. คลิก Order Printer

3. คลิก “เปิดแอป”

4. คลิก "เทมเพลต"

5. คลิก "ทมเพลต" ที่คุณต้องการแก้ไข

6. ในส่วนแก้ไขโค้ด ให้เพิ่มหรือแก้ไขโค้ด HTML, CSS หรือ Liquid

7. ตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง

8. แล้วคลิกที่บันทึก

การกู้คืนเทมเพลตเริ่มต้น

คุณสามารถกู้คืนบันทึกการจัดส่งและเทมเพลตใบแจ้งหนี้ที่มีอยู่แล้วเป็นค่าเริ่มต้นได้ ใช้บล็อกโค้ดต่อไปนี้เพื่อกู้คืนเทมเพลตของคุณเป็นค่าเริ่มต้น

เทมเพลตเริ่มต้นของใบแจ้งหนี้

เวอร์ชันตั้งแต่วันที่ 6 มิถุนายน 2024

<div>
  <div class="columns">
    <h1>Invoice</h1>
    <div>
      <p style="text-align: right; margin: 0;">
      Order {{ order.order_name }}<br />
      {% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
      {{ order.created_at | date: "%B %e, %Y" }}
    </p>
  </div>
</div>
<div class="columns" style="margin-top: 1.5em;">
  <div class="address">
    <strong>From</strong><br/>
    {{ shop.name }}<br/>
    {{ shop.address | format_address }}
    {% if shop.phone %}{{ shop.phone }}{% endif %}
  </div>
  {% if order.billing_address %}
  <div class="address">
    <strong>Bill to</strong>
    {{ order.billing_address | format_address }}
  </div>
  {% endif %}
  {% if order.shipping_address %}
  <div class="address">
    <strong>Ship to</strong>
    {{ order.shipping_address | format_address }}
    {% if order.shipping_address.phone %}{{ order.shipping_address.phone }}{% endif %}
  </div>
  {% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class="table-tabular" style="margin: 1em 0 0 0;">
  <thead>
    <tr>
      <th scope="col">Qty</th>
      <th scope="col">Item</th>
      <th scope="col" style="text-align: right;">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in order.line_items %}
      <tr>
        <td scope="row">{{ line_item.quantity }}</td>
        <td>{{ line_item.title }}
        {% if line_item.line_level_discount_allocations.size > 0 %}
          <span class="subduedText">
            {% for discount_allocation in line_item.line_level_discount_allocations %}
            <br>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
            {% endfor %}
          </span>
        {% endif %}
        </td>
        <td style="text-align: right;">
          {% if line_item.original_price != line_item.final_price %}
            <span class="subduedText"><s>{{ line_item.original_price | money }}</s></span>
          {% endif %}
          {{ line_item.final_price | money }}
        </td>
      </tr>
    {% endfor %}
    <tr>
      <td scope="row" colspan="2" style="text-align: right;">Subtotal</td>
      <td style="text-align: right;">{{ order.line_items_subtotal_price | money }}</td>
    </tr>
    {% for discount_application in order.cart_level_discount_applications %}
    <tr>
      <td scope="row" colspan="2" style="text-align: right;">{% if discount_application.title %}<span class="subduedText">{{ discount_application.title }}</span>{% endif %}</td>
      <td style="text-align: right;">-{{ discount_application.total_allocated_amount | money }}</td>
    </tr>
    {% endfor %}
    <tr>
      <td scope="row" colspan="2" style="text-align: right;">Tax</td>
      <td style="text-align: right;">{{ order.tax_price | money }}</td>
    </tr>
    {% if order.shipping_address %}
      <tr>
        <td scope="row" colspan="2" style="text-align: right;">Shipping</td>
        <td style="text-align: right;">{{ order.shipping_price | money }}</td>
      </tr>
    {% endif %}
    <tr>
      <td scope="row" colspan="2" style="text-align: right;"><strong>Total</strong></td>
      <td style="text-align: right;"><strong>{{ order.total_price | money }}</strong></td>
    </tr>
    {% if order.net_payment != order.total_net_amount %}
      <tr>
        <td scope="row" colspan="2" style="text-align: right;">Total Paid</td>
        <td style="text-align: right;">{{ order.net_payment | money }}</td>
      </tr>
    {% endif %}
    {% if order.total_refunded_amount > 0 %}
      <tr>
        <td scope="row" colspan="2" style="text-align: right;">Total Refunded</td>
        <td style="text-align: right;">-{{ order.total_refunded_amount | money }}</td>
      </tr>
    {% endif %}
    {% if order.net_payment != order.total_net_amount %}
      <tr>
        <td scope="row" colspan="2" style="text-align: right;"><strong>Outstanding Amount</strong></td>
        <td style="text-align: right;"><strong>{{ order.total_price | minus: order.net_payment | money }}</strong></td>
      </tr>
    {% endif %}
  </tbody>
</table>
{% if transactions.size > 1 %}
  <h2>Transaction Details</h2>
  <table class="table-tabular" style="margin: 0 0 1.5em 0;">
    <thead>
      <tr>
        <th scope="col">Type</th>
        <th scope="col">Amount</th>
        <th scope="col">Kind</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      {% for transaction in transactions %}
        <tr>
          <td scope="row">{{ transaction.gateway | payment_method }}</td>
          <td>{{ transaction.amount | money }}</td>
          <td>{{ transaction.kind }}</td>
          <td>{{ transaction.status }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endif %}
{% if order.note %}
<h2>Note</h2>
<p>{{ order.note }}</p>
{% endif %}
<p style="margin-bottom: 0;">If you have any questions, please send an email to <u>{{ shop.email }}</u></p>
</div>

เทมเพลตเริ่มต้นของบันทึกการจัดส่ง

เวอร์ชันตั้งแต่วันที่ 6 มิถุนายน 2024

<div>
<div class="columns">
  <h1>Packing Slip</h1>
  <div class="address">
    <p style="text-align: right; margin: 0;">
    Order {{ order.order_name }}<br />
    {% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
    {{ order.created_at | date: "%B %e, %Y" }}
    </p>
  </div>
</div>
<div class="columns" style="margin-top: 1.5em;">
  <div class="address">
    <strong>From</strong><br/>
    {{ shop.name }}<br/>
    {{ shop.address | format_address }}
  </div>
  {% if order.shipping_address %}
  <div class="address">
    <strong>Ship to</strong>
    {{ order.shipping_address | format_address }}
   </div>
  {% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class="table-tabular" style="margin: 1em 0 0 0;">
  <thead>
    <tr>
      <th scope="col" style="width: 15%; text-align: left;">Qty</th>
      <th scope="col" style="width: 85%; text-align: left;">Item</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in order.line_items %}
    <tr>
      <td scope="row" style="text-align: left;">{{ line_item.quantity }}</td>
      <td style="text-align: left;">{{ line_item.title }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</div>