Mencipta dan menyesuaikan templat Order Printer Shopify

Anda boleh menyesuaikan templat anda dalam pelbagai cara dan mencipta templat anda sendiri. Aplikasi Order Printer Shopify menyokong templat yang dibuat dengan pemboleh ubah HTML, CSS dan Liquid. Sebelum anda menyesuaikan templat anda, pastikan anda membiasakan diri dengan Rujukan pemboleh ubah dan penapis Liquid untuk Order Printer Shopify untuk semua penyesuaian templat yang disokong.

Semak contoh berikut untuk mengetahui cara anda boleh menyesuaikan templat Order Printer Shopify.

Pada halaman ini

Tambahkan logo anda pada templat

Anda boleh menambahkan logo anda pada templat anda.

Langkah-langkah:

Daripada pentadbir Shopify anda, pergi ke Kandungan > Fail.
Klik Muat naik fail, kemudian pilih fail imej yang ingin anda muat naik.
Untuk menyalin URL bagi imej logo anda, klik ikon Pautan.
Klik Tetapan > Aplikasi.
Klik Order Printer.
Klik Templat.
Klik nama templat yang ingin anda edit.
Dalam editor kod, tampal blok kod berikut:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>

Gantikan YOUR_IMAGE_URL_HERE dalam kod dengan URL imej anda.
Pilihan: Untuk menjajarkan logo anda, tukar nilai text-align kepada left, right atau center.
Pilihan: Untuk melaraskan lebar logo anda, tukar nilai width kepada nilai yang lebih besar atau lebih kecil, seperti 8em atau 2em.
Pilihan: Untuk mempratonton templat anda, klik Pratonton.
Klik Simpan.

Contoh:

Semak contoh berikut bagi cara HTML anda akan dipaparkan selepas anda menambahkan logo pada templat anda:

Tambahkan imej pada templat

Anda boleh menambahkan imej pada templat anda.

Langkah-langkah:

Daripada pentadbir Shopify anda, pergi ke Kandungan > Fail.
Klik Muat naik fail, kemudian pilih fail imej yang ingin anda muat naik.
Untuk menyalin URL bagi imej anda, klik ikon Pautan.
Klik Tetapan > Aplikasi.
Klik Order Printer.
Klik Templat.
Klik nama templat yang ingin anda edit.
Dalam editor kod, tampal blok kod <img src=”Image Source” />.
Gantikan Image Source dalam kod dengan URL imej anda.
Klik Simpan.

Jadikan lebar jadual 100%

Anda boleh menambahkan sempadan pada jadual anda dan meregangkannya kepada 100% lebar. Anda perlu menambahkan kelas table-tabular pada jadual anda.

Langkah-langkah:

Daripada pentadbir Shopify anda, pergi ke Aplikasi > Order Printer.
Klik Templat.
Klik templat yang ingin anda edit.
Dalam editor kod, cari jadual yang ingin anda edit dan kemudian tambah kelas table-tabular pada jadual anda.
Pilihan: Untuk mempratonton templat anda, klik Pratonton.
Klik Simpan.

Contoh:

<table class="table-tabular">
    ...
</table>

Paparkan imej kecil produk

Anda boleh menambahkan imej kecil produk pada templat pesanan anda. Anda perlu memasukkan blok kod tersuai ke dalam templat anda.

Langkah-langkah:

Daripada pentadbir Shopify anda, pergi ke Aplikasi > Order Printer.
Klik Templat.
Klik templat yang ingin anda edit.
Tambah blok kod {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} pada templat anda.
Pilihan: Untuk mempratonton templat anda, klik Pratonton.
Klik Simpan.

Tambah butiran pesanan

Anda boleh menambahkan butiran pesanan pada templat anda, seperti nama, kuantiti dan harga item yang dibeli.

Langkah-langkah:

Daripada pentadbir Shopify anda, pergi ke Aplikasi > Order Printer.
Klik Templat.
Klik templat yang ingin anda edit.
Dalam editor kod, gunakan pemboleh ubah Liquid untuk menambahkan butiran pesanan dan HTML untuk menambahkan pemformatan. Contohnya, menggunakan {{ line_item.price | money }} memaparkan harga item tersebut.
Pilihan: Untuk mempratonton templat anda, klik Pratonton.
Klik Simpan.

Contoh:

Nyla mahu mengedit templat slip pembungkusannya untuk menyertakan senarai item yang dihantar. Dia menambah kod berikut pada bahagian bawah templat Slip pembungkusan miliknya dalam aplikasi Shopify Order Printer. Hasilnya, slip pembungkusan Nyla kini menyertakan jadual yang menyenaraikan item yang dibeli.

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th scope="col">Quantity</th>
      <th scope="col">Item</th>
      {% if tax_lines.size > 0 %}
      <th scope="col">Taxes</th>
      {% endif %}
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td scope="row">{{ line_item.quantity }} x</td>
        <td><b>{{ line_item.title }}</b></td>
        {% if line_item.tax_lines %}
          <td>
            {% for tax_line in line_item.tax_lines %}
              {{ tax_line.price | money }} {{ tax_line.title }}<br/>
            {% endfor %}
          </td>
        {% endif %}
        <td>{{ line_item.price | money }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

Tambah kod bar pada templat

Anda boleh menambahkan kod bar pada templat anda

Langkah-langkah:

Daripada pentadbir Shopify anda, pergi ke Aplikasi > Order Printer.
Klik Templat.
Klik templat yang ingin anda edit.
Tambah blok kod <s-barcode value="a" /> pada templat anda.
Gantikan nilai `` dengan nilai teks kod bar anda.
Pilihan: Untuk mempratonton templat anda, klik Pratonton.
Klik Simpan.

Tambah kod QR pada templat

Anda boleh menambahkan kod QR pada templat anda.

Langkah-langkah:

Daripada pentadbir Shopify anda, pergi ke Aplikasi > Order Printer.
Klik Templat.
Klik templat yang ingin anda edit.
Tambah blok kod <s-barcode type="qrcode" value="" /> pada templat anda.
Gantikan nilai `` dengan nilai teks kod QR anda.
Pilihan: Untuk mempratonton templat anda, klik Pratonton.
Klik Simpan.

Menggunakan fon Google dalam templat

Untuk menggunakan fon Google dalam templat anda, tampal kod berikut pada templat anda dan kemudian gantikan pemboleh ubah FontName dengan nama fon Google anda:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">
<style>
  body {
    font-family: FontName, serif;
  }
</style>

Meningkatkan saiz fon

Untuk meningkatkan saiz fon dalam templat anda, tampal kod berikut ke dalam templat anda dan kemudian laraskan nombor 14 dengan nilai yang lebih besar atau lebih kecil:

<style>
  :root {
    --font-size: 14px;
  }
</style>

Untuk meningkatkan saiz fon tajuk anda dalam templat anda, tampal kod berikut ke dalam templat anda dan kemudian laraskan nilai di sebelah tajuk:

<style>
  :root {
    --h1-font-size: 18px;
    --h2-font-size: 16px;
    --h3-font-size: 14px;
  }
</style>

Jika anda mengimport templat anda daripada aplikasi Order Printer legasi, maka anda boleh meningkatkan saiz fon anda menggunakan blok kod berikut:

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>