Ajutor
Conectați-vă

Crearea și personalizarea șabloanelor Shopify Order Printer

Vă puteți personaliza șabloanele în multe moduri și vă puteți crea propriile șabloane. Aplicația Shopify Order Printer acceptă șabloane create cu HTML, CSS și variabile Liquid. Înainte de a vă personaliza șabloanele, asigurați-vă că v-ați familiarizat cu referințele privind variabilele și filtrele Liquid pentru Shopify Order Printer pentru toate personalizările de șabloane acceptate.

Analizați următoarele exemple pentru a afla cum puteți personaliza șabloanele Shopify Order Printer.

Pe această pagină

Puteți adăuga sigla la șablon.

Pași:

  1. Din panoul de administrare Shopify, accesați Conținut > Fișiere.

  2. Dați clic pe Încărcare fișiere, apoi selectați fișierul imagine pe care doriți să îl încărcați.

  3. Pentru a copia adresa URL pentru imaginea siglei, faceți clic pe pictograma Link.

  4. Faceți clic pe Setări > Aplicații.

  5. Faceți clic pe Order Printer.

  6. Faceți clic pe Șabloane.

  7. Faceți clic pe numele șablonului pe care doriți să îl editați.

  8. În editorul de cod, lipiți următorul bloc de cod:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
  1. Înlocuiți YOUR_IMAGE_URL_HERE din cod cu adresa URL a imaginii dvs.
  2. Opțional: Pentru a alinia sigla, schimbați valoarea text-align în left, right sau center.
  3. Opțional: Pentru a ajusta lățimea siglei, schimbați valoarea width într-o valoare mai mare sau mai mică, cum ar fi 8em sau 2em.
  4. Opțional: Pentru a previzualiza șablonul, faceți clic pe Previzualizare.
  5. Faceți clic pe Salvare.

Exemplu:

Consultați exemplul următor despre cum ar trebui să se afișeze codul HTML după ce adăugați sigla la șablon:

Un exemplu care afișează un bloc de cod despre cum se adaugă o siglă la un șablon

Adăugarea imaginilor la un șablon

Puteți adăuga imagini la șablonul dvs.

Pași:

  1. Din panoul de administrare Shopify, accesați Conținut > Fișiere.

  2. Dați clic pe Încărcare fișiere, apoi selectați fișierul imagine pe care doriți să îl încărcați.

  3. Pentru a copia adresa URL a imaginii, faceți clic pe pictograma Link.

  4. Faceți clic pe Setări > Aplicații.

  5. Faceți clic pe Order Printer.

  6. Faceți clic pe Șabloane.

  7. Faceți clic pe numele șablonului pe care doriți să îl editați.

  8. În editorul de cod, lipiți blocul de cod <img src=”Image Source” />.

  9. Înlocuiți Image Source din cod cu adresa URL a imaginii dvs.

  10. Faceți clic pe Salvare.

Setarea lățimii tabelelor la 100%

Puteți adăuga chenare tabelului și îl puteți extinde la o lățime de 100%. Trebuie să adăugați clasa table-tabular la tabelul dvs.

Pași:

  1. Din panoul de administrare Shopify, accesați Aplicații > Order Printer.

  2. Faceți clic pe Șabloane.

  3. Faceți clic pe șablonul pe care doriți să îl editați.

  4. În editorul de cod, găsiți tabelul pe care doriți să îl editați, apoi adăugați clasa table-tabular la tabelul dvs.

  5. Opțional: Pentru a previzualiza șablonul, faceți clic pe Previzualizare.

  6. Faceți clic pe Salvare.

Exemplu:

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

Afișarea miniaturilor de produs

Puteți adăuga miniaturi de produs la șablonul de comandă. Trebuie să inserați un bloc de cod personalizat în șablonul dvs.

Pași:

  1. Din panoul de administrare Shopify, accesați Aplicații > Order Printer.

  2. Faceți clic pe Șabloane.

  3. Faceți clic pe șablonul pe care doriți să îl editați.

  4. Adăugați blocul de cod {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} la șablonul dvs.

  5. Opțional: Pentru a previzualiza șablonul, faceți clic pe Previzualizare.

  6. Faceți clic pe Salvare.

Adăugarea detaliilor comenzii

Puteți adăuga detalii despre comandă la șablonul dvs., cum ar fi numele, cantitatea și prețul articolelor achiziționate.

Pași:

  1. Din panoul de administrare Shopify, accesați Aplicații > Order Printer.

  2. Faceți clic pe Șabloane.

  3. Faceți clic pe șablonul pe care doriți să îl editați.

  4. În editorul de cod, utilizați variabile în Liquid pentru a adăuga detalii despre comandă și HTML pentru a adăuga formatare. De exemplu, utilizarea {{ line_item.price | money }} afișează prețul articolului.

  5. Opțional: Pentru a previzualiza șablonul, faceți clic pe Previzualizare.

  6. Faceți clic pe Salvare.

Exemplu:

Nyla dorește să-și editeze șablonul pentru lista de colisaj pentru a include o listă a articolelor expediate. Ea adaugă codul următor în partea de jos a șablonului Listă de colisaj din aplicația Shopify Order Printer. Drept urmare, listele de colisaj ale Nylei includ acum un tabel care listează articolele achiziționate.

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

Adăugarea unui cod de bare la un șablon

Puteți adăuga un cod de bare la șablonul dvs.

Pași:

  1. Din panoul de administrare Shopify, accesați Aplicații > Order Printer.

  2. Faceți clic pe Șabloane.

  3. Faceți clic pe șablonul pe care doriți să îl editați.

  4. Adăugați blocul de cod <s-barcode value="a" /> la șablonul dvs.

  5. Înlocuiți valoarea dintre ghilimele cu valoarea text a codului de bare.

  6. Opțional: Pentru a previzualiza șablonul, faceți clic pe Previzualizare.

  7. Faceți clic pe Salvare.

Adăugarea unui cod QR la un șablon

Puteți adăuga un cod QR la șablonul dvs.

Pași:

  1. Din panoul de administrare Shopify, accesați Aplicații > Order Printer.

  2. Faceți clic pe Șabloane.

  3. Faceți clic pe șablonul pe care doriți să îl editați.

  4. Adăugați blocul de cod <s-barcode type="qrcode" value="" /> la șablonul dvs.

  5. Înlocuiți valoarea dintre ghilimele cu valoarea text a codului QR.

  6. Opțional: Pentru a previzualiza șablonul, faceți clic pe Previzualizare.

  7. Faceți clic pe Salvare.

Utilizarea unui font Google într-un șablon

Pentru a utiliza un font Google în șablonul dvs., lipiți codul următor în șablon, apoi înlocuiți variabila FontName cu numele fontului dvs. Google:

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

Mărirea dimensiunii fontului

Pentru a mări dimensiunea fontului în șablonul dvs., lipiți codul următor în șablon, apoi ajustați numărul 14 la o valoare mai mare sau mai mică:

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

Pentru a mări dimensiunea fontului pentru titlurile din șablonul dvs., lipiți codul următor în șablon, apoi ajustați valorile de lângă titlu:

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

Dacă ați importat șabloanele din aplicația moștenită Order Printer, atunci puteți mări dimensiunea fontului utilizând următorul bloc de cod:

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