Ustvarjanje in prilagajanje predlog v aplikaciji Shopify Order Printer

Predloge lahko prilagajate na različne načine in ustvarite lastne. Aplikacija Shopify Order Printer podpira predloge, ustvarjene s HTML-jem, seznami slogov (CSS) in spremenljivkami Liquid. Preden prilagodite predloge, se seznanite z referenco za spremenljivke Liquid in filtre za Shopify Order Printer, kjer so navedene vse podprte prilagoditve predlog.

Oglejte si naslednje primere in spoznajte, kako lahko prilagodite predloge v aplikaciji Shopify Order Printer.

Na tej strani

Dodajanje logotipa v predlogo

V predlogo lahko dodate svoj logotip.

Koraki:

V skrbniku Shopify pojdite v Vsebina > Datoteke.
Kliknite Naloži datoteke in nato izberite slikovno datoteko, ki jo želite naložiti.
Če želite kopirati URL-naslov za sliko logotipa, kliknite ikono Povezava.
Kliknite Nastavitve > Aplikacije.
Kliknite Order Printer.
Kliknite Predloge.
Kliknite ime predloge, ki jo želite urediti.
V urejevalnik kode prilepite naslednji blok kode:

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

Zamenjajte YOUR_IMAGE_URL_HERE v kodi z URL-naslovom slike.
Izbirno: da bi poravnali logotip, spremenite vrednost text-align na left, right ali center.
Izbirno: da bi prilagodili širino logotipa, spremenite vrednost width na večjo ali manjšo vrednost, na primer 8em ali 2em.
Izbirno: če si želite ogledati predogled predloge, kliknite Predogled.
Kliknite Shrani.

Primer:

Oglejte si naslednji primer prikaza kode HTML po tem, ko v predlogo dodate logotip:

Dodajanje slik v predlogo

V predlogo lahko dodate slike.

Koraki:

V skrbniku Shopify pojdite v Vsebina > Datoteke.
Kliknite Naloži datoteke in nato izberite slikovno datoteko, ki jo želite naložiti.
Če želite kopirati URL-naslov za sliko, kliknite ikono Povezava.
Kliknite Nastavitve > Aplikacije.
Kliknite Order Printer.
Kliknite Predloge.
Kliknite ime predloge, ki jo želite urediti.
V urejevalnik kode prilepite blok kode <img src=”Image Source” />.
Zamenjajte Image Source v kodi z URL-naslovom slike.
Kliknite Shrani.

Nastavitev širine tabele na 100 %

Tabeli lahko dodate obrobe in jo raztegnete na širino 100 %. Tabeli morate dodati razred table-tabular.

Koraki:

V skrbniku Shopify pojdite v Aplikacije > Order Printer.
Kliknite Predloge.
Kliknite predlogo, ki jo želite urediti.
V urejevalniku kode poiščite tabelo, ki jo želite urediti, in ji nato dodajte razred table-tabular.
Izbirno: če si želite ogledati predogled predloge, kliknite Predogled.
Kliknite Shrani.

Primer:

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

Prikaz slik izdelkov

Slike izdelkov lahko dodate v predlogo za naročila. V predlogo morate vstaviti blok kode po meri.

Koraki:

V skrbniku Shopify pojdite v Aplikacije > Order Printer.
Kliknite Predloge.
Kliknite predlogo, ki jo želite urediti.
V predlogo dodajte blok kode {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}.
Izbirno: če si želite ogledati predogled predloge, kliknite Predogled.
Kliknite Shrani.

Dodajanje podrobnosti o naročilu

V predlogo lahko dodate podrobnosti o naročilu, kot so ime, količina in cena kupljenih kosov.

Koraki:

V skrbniku Shopify pojdite v Aplikacije > Order Printer.
Kliknite Predloge.
Kliknite predlogo, ki jo želite urediti.
V urejevalniku kode uporabite spremenljivke Liquid, da dodate podrobnosti o naročilu, in kodo HTML za dodajanje oblikovanja. Uporaba spremenljivke {{ line_item.price | money }} na primer prikaže ceno kosa.
Izbirno: če si želite ogledati predogled predloge, kliknite Predogled.
Kliknite Shrani.

Primer:

Nyla želi urediti predlogo za dobavnico, tako da bo vključevala seznam poslanih kosov. Na dno predloge Packing slip v aplikaciji Shopify Order Printer doda naslednjo kodo. Zato Nylina dobavnica zdaj vključuje tabelo s seznamom kupljenih kosov.

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

Dodajanje črtne kode v predlogo

V predlogo lahko dodate črtno kodo.

Koraki:

V skrbniku Shopify pojdite v Aplikacije > Order Printer.
Kliknite Predloge.
Kliknite predlogo, ki jo želite urediti.
V predlogo dodajte blok kode <s-barcode value="a" />.
Vrednost `` zamenjajte z besedilno vrednostjo svoje črtne kode.
Izbirno: če si želite ogledati predogled predloge, kliknite Predogled.
Kliknite Shrani.

Dodajanje QR kode v predlogo

V predlogo lahko dodate QR kodo.

Koraki:

V skrbniku Shopify pojdite v Aplikacije > Order Printer.
Kliknite Predloge.
Kliknite predlogo, ki jo želite urediti.
V predlogo dodajte blok kode <s-barcode type="qrcode" value="" />.
Vrednost `` zamenjajte z besedilno vrednostjo svoje QR kode.
Izbirno: če si želite ogledati predogled predloge, kliknite Predogled.
Kliknite Shrani.

Uporaba pisave Google v predlogi

Če želite v predlogi uporabiti pisavo Google, prilepite naslednjo kodo v predlogo in nato spremenljivko FontName zamenjajte z imenom vaše pisave Google:

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

Povečanje velikosti pisave

Če želite povečati velikost pisave v predlogi, prilepite naslednjo kodo v predlogo in nato število 14 zamenjajte z večjo ali manjšo vrednostjo:

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

Če želite povečati velikost pisave naslovov v predlogi, prilepite naslednjo kodo v predlogo in nato prilagodite vrednosti poleg naslova:

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

Če ste uvozili predloge iz starejše različice (legacy) aplikacije Order Printer, lahko povečate velikost pisave z naslednjim blokom kode:

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