Kirjaudu sisään
Aloita ilmainen kokeilu

Shopify Order Printer -mallien luominen ja mukauttaminen

Voit muokata mallejasi monella eri tavalla ja luoda omia malleja. Shopify Order Printer -sovellus tukee HTML-, CSS- ja Liquid-muuttujien avulla tehtyjä malleja. Ennen kuin mukautat mallejasi, tarkista kaikki tuetut teemojen mukautukset Shopify Order Printer -sovelluksen Liquid-muuttujien ja suodattimien ohjeesta.

Seuraavien esimerkkien avulla voit oppia mukauttamaan Shopify Order Printer ‑malleja.

Tällä sivulla

Voit lisätä logon malliisi.

Ohjeet:

  1. Siirry Shopify Administa kohtaan Sisältö > Tiedostot.

  2. Klikkaa Lataa tiedostoja ja valitse sitten tiedosto, jonka haluat ladata.

  3. Jos haluat kopioida logokuvan URL-osoitteen, klikkaa linkkikuvaketta.

  4. Klikkaa Asetukset > Sovellukset ja myyntikanavat.

  5. Klikkaa Order Printer.

  6. Klikkaa Mallit.

  7. Klikkaa sen mallin nimeä, jota haluat muokata.

  8. Liitä koodieditoriin seuraava koodilohko:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
  1. Korvaa koodin YOUR_IMAGE_URL_HERE-kohta kuvan URL-osoitteella.
  2. Valinnainen: Jos haluat tasata logon, muuta text-align-arvoksi left, right tai center.
  3. Valinnainen: Jos haluat säätää logon leveyttä, muuta width-arvoa suuremmaksi tai pienemmäksi, kuten 8em tai 2em.
  4. Valinnainen: Jos haluat esikatsella mallia, klikkaa Esikatsele.
  5. Klikkaa Tallenna.

Esimerkiksi:

Katso seuraavasta esimerkistä siitä, miltä HTML-koodin pitäisi näyttää, kun olet lisännyt logon malliin:

Esimerkki, joka näyttää koodilohkon siitä, miten voit lisätä logon mallin

Kuvien lisääminen malliin

Voit lisätä malliin kuvia.

Ohjeet:

  1. Siirry Shopify Administa kohtaan Sisältö > Tiedostot.

  2. Klikkaa Lataa tiedostoja ja valitse sitten tiedosto, jonka haluat ladata.

  3. Jos haluat kopioida kuvan URL-osoitteen, klikkaa linkkikuvaketta.

  4. Klikkaa Asetukset > Sovellukset ja myyntikanavat.

  5. Klikkaa Order Printer.

  6. Klikkaa Mallit.

  7. Klikkaa sen mallin nimeä, jota haluat muokata.

  8. Liitä koodieditoriin <img src=”Image Source” />-koodilohko.

  9. Korvaa koodin Image Source-kohta kuvan URL-osoitteella.

  10. Klikkaa Tallenna.

Taulukoiden leveyden asettaminen 100 %:iin

Voit lisätä taulukkoon rajoja ja venyttää sen 100 %:n leveyteen. Sinun täytyy lisätä taulukkoon table-tabular-luokka.

Ohjeet:

  1. Siirry Shopify Administa kohtaan Asetukset > Sovellukset ja myyntikanavat.

  2. Klikkaa Order Printer.

  3. Klikkaa Avaa sovellus.

  4. Klikkaa Mallit.

  5. Klikkaa mallia, jota haluat muokata.

  6. Etsi koodieditorista muokattava taulukko ja lisää sitten table-tabular-luokka taulukkoon.

  7. Valinnainen: Jos haluat esikatsella mallia, klikkaa Esikatsele.

  8. Klikkaa Tallenna.

Esimerkiksi:

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

Tuotteen pikkukuvien näyttäminen

Voit lisätä tuotteiden pikkukuvia tilausmalliisi. Sinun täytyy lisätä malliisi mukautettu koodilohko.

Ohjeet:

  1. Siirry Shopify Administa kohtaan Asetukset > Sovellukset ja myyntikanavat.

  2. Klikkaa Order Printer.

  3. Klikkaa Avaa sovellus.

  4. Klikkaa Mallit.

  5. Klikkaa mallia, jota haluat muokata.

  6. Lisää {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}-koodilohko malliisi.

  7. Valinnainen: Jos haluat esikatsella mallia, klikkaa Esikatsele.

  8. Klikkaa Tallenna.

Lisää tilaustiedot

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

Ohjeet:

  1. Siirry Shopify Administa kohtaan Asetukset > Sovellukset ja myyntikanavat.

  2. Klikkaa Order Printer.

  3. Klikkaa Avaa sovellus.

  4. Klikkaa Mallit.

  5. Klikkaa mallia, jota haluat muokata.

  6. Käytä koodieditorissa Liquid-muuttujia tilausten tietojen ja HTML-koodin lisäämiseen muotoiluja varten. Esimerkiksi {{ line_item.price | money }} näyttää tuotteen hinnan.

  7. Valinnainen: Jos haluat esikatsella mallia, klikkaa Esikatsele.

  8. Klikkaa Tallenna.

Esimerkiksi:

Nyla haluaa muokata pakkausluettelomallia niin, että se sisältää luettelon lähetettävistä tuotteista. Hän lisää seuraavan koodin Pakkausluettelo-mallin alaosaan Shopify Order Printer ‑sovelluksessa: Tämän jälkeen Nylan pakkausluetteloissa on taulukko, jossa ostetut tuotteet näkyvät.

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      {% if tax_lines.size > 0 %}
      <th>Taxes</th>
      {% endif %}
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        <td>{{ 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ä malliisi viivakoodin.

Ohjeet:

  1. Siirry Shopify Administa kohtaan Asetukset > Sovellukset ja myyntikanavat.

  2. Klikkaa Order Printer.

  3. Klikkaa Avaa sovellus.

  4. Klikkaa Mallit.

  5. Klikkaa mallia, jota haluat muokata.

  6. Lisää <s-barcode value="a" />-koodilohko malliisi.

  7. Korvaa ``-arvo viivakoodin tekstiarvolla.

  8. Valinnainen: Jos haluat esikatsella mallia, klikkaa Esikatsele.

  9. Klikkaa Tallenna.

QR-koodin lisääminen malliin

Voit lisätä malliin QR-koodin.

Ohjeet:

  1. Siirry Shopify Administa kohtaan Asetukset > Sovellukset ja myyntikanavat.

  2. Klikkaa Order Printer.

  3. Klikkaa Avaa sovellus.

  4. Klikkaa Mallit.

  5. Klikkaa mallia, jota haluat muokata.

  6. Lisää <s-barcode type="qrcode" value="" />-koodilohko malliisi.

  7. Korvaa ``-arvo QR-koodin tekstiarvolla.

  8. Valinnainen: Jos haluat esikatsella mallia, klikkaa Esikatsele.

  9. Klikkaa Tallenna.

Google-fontin käyttäminen mallissa

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

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

Fonttikoon kasvattaminen

Jos haluat kasvattaa mallin fonttikokoa, liitä malliisi seuraava koodi ja vaihda sitten numero 14suuremmaksi tai pienemmäksi:

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

Jos haluat kasvattaa mallisi otsikoiden fonttikokoa, liitä malliin seuraava koodi ja säädä sitten otsikon vieressä olevaa arvoa:

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

Jos toit mallit vanhasta Order Printer -sovelluksesta, voit suurentaa fonttikokoa seuraavalla koodilohkolla:

<style>
  :root {
    --legacy-font-size: 14px;
    --legacy-print-font-size: 18px;
  }
</style>
Etkö löydä hakemaasi vastausta? Autamme mielellämme.