Membuat dan menyesuaikan templat Shopify Order Printer

Anda dapat menyesuaikan templat dengan berbagai cara dan membuat templat Anda sendiri. Aplikasi Shopify Order Printer mendukung templat yang dibuat dengan variabel HTML, CSS, dan Liquid. Sebelum Anda menyesuaikan templat, pastikan untuk memahami referensi variabel dan filter Liquid untuk Shopify Order Printer untuk semua kustomisasi templat yang didukung.

Tinjau contoh berikut untuk mempelajari cara menyesuaikan templat Shopify Order Printer.

Di halaman ini

Tambahkan logo Anda ke templat

Anda dapat menambahkan logo ke templat Anda.

Langkah-langkah:

Dari admin Shopify, buka Konten > File.
Klik Unggah file, lalu pilih file gambar yang ingin Anda unggah.
Untuk menyalin URL gambar logo Anda, klik ikon Tautan.
Klik Pengaturan > Aplikasi.
Klik Order Printer.
Klik Templat.
Klik nama templat yang ingin Anda edit.
Di editor kode, tempel blok kode berikut:

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

Ganti YOUR_IMAGE_URL_HERE di dalam kode dengan URL gambar Anda.
Opsional: Untuk meratakan logo Anda, ubah nilai text-align menjadi left, right, atau center.
Opsional: Untuk menyesuaikan lebar logo Anda, ubah nilai width menjadi nilai yang lebih besar atau lebih kecil, seperti 8em atau 2em.
Opsional: Untuk melihat pratinjau templat Anda, klik Pratinjau.
Klik Simpan.

Contoh:

Tinjau contoh berikut tentang bagaimana HTML Anda akan ditampilkan setelah Anda menambahkan logo ke templat:

Menambahkan gambar ke templat

Anda dapat menambahkan gambar ke templat Anda.

Langkah-langkah:

Dari admin Shopify, buka Konten > File.
Klik Unggah file, lalu pilih file gambar yang ingin Anda unggah.
Untuk menyalin URL gambar Anda, klik ikon Tautan.
Klik Pengaturan > Aplikasi.
Klik Order Printer.
Klik Templat.
Klik nama templat yang ingin Anda edit.
Di editor kode, tempel blok kode <img src=”Image Source” />.
Ganti Image Source di dalam kode dengan URL gambar Anda.
Klik Simpan.

Membuat lebar tabel 100%

Anda dapat menambahkan batas ke tabel dan melebarkannya hingga 100%. Anda perlu menambahkan kelas table-tabular ke tabel Anda.

Langkah-langkah:

Dari admin Shopify Anda, buka Aplikasi > Order Printer.
Klik Templat.
Klik templat yang ingin Anda edit.
Di editor kode, temukan tabel yang ingin Anda edit, lalu tambahkan kelas table-tabular ke tabel Anda.
Opsional: Untuk melihat pratinjau templat Anda, klik Pratinjau.
Klik Simpan.

Contoh:

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

Menampilkan gambar mini produk

Anda dapat menambahkan gambar mini produk ke templat pesanan Anda. Anda perlu menyisipkan blok kode kustom ke dalam templat Anda.

Langkah-langkah:

Dari admin Shopify Anda, buka Aplikasi > Order Printer.
Klik Templat.
Klik templat yang ingin Anda edit.
Tambahkan blok kode {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} ke templat Anda.
Opsional: Untuk melihat pratinjau templat Anda, klik Pratinjau.
Klik Simpan.

Menambahkan detail pesanan

Anda dapat menambahkan detail pesanan ke templat Anda, seperti nama, kuantitas, dan harga item yang dibeli.

Langkah-langkah:

Dari admin Shopify Anda, buka Aplikasi > Order Printer.
Klik Templat.
Klik templat yang ingin Anda edit.
Di editor kode, gunakan variabel Liquid untuk menambahkan detail pesanan dan HTML untuk menambahkan pemformatan. Misalnya, menggunakan {{ line_item.price | money }} akan menampilkan harga item.
Opsional: Untuk melihat pratinjau templat Anda, klik Pratinjau.
Klik Simpan.

Contoh:

Nyla ingin mengedit templat slip pengepakannya untuk menyertakan daftar item yang dikirim. Dia menambahkan kode berikut ke bagian bawah templat Slip Pengepakan di aplikasi Shopify Order Printer. Hasilnya, slip pengepakan Nyla kini menyertakan tabel yang berisi daftar 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>

Menambahkan barkod ke templat

Anda dapat menambahkan barkod ke templat Anda.

Langkah-langkah:

Dari admin Shopify Anda, buka Aplikasi > Order Printer.
Klik Templat.
Klik templat yang ingin Anda edit.
Tambahkan blok kode <s-barcode value="a" /> ke templat Anda.
Ganti nilai `` dengan nilai teks barkod Anda.
Opsional: Untuk melihat pratinjau templat Anda, klik Pratinjau.
Klik Simpan.

Menambahkan kode QR ke templat

Anda dapat menambahkan kode QR ke templat Anda.

Langkah-langkah:

Dari admin Shopify Anda, buka Aplikasi > Order Printer.
Klik Templat.
Klik templat yang ingin Anda edit.
Tambahkan blok kode <s-barcode type="qrcode" value="" /> ke templat Anda.
Ganti nilai `` dengan nilai teks kode QR Anda.
Opsional: Untuk melihat pratinjau templat Anda, klik Pratinjau.
Klik Simpan.

Menggunakan font Google di templat

Untuk menggunakan font Google di templat Anda, tempel kode berikut ke templat Anda, lalu ganti variabel FontName dengan nama font Google Anda:

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

Meningkatkan ukuran font

Untuk meningkatkan ukuran font di templat Anda, tempel kode berikut ke dalam templat Anda, lalu sesuaikan angka 14 dengan nilai yang lebih besar atau lebih kecil:

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

Untuk meningkatkan ukuran font judul di templat Anda, tempel kode berikut ke dalam templat Anda, lalu sesuaikan nilai di samping judul:

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

Jika Anda mengimpor templat dari aplikasi Order Printer lama, Anda dapat meningkatkan ukuran font menggunakan blok kode berikut:

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