Membuat dan mengedit templat menggunakan Shopify Order Printer

Anda dapat membuat dan mengedit templat menggunakan aplikasi Shopify Order Printer di admin Shopify Anda. Secara default, aplikasi Shopify Order Printer menyertakan templat berikut:

Invois: Invois yang dapat Anda kirimkan ke pelanggan
Slip pengepakan: Cetakan alamat toko dan alamat pengiriman pelanggan Anda.
Daftar pilihan: Dokumen yang menyertakan daftar item yang perlu diambil untuk memenuhi pesanan pelanggan Anda.

Anda dapat menggunakan Liquid untuk membuat templat kustom Anda sendiri untuk sisipan kemasan lainnya, seperti kupon, label, atau tanda terima. Aplikasi Shopify Order Printer mendukung templat yang dibuat dengan HTML, CSS, dan variabel Liquid.

Di halaman ini

Pertimbangan untuk membuat templat di aplikasi Shopify Order Printer

Tinjau pertimbangan berikut sebelum Anda membuat templat di aplikasi Shopify Order Printer:

Untuk membuat atau mengedit templat di aplikasi Shopify Order Printer, Anda perlu familier dengan HTML, CSS, dan Liquid. Dukungan Tema Shopify mungkin dapat membantu melakukan penyesuaian kecil pada tema gratis Shopify dalam cakupan Kebijakan Desain Shopify. Jika Anda memerlukan perubahan yang lebih kompleks atau menggunakan tema yang tidak dibuat oleh Shopify, pertimbangkan untuk mempekerjakan Mitra Shopify.
Anda dapat membuat hingga 15 templat berbeda.
Tinjau referensi variabel dan filter Liquid untuk Shopify Order Printer untuk semua kustomisasi templat yang didukung.

Buat templat

Anda dapat membuat templat baru untuk dokumen pesanan Anda.

Untuk menyiapkan templat daftar pilihan, lihat Menyiapkan dan mencetak daftar pilihan menggunakan aplikasi Shopify Order Printer.

Langkah-langkah:

Dari admin Shopify Anda, buka Aplikasi > Order Printer.
Klik Templat.
Klik Buat templat.
Di kolom Nama, masukkan nama untuk templat Anda, seperti label atau kupon.
Di bagian Edit kode, tambahkan kode HTML, CSS, atau Liquid untuk membuat templat Anda.
Opsional: Untuk melihat pratinjau templat Anda, klik Pratinjau.
Klik Simpan.

Edit templat

Anda dapat mengedit templat yang ada. Pelajari selengkapnya tentang menyesuaikan templat Order Printer.

Langkah-langkah:

Dari admin Shopify Anda, buka Aplikasi > Order Printer.
Klik Templat.
Klik templat yang ingin Anda edit.
Di bagian Edit kode, tambahkan atau edit kode HTML, CSS, atau Liquid.
Opsional: Untuk melihat pratinjau templat Anda, klik Pratinjau.
Klik Simpan.

Memulihkan templat default

Anda dapat memulihkan templat slip pengepakan dan invois bawaan ke nilai defaultnya. Gunakan blok kode berikut untuk memulihkan templat Anda ke default.

Templat default invois

Versi dari 6 Juni 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>

Templat default slip pengepakan

Versi dari 6 Juni 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>