Shopify Order Printer -mallien luominen ja mukauttaminen

Voit mukauttaa mallejasi monin tavoin ja luoda omia mallejasi. Shopify Order Printer -sovellus tukee malleja, jotka on tehty HTML-, CSS- ja liquid-muuttujilla. Ennen kuin mukautat mallejasi, tutustu Shopify Order Printerin liquid-muuttujien ja -suodattimien viiteoppaaseen nähdäksesi kaikki tuetut mallien mukautukset.

Tutustu seuraaviin esimerkkeihin oppiaksesi, miten voit mukauttaa Shopify Order Printer -malleja.

Tällä sivulla

Logon lisääminen malliin

Voit lisätä logosi malliisi.

Vaiheet:

Siirry Shopifyn ohjausnäkymässä kohtaan Sisältö > Tiedostot.
Klikkaa Lataa tiedostoja ja valitse sitten kuvatiedosto, jonka haluat ladata.
Kopioi logokuvasi URL-osoite napsauttamalla Linkki-kuvaketta.
Napsauta Asetukset > Sovellukset.
Napsauta Order Printer.
Napsauta Mallit.
Napsauta sen mallin nimeä, jota haluat muokata.
Liitä koodieditoriin seuraava koodilohko:

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

Korvaa koodin YOUR_IMAGE_URL_HERE kuvasi URL-osoitteella.
Valinnainen: Voit tasata logosi muuttamalla text-align-arvoksi left, right tai center.
Valinnainen: Voit säätää logosi leveyttä muuttamalla width-arvoa suuremmaksi tai pienemmäksi, kuten arvoon 8em tai 2em.
Valinnainen: Voit esikatsella mallia napsauttamalla Esikatsele.
Napsauta Tallenna.

Esimerkki:

Tarkastele seuraavaa esimerkkiä siitä, miltä HTML-koodisi pitäisi näyttää, kun olet lisännyt logon malliisi:

Kuvien lisääminen malliin

Voit lisätä kuvia malliisi.

Vaiheet:

Siirry Shopifyn ohjausnäkymässä kohtaan Sisältö > Tiedostot.
Klikkaa Lataa tiedostoja ja valitse sitten kuvatiedosto, jonka haluat ladata.
Kopioi kuvasi URL-osoite napsauttamalla Linkki-kuvaketta.
Napsauta Asetukset > Sovellukset.
Napsauta Order Printer.
Napsauta Mallit.
Napsauta sen mallin nimeä, jota haluat muokata.
Liitä koodieditoriin <img src=”Image Source” /> -koodilohko.
Korvaa koodin Image Source kuvasi URL-osoitteella.
Napsauta Tallenna.

Taulukon leveyden asettaminen 100-prosenttiseksi

Voit lisätä taulukkoosi reunaviivat ja venyttää sen 100 %:n levyiseksi lisäämällä taulukkoon table-tabular-luokan.

Vaiheet:

Siirry Shopifyn ohjausnäkymässä kohtaan Sovellukset > Order Printer.
Napsauta Mallit.
Napsauta sitä mallia, jota haluat muokata.
Etsi koodieditorista muokattava taulukko ja lisää siihen table-tabular-luokka.
Valinnainen: Voit esikatsella mallia napsauttamalla Esikatsele.
Napsauta Tallenna.

Esimerkki:

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

Tuotteiden pikkukuvien näyttäminen

Voit lisätä tuotteiden pikkukuvia tilausmalliisi lisäämällä malliin mukautetun koodilohkon.

Vaiheet:

Siirry Shopifyn ohjausnäkymässä kohtaan Sovellukset > Order Printer.
Napsauta Mallit.
Napsauta sitä mallia, jota haluat muokata.
Lisää {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} -koodilohko malliisi.
Valinnainen: Voit esikatsella mallia napsauttamalla Esikatsele.
Napsauta Tallenna.

Tilaustietojen lisääminen

Voit lisätä malliisi tilaustietoja, kuten ostettujen tuotteiden nimen, määrän ja hinnan.

Vaiheet:

Siirry Shopifyn ohjausnäkymässä kohtaan Sovellukset > Order Printer.
Napsauta Mallit.
Napsauta sitä mallia, jota haluat muokata.
Käytä koodieditorissa Liquid-muuttujia tilaustietojen lisäämiseen ja HTML:ää muotoilun lisäämiseen. Esimerkiksi {{ line_item.price | money }} -koodi näyttää tuotteen hinnan.
Valinnainen: Voit esikatsella mallia napsauttamalla Esikatsele.
Napsauta Tallenna.

Esimerkki:

Nyla haluaa muokata pakkausluettelomalliaan niin, että se sisältää luettelon lähetettävistä tuotteista. Hän lisää seuraavan koodin Shopify Order Printer -sovelluksen Pakkausluettelo-mallinsa alaosaan. Tämän seurauksena Nylan pakkausluettelot sisältävät nyt taulukon, jossa luetellaan ostetut tuotteet.

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

Viivakoodin lisääminen malliin

Voit lisätä viivakoodin malliisi.

Vaiheet:

Siirry Shopifyn ohjausnäkymässä kohtaan Sovellukset > Order Printer.
Napsauta Mallit.
Napsauta sitä mallia, jota haluat muokata.
Lisää <s-barcode value="a" /> -koodilohko malliisi.
Korvaa arvo "a" viivakoodisi tekstiarvolla.
Valinnainen: Voit esikatsella mallia napsauttamalla Esikatsele.
Napsauta Tallenna.

QR-koodin lisääminen malliin

Voit lisätä QR-koodin malliisi.

Vaiheet:

Siirry Shopifyn ohjausnäkymässä kohtaan Sovellukset > Order Printer.
Napsauta Mallit.
Napsauta sitä mallia, jota haluat muokata.
Lisää <s-barcode type="qrcode" value="" /> -koodilohko malliisi.
Korvaa ``-arvo QR-koodisi tekstiarvolla.
Valinnainen: Voit esikatsella mallia napsauttamalla Esikatsele.
Napsauta Tallenna.

Google-fontin käyttäminen mallissa

Jos haluat käyttää Google-fonttia mallissasi, liitä seuraava koodi malliisi ja korvaa sitten FontName-muuttuja Google-fonttisi nimellä:

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

Fonttikoon suurentaminen

Jos haluat suurentaa fonttikokoa mallissasi, liitä seuraava koodi malliisi ja säädä sitten numeroa 14 suuremmaksi tai pienemmäksi:

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

Jos haluat suurentaa otsikoiden fonttikokoa mallissasi, liitä seuraava koodi malliisi ja säädä sitten otsikon vieressä olevia arvoja:

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

Jos olet tuonut mallisi vanhasta Order Printer -sovelluksesta, voit suurentaa fonttikokoa seuraavalla koodilohkolla:

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