Yardım
Oturum aç

Shopify Order Printer şablonları oluşturma ve özelleştirme

Şablonlarınızı birçok şekilde özelleştirebilir ve kendi şablonlarınızı oluşturabilirsiniz. Shopify Order Printer uygulaması; HTML, CSS ve Liquid değişkenleriyle hazırlanan şablonları destekler. Şablonlarınızı özelleştirmeden önce, desteklenen tüm şablon özelleştirmeleri için Shopify Order Printer için Liquid değişkenleri ve filtreleri referansına aşina olduğunuzdan emin olun.

Shopify Order Printer şablonlarını nasıl özelleştirebileceğinizi öğrenmek için aşağıdaki örnekleri inceleyin.

Bu sayfada

Şablonunuza logonuzu ekleyebilirsiniz.

Adımlar:

  1. Shopify yöneticinizde İçerik > Dosyalar bölümüne gidin.

  2. Dosyaları yükle'ye tıklayın ve ardından yüklemek istediğiniz görsel dosyasını seçin.

  3. Logo görselinizin URL'sini kopyalamak için Bağlantı simgesine tıklayın.

  4. Ayarlar > Uygulamalar'a tıklayın.

  5. Order Printer'a tıklayın.

  6. Şablonlar'a tıklayın.

  7. Düzenlemek istediğiniz şablonun adına tıklayın.

  8. Kod düzenleyiciye aşağıdaki kod bloğunu yapıştırın:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
  1. Koddaki YOUR_IMAGE_URL_HERE kısmını görsel URL'niz ile değiştirin.
  2. İsteğe bağlı: Logonuzu hizalamak için text-align değerini left, right veya center olarak değiştirin.
  3. İsteğe bağlı: Logonuzun genişliğini ayarlamak için width değerini, 8em veya 2em gibi daha büyük ya da daha küçük bir değerle değiştirin.
  4. İsteğe bağlı: Şablonunuzu önizlemek için Önizleme'ye tıklayın.
  5. Kaydet'e tıklayın.

Örnek:

Şablonunuza logonuzu ekledikten sonra HTML'nizin nasıl görünmesi gerektiğine dair aşağıdaki örneği inceleyin:

Bir şablona logo eklemeyi gösteren bir kod bloğu örneği

Şablona görsel ekleme

Şablonunuza görseller ekleyebilirsiniz.

Adımlar:

  1. Shopify yöneticinizde İçerik > Dosyalar bölümüne gidin.

  2. Dosyaları yükle'ye tıklayın ve ardından yüklemek istediğiniz görsel dosyasını seçin.

  3. Görselinizin URL'sini kopyalamak için Bağlantı simgesine tıklayın.

  4. Ayarlar > Uygulamalar'a tıklayın.

  5. Order Printer'a tıklayın.

  6. Şablonlar'a tıklayın.

  7. Düzenlemek istediğiniz şablonun adına tıklayın.

  8. Kod düzenleyiciye <img src=”Image Source” /> kod bloğunu yapıştırın.

  9. Koddaki Image Source kısmını görsel URL'niz ile değiştirin.

  10. Kaydet'e tıklayın.

Tablo genişliklerini %100 yapma

Tablonuza kenarlıklar ekleyebilir ve genişliğini %100'e ayarlayabilirsiniz. Bunun için tablonuza table-tabular sınıfını eklemeniz gerekir.

Adımlar:

  1. Shopify yöneticinizden Uygulamalar > Order Printer bölümüne gidin.

  2. Şablonlar'a tıklayın.

  3. Düzenlemek istediğiniz şablona tıklayın.

  4. Kod düzenleyicide, düzenlemek istediğiniz tabloyu bulun ve ardından tablonuza table-tabular sınıfını ekleyin.

  5. İsteğe bağlı: Şablonunuzu önizlemek için Önizleme'ye tıklayın.

  6. Kaydet'e tıklayın.

Örnek:

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

Ürün küçük resimlerini görüntüleme

Sipariş şablonunuza ürün küçük resimleri ekleyebilirsiniz. Bunun için şablonunuza özel bir kod bloğu eklemeniz gerekir.

Adımlar:

  1. Shopify yöneticinizden Uygulamalar > Order Printer bölümüne gidin.

  2. Şablonlar'a tıklayın.

  3. Düzenlemek istediğiniz şablona tıklayın.

  4. {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} kod bloğunu şablonunuza ekleyin.

  5. İsteğe bağlı: Şablonunuzu önizlemek için Önizleme'ye tıklayın.

  6. Kaydet'e tıklayın.

Sipariş bilgileri ekleme

Şablonunuza, satın alınan ürünlerin adı, adedi ve fiyatı gibi sipariş bilgilerini ekleyebilirsiniz.

Adımlar:

  1. Shopify yöneticinizden Uygulamalar > Order Printer bölümüne gidin.

  2. Şablonlar'a tıklayın.

  3. Düzenlemek istediğiniz şablona tıklayın.

  4. Kod düzenleyicide, sipariş bilgileri eklemek için Liquid değişkenlerini ve biçimlendirme eklemek için HTML'i kullanın. Örneğin, {{ line_item.price | money }} değişkenini kullanmak ürünün fiyatını görüntüler.

  5. İsteğe bağlı: Şablonunuzu önizlemek için Önizleme'ye tıklayın.

  6. Kaydet'e tıklayın.

Örnek:

Nyla, gönderilecek ürünlerin listesini eklemek için sevk irsaliyesi şablonunu düzenlemek istiyor. Shopify Order Printer uygulamasında, Sevk irsaliyesi şablonunun en altına aşağıdaki kodu ekliyor. Böylece, Nyla'nın sevk irsaliyeleri artık satın alınan ürünleri listeleyen bir tablo içeriyor.

<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>

Şablona barkod ekleme

Şablonunuza barkod ekleyebilirsiniz.

Adımlar:

  1. Shopify yöneticinizden Uygulamalar > Order Printer bölümüne gidin.

  2. Şablonlar'a tıklayın.

  3. Düzenlemek istediğiniz şablona tıklayın.

  4. <s-barcode value="a" /> kod bloğunu şablonunuza ekleyin.

  5. value özelliğindeki değeri, barkodunuzun metin değeriyle değiştirin.

  6. İsteğe bağlı: Şablonunuzu önizlemek için Önizleme'ye tıklayın.

  7. Kaydet'e tıklayın.

Şablona QR kodu ekleme

Şablonunuza QR kodu ekleyebilirsiniz.

Adımlar:

  1. Shopify yöneticinizden Uygulamalar > Order Printer bölümüne gidin.

  2. Şablonlar'a tıklayın.

  3. Düzenlemek istediğiniz şablona tıklayın.

  4. <s-barcode type="qrcode" value="" /> kod bloğunu şablonunuza ekleyin.

  5. value özelliğindeki değeri, QR kodunuzun metin değeriyle değiştirin.

  6. İsteğe bağlı: Şablonunuzu önizlemek için Önizleme'ye tıklayın.

  7. Kaydet'e tıklayın.

Şablonda Google yazı tipi kullanma

Şablonunuzda bir Google yazı tipi kullanmak için aşağıdaki kodu şablonunuza yapıştırın ve ardından FontName değişkenini, Google yazı tipinizin adıyla değiştirin:

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

Yazı tipi boyutunu artırma

Şablonunuzdaki yazı tipi boyutunu artırmak için aşağıdaki kodu şablonunuza yapıştırın ve ardından 14 sayısını daha büyük veya daha küçük bir değerle ayarlayın:

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

Şablonunuzdaki başlıkların yazı tipi boyutunu artırmak için aşağıdaki kodu şablonunuza yapıştırın ve ardından başlığın yanındaki değerleri ayarlayın:

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

Şablonlarınızı eski Order Printer uygulamasından içe aktardıysanız yazı tipi boyutunu artırmak için aşağıdaki kod bloğunu kullanabilirsiniz:

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