Izrada i prilagodba predložaka aplikacije Shopify Order Printer

Svoje predloške možete prilagoditi na razne načine te izraditi vlastite predloške. Aplikacija Shopify Order Printer podržava predloške izrađene u HTML-u, CSS-u te varijable Liquid. Prije prilagodbe predložaka, obavezno se upoznajte s referentnim vodičem za varijable i filtre Liquid za aplikaciju Shopify Order Printer za sve podržane prilagodbe predložaka.

Pregledajte sljedeće primjere kako biste saznali kako možete prilagoditi predloške aplikacije Shopify Order Printer.

Na ovoj stranici

Dodavanje logotipa u predložak

U svoj predložak možete dodati logotip.

Koraci:

U administratorskom alatu za Shopify idite na Sadržaj > Datoteke.
Kliknite Prenesi datoteke i zatim odaberite slikovnu datoteku koju želite prenijeti.
Da biste kopirali URL slike svog logotipa, kliknite ikonu Poveznica.
Kliknite Postavke > Aplikacije.
Kliknite Order Printer.
Kliknite Predlošci.
Kliknite naziv predloška koji želite urediti.
U uređivač koda zalijepite sljedeći blok koda:

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

Zamijenite YOUR_IMAGE_URL_HERE u kodu URL-om svoje slike.
Neobavezno: Za poravnanje logotipa promijenite vrijednost text-align u left (lijevo), right (desno) ili center (sredina).
Neobavezno: Za prilagodbu širine logotipa promijenite vrijednost width u veću ili manju vrijednost, kao što je 8em ili 2em.
Neobavezno: Za pretpregled predloška kliknite Pretpregled.
Kliknite Spremi.

Primjer:

Pregledajte sljedeći primjer kako bi se vaš HTML trebao prikazati nakon dodavanja logotipa u predložak:

Dodavanje slika u predložak

Slike možete dodati u svoj predložak.

Koraci:

U administratorskom alatu za Shopify idite na Sadržaj > Datoteke.
Kliknite Prenesi datoteke i zatim odaberite slikovnu datoteku koju želite prenijeti.
Da biste kopirali URL slike, kliknite ikonu Poveznica.
Kliknite Postavke > Aplikacije.
Kliknite Order Printer.
Kliknite Predlošci.
Kliknite naziv predloška koji želite urediti.
U uređivač koda zalijepite blok koda <img src=”Image Source” />.
Zamijenite Image Source u kodu URL-om svoje slike.
Kliknite Spremi.

Postavljanje širine tablica na 100 %

Tablici možete dodati obrube i rastegnuti je na 100 % širine. Tablici morate dodati klasu table-tabular.

Koraci:

U administratorskom alatu za Shopify idite na Aplikacije > Order Printer.
Kliknite Predlošci.
Kliknite predložak koji želite urediti.
U uređivaču koda pronađite tablicu koju želite urediti i zatim joj dodajte klasu table-tabular.
Neobavezno: Za pretpregled predloška kliknite Pretpregled.
Kliknite Spremi.

Primjer:

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

Prikaz minijatura proizvoda

U predložak narudžbe možete dodati minijature proizvoda. U predložak trebate umetnuti prilagođeni blok koda.

Koraci:

U administratorskom alatu za Shopify idite na Aplikacije > Order Printer.
Kliknite Predlošci.
Kliknite predložak koji želite urediti.
U predložak dodajte blok koda {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}.
Neobavezno: Za pretpregled predloška kliknite Pretpregled.
Kliknite Spremi.

Dodavanje informacija o narudžbi

U predložak možete dodati informacije o narudžbi, poput naziva, količine i cijene kupljenih stavki.

Koraci:

U administratorskom alatu za Shopify idite na Aplikacije > Order Printer.
Kliknite Predlošci.
Kliknite predložak koji želite urediti.
U uređivaču koda upotrijebite varijable Liquid za dodavanje informacija o narudžbi, a HTML za dodavanje oblikovanja. Na primjer, uporabom koda {{ line_item.price | money }} prikazuje se cijena stavke.
Neobavezno: Za pretpregled predloška kliknite Pretpregled.
Kliknite Spremi.

Primjer:

Nyla želi urediti predložak otpremnice kako bi uključila popis stavki koje se šalju. Na dno predloška Otpremnica u aplikaciji Shopify Order Printer dodaje sljedeći kod. Zahvaljujući tome, njezine otpremnice sada uključuju tablicu s popisom kupljenih stavki.

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

Dodavanje crtičnog koda u predložak

U predložak možete dodati crtični kod

Koraci:

U administratorskom alatu za Shopify idite na Aplikacije > Order Printer.
Kliknite Predlošci.
Kliknite predložak koji želite urediti.
U predložak dodajte blok koda <s-barcode value="a" />.
Zamijenite vrijednost `` tekstualnom vrijednošću crtičnog koda.
Neobavezno: Za pretpregled predloška kliknite Pretpregled.
Kliknite Spremi.

Dodavanje QR koda u predložak

U predložak možete dodati QR kod.

Koraci:

U administratorskom alatu za Shopify idite na Aplikacije > Order Printer.
Kliknite Predlošci.
Kliknite predložak koji želite urediti.
U predložak dodajte blok koda <s-barcode type="qrcode" value="" />.
Zamijenite vrijednost `` tekstualnom vrijednošću QR koda.
Neobavezno: Za pretpregled predloška kliknite Pretpregled.
Kliknite Spremi.

Upotreba Google fonta u predlošku

Da biste u predlošku upotrijebili Google font, zalijepite sljedeći kod u predložak i zatim zamijenite varijablu FontName nazivom odabranog Google fonta:

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

Povećanje veličine fonta

Da biste povećali veličinu fonta u predlošku, zalijepite sljedeći kod u predložak i zatim zamijenite broj 14 većom ili manjom vrijednošću:

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

Da biste povećali veličinu fonta naslova u predlošku, zalijepite sljedeći kod u predložak i zatim prilagodite vrijednosti pored naslova:

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

Ako ste predloške uvezli iz naslijeđene aplikacije Order Printer, veličinu fonta možete povećati s pomoću sljedećeg bloka koda:

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