Δημιουργία και προσαρμογή προτύπων του Shopify Order Printer

Μπορείτε να προσαρμόσετε τα πρότυπά σας με πολλούς τρόπους και να δημιουργήσετε τα δικά σας πρότυπα. Η εφαρμογή Shopify Order Printer υποστηρίζει πρότυπα που έχουν δημιουργηθεί με HTML, CSS και μεταβλητές Liquid. Πριν προσαρμόσετε τα πρότυπά σας, φροντίστε να εξοικειωθείτε με την αναφορά μεταβλητών και φίλτρων Liquid για το Shopify Order Printer για όλες τις υποστηριζόμενες προσαρμογές προτύπων.

Εξετάστε τα παρακάτω παραδείγματα για να μάθετε πώς μπορείτε να προσαρμόσετε τα πρότυπα του Shopify Order Printer.

Σε αυτή τη σελίδα

Προσθήκη του λογότυπού σας σε ένα πρότυπο

Μπορείτε να προσθέσετε το λογότυπό σας στο πρότυπό σας.

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στην ενότητα Περιεχόμενο > Αρχεία.
Κάντε κλικ στην επιλογή Μεταφόρτωση αρχείων και, στη συνέχεια, επιλέξτε το αρχείο εικόνας που θέλετε να μεταφορτώσετε.
Για να αντιγράψετε το URL της εικόνας του λογότυπού σας, κάντε κλικ στο εικονίδιο Σύνδεσμος.
Κάντε κλικ στις Ρυθμίσεις > Εφαρμογές.
Κάντε κλικ στο Order Printer.
Κάντε κλικ στα Πρότυπα.
Κάντε κλικ στο όνομα του προτύπου που θέλετε να επεξεργαστείτε.
Στον επεξεργαστή κώδικα, επικολλήστε το παρακάτω μπλοκ κώδικα:

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

Αντικαταστήστε το YOUR_IMAGE_URL_HERE στον κώδικα με το URL της εικόνας σας.
Προαιρετικά: Για να στοιχίσετε το λογότυπό σας, αλλάξτε την τιμή text-align σε left, right ή center.
Προαιρετικά: Για να προσαρμόσετε το πλάτος του λογότυπού σας, αλλάξτε την τιμή width σε μια μεγαλύτερη ή μικρότερη τιμή, όπως 8em ή 2em.
Προαιρετικά: Για να κάνετε προεπισκόπηση του προτύπου σας, κάντε κλικ στην επιλογή Προεπισκόπηση.
Κάντε κλικ στην επιλογή Αποθήκευση.

Παράδειγμα:

Ελέγξτε το παρακάτω παράδειγμα για το πώς θα πρέπει να εμφανίζεται ο κώδικας HTML σας μετά την προσθήκη του λογότυπου στο πρότυπό σας:

Προσθήκη εικόνων σε πρότυπο

Μπορείτε να προσθέσετε εικόνες στο πρότυπό σας.

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στην ενότητα Περιεχόμενο > Αρχεία.
Κάντε κλικ στην επιλογή Μεταφόρτωση αρχείων και, στη συνέχεια, επιλέξτε το αρχείο εικόνας που θέλετε να μεταφορτώσετε.
Για να αντιγράψετε το URL της εικόνας σας, κάντε κλικ στο εικονίδιο Σύνδεσμος.
Κάντε κλικ στις Ρυθμίσεις > Εφαρμογές.
Κάντε κλικ στο Order Printer.
Κάντε κλικ στα Πρότυπα.
Κάντε κλικ στο όνομα του προτύπου που θέλετε να επεξεργαστείτε.
Στον επεξεργαστή κώδικα, επικολλήστε το μπλοκ κώδικα <img src=”Image Source” />.
Αντικαταστήστε το Image Source στον κώδικα με το URL της εικόνας σας.
Κάντε κλικ στην επιλογή Αποθήκευση.

Ορισμός πλάτους πίνακα σε 100%

Μπορείτε να προσθέσετε περιγράμματα στον πίνακά σας και να επεκτείνετε το πλάτος του στο 100%. Πρέπει να προσθέσετε την κλάση table-tabular στον πίνακά σας.

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στις Εφαρμογές > Order Printer.
Κάντε κλικ στα Πρότυπα.
Κάντε κλικ στο πρότυπο που θέλετε να επεξεργαστείτε.
Στον επεξεργαστή κώδικα, βρείτε τον πίνακα που θέλετε να επεξεργαστείτε και, στη συνέχεια, προσθέστε την κλάση table-tabular στον πίνακά σας.
Προαιρετικά: Για να κάνετε προεπισκόπηση του προτύπου σας, κάντε κλικ στην επιλογή Προεπισκόπηση.
Κάντε κλικ στην επιλογή Αποθήκευση.

Παράδειγμα:

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

Εμφάνιση μικρογραφιών προϊόντων

Μπορείτε να προσθέσετε μικρογραφίες προϊόντων στο πρότυπο παραγγελίας σας. Πρέπει να εισαγάγετε ένα προσαρμοσμένο μπλοκ κώδικα στο πρότυπό σας.

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στις Εφαρμογές > Order Printer.
Κάντε κλικ στα Πρότυπα.
Κάντε κλικ στο πρότυπο που θέλετε να επεξεργαστείτε.
Προσθέστε το μπλοκ κώδικα {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} στο πρότυπό σας.
Προαιρετικά: Για να κάνετε προεπισκόπηση του προτύπου σας, κάντε κλικ στην επιλογή Προεπισκόπηση.
Κάντε κλικ στην επιλογή Αποθήκευση.

Προσθήκη λεπτομερειών παραγγελίας

Μπορείτε να προσθέσετε λεπτομέρειες παραγγελίας στο πρότυπό σας, όπως το όνομα, την ποσότητα και την τιμή των αγορασμένων ειδών.

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στις Εφαρμογές > Order Printer.
Κάντε κλικ στα Πρότυπα.
Κάντε κλικ στο πρότυπο που θέλετε να επεξεργαστείτε.
Στον επεξεργαστή κώδικα, χρησιμοποιήστε μεταβλητές Liquid για να προσθέσετε λεπτομέρειες παραγγελίας και HTML για να προσθέσετε μορφοποίηση. Για παράδειγμα, η χρήση του {{ line_item.price | money }} εμφανίζει την τιμή του είδους.
Προαιρετικά: Για να κάνετε προεπισκόπηση του προτύπου σας, κάντε κλικ στην επιλογή Προεπισκόπηση.
Κάντε κλικ στην επιλογή Αποθήκευση.

Παράδειγμα:

Η Nyla θέλει να επεξεργαστεί το πρότυπο δελτίου συσκευασίας της για να συμπεριλάβει μια λίστα με τα είδη που αποστέλλονται. Προσθέτει τον παρακάτω κώδικα στο κάτω μέρος του προτύπου της Δελτίο συσκευασίας στην εφαρμογή Shopify Order Printer. Ως αποτέλεσμα, τα δελτία συσκευασίας της Nyla περιλαμβάνουν πλέον έναν πίνακα που παραθέτει τα αγορασμένα είδη.

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

Προσθήκη γραμμωτού κώδικα σε πρότυπο

Μπορείτε να προσθέσετε έναν γραμμωτό κώδικα στο πρότυπό σας

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στις Εφαρμογές > Order Printer.
Κάντε κλικ στα Πρότυπα.
Κάντε κλικ στο πρότυπο που θέλετε να επεξεργαστείτε.
Προσθέστε το μπλοκ κώδικα <s-barcode value="a" /> στο πρότυπό σας.
Αντικαταστήστε την τιμή `` με την τιμή κειμένου του γραμμωτού κώδικα σας.
Προαιρετικά: Για να κάνετε προεπισκόπηση του προτύπου σας, κάντε κλικ στην επιλογή Προεπισκόπηση.
Κάντε κλικ στην επιλογή Αποθήκευση.

Προσθήκη κώδικα QR σε πρότυπο

Μπορείτε να προσθέσετε έναν κώδικα QR στο πρότυπό σας.

Βήματα:

Από τον Διαχειριστή Shopify, μεταβείτε στις Εφαρμογές > Order Printer.
Κάντε κλικ στα Πρότυπα.
Κάντε κλικ στο πρότυπο που θέλετε να επεξεργαστείτε.
Προσθέστε το μπλοκ κώδικα <s-barcode type="qrcode" value="" /> στο πρότυπό σας.
Αντικαταστήστε την τιμή `` με την τιμή κειμένου του κώδικα QR σας.
Προαιρετικά: Για να κάνετε προεπισκόπηση του προτύπου σας, κάντε κλικ στην επιλογή Προεπισκόπηση.
Κάντε κλικ στην επιλογή Αποθήκευση.

Χρήση γραμματοσειράς Google σε ένα πρότυπο

Για να χρησιμοποιήσετε μια γραμματοσειρά Google στο πρότυπό σας, επικολλήστε τον παρακάτω κώδικα στο πρότυπό σας και, στη συνέχεια, αντικαταστήστε τη μεταβλητή FontName με το όνομα της γραμματοσειράς Google που επιθυμείτε:

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

Αύξηση του μεγέθους της γραμματοσειράς

Για να αυξήσετε το μέγεθος της γραμματοσειράς στο πρότυπό σας, επικολλήστε τον παρακάτω κώδικα στο πρότυπό σας και, στη συνέχεια, προσαρμόστε τον αριθμό 14 σε μια μεγαλύτερη ή μικρότερη τιμή:

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

Για να αυξήσετε το μέγεθος της γραμματοσειράς των επικεφαλίδων στο πρότυπό σας, επικολλήστε τον παρακάτω κώδικα στο πρότυπό σας και, στη συνέχεια, προσαρμόστε τις τιμές δίπλα στην επικεφαλίδα:

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

Αν έχετε εισαγάγει τα πρότυπά σας από την παλαιού τύπου εφαρμογή Order Printer, τότε μπορείτε να αυξήσετε το μέγεθος της γραμματοσειράς σας χρησιμοποιώντας το παρακάτω μπλοκ κώδικα:

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