Pagalba
Prisijungti

„Shopify Order Printer“ šablonų kūrimas ir tinkinimas

Galite įvairiais būdais tinkinti šablonus ir kurti savo šablonus. „Shopify Order Printer“ programėlė palaiko šablonus, sukurtus naudojant HTML, CSS ir „Liquid“ kintamuosius. Prieš tinkindami šablonus, būtinai susipažinkite su „Shopify Order Printer“ skirtų „Liquid“ kintamųjų ir filtrų žinynu, kuriame rasite visus palaikomus šablonų tinkinimo būdus.

Peržiūrėkite šiuos pavyzdžius, kad sužinotumėte, kaip galite tinkinti „Shopify Order Printer“ šablonus.

Šiame puslapyje

Prie šablono galite pridėti savo logotipą.

Veiksmai:

  1. „Shopify“ administratoriaus skydelyje eikite į Turinys > Failai.

  2. Spustelėkite Įkelti failus, tada pasirinkite vaizdo failą, kurį norite įkelti.

  3. Norėdami nukopijuoti savo logotipo paveikslėlio URL, spustelėkite Nuorodos piktogramą.

  4. Spustelėkite Nustatymai > Programėlės.

  5. Spustelėkite Order Printer.

  6. Spustelėkite Šablonai.

  7. Spustelėkite šablono, kurį norite redaguoti, pavadinimą.

  8. Kodo rengyklėje įklijuokite šį kodo bloką:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
  1. Kode esantį YOUR_IMAGE_URL_HERE pakeiskite savo paveikslėlio URL.
  2. Nebūtina: norėdami sulygiuoti logotipą, pakeiskite text-align reikšmę į left, right arba center.
  3. Nebūtina: norėdami pakoreguoti logotipo plotį, pakeiskite width reikšmę į didesnę arba mažesnę, pvz., 8em arba 2em.
  4. Nebūtina: norėdami peržiūrėti šabloną, spustelėkite Peržiūrėti.
  5. Spustelėkite Įrašyti.

Pavyzdys:

Peržiūrėkite šį pavyzdį, kaip turėtų atrodyti jūsų HTML, įtraukus logotipą į šabloną:

Pavyzdys, kuriame rodomas kodo blokas, kaip į šabloną įtraukti logotipą

Paveikslėlių įtraukimas į šabloną

Į savo šabloną galite įtraukti paveikslėlių.

Veiksmai:

  1. „Shopify“ administratoriaus skydelyje eikite į Turinys > Failai.

  2. Spustelėkite Įkelti failus, tada pasirinkite vaizdo failą, kurį norite įkelti.

  3. Norėdami nukopijuoti savo paveikslėlio URL, spustelėkite Nuorodos piktogramą.

  4. Spustelėkite Nustatymai > Programėlės.

  5. Spustelėkite Order Printer.

  6. Spustelėkite Šablonai.

  7. Spustelėkite šablono, kurį norite redaguoti, pavadinimą.

  8. Kodo rengyklėje įklijuokite kodo bloką <img src=„Image Source“ />.

  9. Kode esantį Image Source pakeiskite savo paveikslėlio URL.

  10. Spustelėkite Įrašyti.

Lentelių pločio nustatymas į 100 %

Galite pridėti lentelės kraštines ir ištempti ją iki 100 % pločio. Tam reikia prie lentelės pridėti table-tabular klasę.

Veiksmai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Programėlės > Order Printer.

  2. Spustelėkite Šablonai.

  3. Spustelėkite šabloną, kurį norite redaguoti.

  4. Kodo rengyklėje raskite lentelę, kurią norite redaguoti, ir tada prie jos pridėkite table-tabular klasę.

  5. Nebūtina: norėdami peržiūrėti šabloną, spustelėkite Peržiūrėti.

  6. Spustelėkite Įrašyti.

Pavyzdys:

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

Produktų miniatiūrų rodymas

Į savo užsakymo šabloną galite įtraukti produktų miniatiūras. Tam reikia į šabloną įterpti pasirinktinį kodo bloką.

Veiksmai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Programėlės > Order Printer.

  2. Spustelėkite Šablonai.

  3. Spustelėkite šabloną, kurį norite redaguoti.

  4. Į savo šabloną įtraukite {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} kodo bloką.

  5. Nebūtina: norėdami peržiūrėti šabloną, spustelėkite Peržiūrėti.

  6. Spustelėkite Įrašyti.

Užsakymo informacijos įtraukimas

Į savo šabloną galite įtraukti užsakymo informaciją, pavyzdžiui, įsigytų prekių pavadinimą, kiekį ir kainą.

Veiksmai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Programėlės > Order Printer.

  2. Spustelėkite Šablonai.

  3. Spustelėkite šabloną, kurį norite redaguoti.

  4. Kodo rengyklėje naudokite „Liquid“ kintamuosius, kad įtrauktumėte užsakymo informaciją, ir HTML, kad pridėtumėte formatavimą. Pavyzdžiui, naudojant {{ line_item.price | money }}, rodoma prekės kaina.

  5. Nebūtina: norėdami peržiūrėti šabloną, spustelėkite Peržiūrėti.

  6. Spustelėkite Įrašyti.

Pavyzdys:

Nyla nori redaguoti savo pakuotės lapelio šabloną, kad į jį įtrauktų siunčiamų prekių sąrašą. Ji įtraukia šį kodą į savo Pakuotės lapelio šablono apačią „Shopify Order Printer“ programėlėje. Dėl to Nylos pakuotės lapeliuose dabar yra lentelė, kurioje pateikiamas įsigytų prekių sąrašas.

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

Brūkšninio kodo įtraukimas į šabloną

Į savo šabloną galite įtraukti brūkšninį kodą.

Veiksmai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Programėlės > Order Printer.

  2. Spustelėkite Šablonai.

  3. Spustelėkite šabloną, kurį norite redaguoti.

  4. Į savo šabloną įtraukite <s-barcode value="a" /> kodo bloką.

  5. Pakeiskite `` reikšmę savo brūkšninio kodo tekstine reikšme.

  6. Nebūtina: norėdami peržiūrėti šabloną, spustelėkite Peržiūrėti.

  7. Spustelėkite Įrašyti.

QR kodo įtraukimas į šabloną

Į savo šabloną galite įtraukti QR kodą.

Veiksmai:

  1. Savo „Shopify“ administratoriaus skydelyje eikite į Programėlės > Order Printer.

  2. Spustelėkite Šablonai.

  3. Spustelėkite šabloną, kurį norite redaguoti.

  4. Į savo šabloną įtraukite <s-barcode type="qrcode" value="" /> kodo bloką.

  5. Pakeiskite `` reikšmę savo QR kodo tekstine reikšme.

  6. Nebūtina: norėdami peržiūrėti šabloną, spustelėkite Peržiūrėti.

  7. Spustelėkite Įrašyti.

„Google“ šrifto naudojimas šablone

Norėdami šablone naudoti „Google“ šriftą, įklijuokite šį kodą į savo šabloną ir tada pakeiskite kintamąjį FontName savo „Google“ šrifto pavadinimu:

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

Šrifto dydžio didinimas

Norėdami padidinti šrifto dydį savo šablone, įklijuokite į jį šį kodą ir pakoreguokite skaičių 14, pakeisdami jį didesne arba mažesne reikšme:

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

Norėdami padidinti antraščių šrifto dydį savo šablone, įklijuokite į jį šį kodą ir pakoreguokite reikšmes šalia antraščių:

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

Jei importavote savo šablonus iš senesnės versijos „Order Printer“ programėlės, galite padidinti šrifto dydį naudodami šį kodo bloką:

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