Pomocník
Prihlásiť sa

Vytváranie a prispôsobenie šablón v aplikácii Shopify Order Printer

Šablóny môžete prispôsobiť rôznymi spôsobmi a vytvoriť si aj vlastné. Aplikácia Shopify Order Printer podporuje šablóny vytvorené pomocou HTML, CSS a premenných Liquid. Pred prispôsobením šablón sa oboznámte so všetkými podporovanými prispôsobeniami v príručke premenných Liquid a filtrov pre aplikáciu Shopify Order Printer.

V nasledujúcich príkladoch zistíte, ako môžete prispôsobiť šablóny v aplikácii Shopify Order Printer.

Na tejto stránke

Do svojej šablóny môžete pridať logo.

Postup:

  1. V administrátorovi Shopify prejdite na Obsah > Súbory.

  2. Kliknite na Nahrať súbory a vyberte súbor obrázka, ktorý chcete nahrať.

  3. Ak chcete skopírovať adresu URL obrázka loga, kliknite na ikonu Odkaz.

  4. Kliknite na Nastavenia > Aplikácie.

  5. Kliknite na Order Printer.

  6. Kliknite na Šablóny.

  7. Kliknite na názov šablóny, ktorú chcete upraviť.

  8. Do editora kódu prilepte nasledujúci blok kódu:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
  1. V kóde nahraďte reťazec YOUR_IMAGE_URL_HERE adresou URL vášho obrázka.
  2. Voliteľné: Na zarovnanie loga zmeňte hodnotu atribútu text-align na left, right alebo center.
  3. Voliteľné: Na úpravu šírky loga zmeňte hodnotu atribútu width na väčšiu alebo menšiu hodnotu, napríklad 8em alebo 2em.
  4. Voliteľné: Ak chcete zobraziť náhľad šablóny, kliknite na Náhľad.
  5. Kliknite na Uložiť.

Príklad:

Prezrite si nasledujúci príklad, ako by sa malo HTML zobraziť po pridaní loga do šablóny:

Príklad zobrazujúci blok kódu na pridanie loga do šablóny

Pridanie obrázkov do šablóny

Do svojej šablóny môžete pridať obrázky.

Postup:

  1. V administrátorovi Shopify prejdite na Obsah > Súbory.

  2. Kliknite na Nahrať súbory a vyberte súbor obrázka, ktorý chcete nahrať.

  3. Ak chcete skopírovať adresu URL obrázka, kliknite na ikonu Odkaz.

  4. Kliknite na Nastavenia > Aplikácie.

  5. Kliknite na Order Printer.

  6. Kliknite na Šablóny.

  7. Kliknite na názov šablóny, ktorú chcete upraviť.

  8. Do editora kódu prilepte blok kódu <img src=”Zdroj obrázka” />.

  9. V kóde nahraďte reťazec Zdroj obrázka adresou URL vášho obrázka.

  10. Kliknite na Uložiť.

Nastavenie 100 % šírky tabuľky

Do tabuľky môžete pridať orámovanie a roztiahnuť ju na šírku 100 %. Do svojej tabuľky musíte pridať triedu table-tabular.

Postup:

  1. V administrátorovi Shopify prejdite na Aplikácie > Order Printer.

  2. Kliknite na Šablóny.

  3. Kliknite na šablónu, ktorú chcete upraviť.

  4. V editore kódu nájdite tabuľku, ktorú chcete upraviť, a pridajte do nej triedu table-tabular.

  5. Voliteľné: Ak chcete zobraziť náhľad šablóny, kliknite na Náhľad.

  6. Kliknite na Uložiť.

Príklad:

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

Zobrazenie miniatúr produktov

Do šablóny objednávky môžete pridať miniatúry produktov. Do šablóny je potrebné vložiť vlastný blok kódu.

Postup:

  1. V administrátorovi Shopify prejdite na Aplikácie > Order Printer.

  2. Kliknite na Šablóny.

  3. Kliknite na šablónu, ktorú chcete upraviť.

  4. Pridajte do šablóny blok kódu {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}.

  5. Voliteľné: Ak chcete zobraziť náhľad šablóny, kliknite na Náhľad.

  6. Kliknite na Uložiť.

Pridanie detailov objednávky

Do šablóny môžete pridať detaily objednávky, ako je napríklad názov, množstvo a cena zakúpených položiek.

Postup:

  1. V administrátorovi Shopify prejdite na Aplikácie > Order Printer.

  2. Kliknite na Šablóny.

  3. Kliknite na šablónu, ktorú chcete upraviť.

  4. V editore kódu použite premenné Liquid na pridanie detailov objednávky a HTML na pridanie formátovania. Napríklad použitím premennej {{ line_item.price | money }} sa zobrazí cena položky.

  5. Voliteľné: Ak chcete zobraziť náhľad šablóny, kliknite na Náhľad.

  6. Kliknite na Uložiť.

Príklad:

Nyla chce upraviť svoju šablónu baliaceho listu tak, aby obsahovala zoznam odosielaných položiek. Na koniec šablóny Packing slip v aplikácii Shopify Order Printer pridá nasledujúci kód. Výsledkom je, že Nyla má teraz v baliacich listoch tabuľku so zoznamom zakúpených položiek.

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

Pridanie čiarového kódu do šablóny

Do šablóny môžete pridať čiarový kód

Postup:

  1. V administrátorovi Shopify prejdite na Aplikácie > Order Printer.

  2. Kliknite na Šablóny.

  3. Kliknite na šablónu, ktorú chcete upraviť.

  4. Pridajte do šablóny blok kódu <s-barcode value="a" />.

  5. Nahraďte hodnotu `` textovou hodnotou svojho čiarového kódu.

  6. Voliteľné: Ak chcete zobraziť náhľad šablóny, kliknite na Náhľad.

  7. Kliknite na Uložiť.

Pridanie QR kódu do šablóny

Do šablóny môžete pridať QR kód.

Postup:

  1. V administrátorovi Shopify prejdite na Aplikácie > Order Printer.

  2. Kliknite na Šablóny.

  3. Kliknite na šablónu, ktorú chcete upraviť.

  4. Pridajte do šablóny blok kódu <s-barcode type="qrcode" value="" />.

  5. Nahraďte hodnotu `` textovou hodnotou svojho QR kódu.

  6. Voliteľné: Ak chcete zobraziť náhľad šablóny, kliknite na Náhľad.

  7. Kliknite na Uložiť.

Použitie druhu písma Google v šablóne

Ak chcete v šablóne použiť druh písma Google, prilepte do nej nasledujúci kód a potom nahraďte premennú FontName názvom svojho druhu písma Google:

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

Zväčšenie veľkosti písma

Ak chcete zväčšiť veľkosť písma v šablóne, prilepte do nej nasledujúci kód a potom upravte číslo 14 na väčšiu alebo menšiu hodnotu:

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

Ak chcete zväčšiť veľkosť písma nadpisov v šablóne, prilepte do nej nasledujúci kód a potom upravte hodnoty vedľa nadpisu:

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

Ak ste importovali šablóny zo staršej aplikácie Order Printer, môžete zväčšiť veľkosť písma pomocou nasledujúceho bloku kódu:

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