Súgó
Bejelentkezés

Shopify Order Printer-sablonok létrehozása és testreszabása

A sablonokat sokféleképpen testreszabhatja, és sajátokat is létrehozhat. A Shopify Order Printer alkalmazás támogatja a HTML-, CSS- és Liquid-változókkal készült sablonokat. Mielőtt testreszabná a sablonokat, mindenképpen ismerkedjen meg a Shopify Order Printer Liquid-változók és -szűrők referenciájával az összes támogatott sablon-testreszabás érdekében.

Tekintse át a következő példákat, hogy megtudja, hogyan szabhatja testre a Shopify Order Printer-sablonokat.

Ezen az oldalon

Hozzáadhatja a logóját a sablonhoz.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen a Tartalom > Fájlok menüpontra.

  2. Kattintson a Fájlok feltöltése gombra, majd válassza ki a feltölteni kívánt képfájlt.

  3. A logó képének URL-címe másolásához kattintson a Link ikonra.

  4. Kattintson a Beállítások > Alkalmazások menüpontra.

  5. Kattintson az Order Printer elemre.

  6. Kattintson a Sablonok elemre.

  7. Kattintson a szerkeszteni kívánt sablon nevére.

  8. A kódszerkesztőben illessze be a következő kódblokkot:

<div style="text-align: center;">
  <img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
  1. Cserélje le a kódban található YOUR_IMAGE_URL_HERE részt a kép URL-címére.
  2. Választható: A logó igazításához módosítsa a text-align értékét left, right vagy center értékre.
  3. Választható: A logó szélességének beállításához módosítsa a width értékét egy nagyobb vagy kisebb értékre, például 8em vagy 2em.
  4. Választható: A sablon előnézetének megtekintéséhez kattintson az Előnézet gombra.
  5. Kattintson a Mentés gombra.

Példa:

Tekintse át az alábbi példát, amely bemutatja, hogyan kell kinéznie a HTML-kódnak, miután hozzáadta a logót a sablonhoz:

Példa, amely egy kódblokkot jelenít meg arról, hogyan lehet logót hozzáadni egy sablonhoz

Képek hozzáadása sablonhoz

Hozzáadhat képeket a sablonjához.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen a Tartalom > Fájlok menüpontra.

  2. Kattintson a Fájlok feltöltése gombra, majd válassza ki a feltölteni kívánt képfájlt.

  3. A kép URL-címének másolásához kattintson a Link ikonra.

  4. Kattintson a Beállítások > Alkalmazások menüpontra.

  5. Kattintson az Order Printer elemre.

  6. Kattintson a Sablonok elemre.

  7. Kattintson a szerkeszteni kívánt sablon nevére.

  8. A kódszerkesztőben illessze be a <img src=”Image Source” /> kódblokkot.

  9. Cserélje le a kódban található Image Source részt a kép URL-címére.

  10. Kattintson a Mentés gombra.

Táblázatszélességek beállítása 100%-osra

Szegélyeket adhat a táblázathoz, és 100%-os szélességűre nyújthatja. Ehhez hozzá kell adnia a table-tabular osztályt a táblázathoz.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen az Alkalmazások > Order Printer menüpontra.

  2. Kattintson a Sablonok elemre.

  3. Kattintson a szerkeszteni kívánt sablonra.

  4. A kódszerkesztőben keresse meg a szerkeszteni kívánt táblázatot, majd adja hozzá a table-tabular osztályt a táblázathoz.

  5. Választható: A sablon előnézetének megtekintéséhez kattintson az Előnézet gombra.

  6. Kattintson a Mentés gombra.

Példa:

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

Termékbélyegképek megjelenítése

Hozzáadhat termékbélyegképeket a rendelési sablonhoz. Ehhez be kell szúrnia egy egyéni kódblokkot a sablonba.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen az Alkalmazások > Order Printer menüpontra.

  2. Kattintson a Sablonok elemre.

  3. Kattintson a szerkeszteni kívánt sablonra.

  4. Adja hozzá a {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} kódblokkot a sablonjához.

  5. Választható: A sablon előnézetének megtekintéséhez kattintson az Előnézet gombra.

  6. Kattintson a Mentés gombra.

Rendelési adatok hozzáadása

Hozzáadhat rendelési adatokat a sablonjához, például a megvásárolt tételek nevét, mennyiségét és árát.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen az Alkalmazások > Order Printer menüpontra.

  2. Kattintson a Sablonok elemre.

  3. Kattintson a szerkeszteni kívánt sablonra.

  4. A kódszerkesztőben használjon Liquid-változókat a rendelési adatok hozzáadásához, és HTML-t a formázáshoz. Például a {{ line_item.price | money }} használata megjeleníti a tétel árát.

  5. Választható: A sablon előnézetének megtekintéséhez kattintson az Előnézet gombra.

  6. Kattintson a Mentés gombra.

Példa:

Nyla szerkeszteni szeretné a csomagjegyzék-sablonját, hogy az tartalmazza a szállítandó tételek listáját. A Shopify Order Printer alkalmazásban a következő kódot adja hozzá a Csomagjegyzék sablonja aljához. Ennek eredményeképpen Nyla csomagjegyzékei már tartalmaznak egy táblázatot, amely felsorolja a megvásárolt tételeket.

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

Vonalkód hozzáadása sablonhoz

Hozzáadhat vonalkódot a sablonjához.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen az Alkalmazások > Order Printer menüpontra.

  2. Kattintson a Sablonok elemre.

  3. Kattintson a szerkeszteni kívánt sablonra.

  4. Adja hozzá a <s-barcode value="a" /> kódblokkot a sablonjához.

  5. Cserélje le a `` értéket a vonalkód szöveges értékére.

  6. Választható: A sablon előnézetének megtekintéséhez kattintson az Előnézet gombra.

  7. Kattintson a Mentés gombra.

QR-kód hozzáadása sablonhoz

Hozzáadhat QR-kódot a sablonjához.

Lépések:

  1. A Shopify adminisztrációs felületén lépjen az Alkalmazások > Order Printer menüpontra.

  2. Kattintson a Sablonok elemre.

  3. Kattintson a szerkeszteni kívánt sablonra.

  4. Adja hozzá a <s-barcode type="qrcode" value="" /> kódblokkot a sablonjához.

  5. Cserélje le a `` értéket a QR-kód szöveges értékére.

  6. Választható: A sablon előnézetének megtekintéséhez kattintson az Előnézet gombra.

  7. Kattintson a Mentés gombra.

Google-betűtípus használata sablonban

Google-betűtípus sablonban való használatához illessze be a következő kódot a sablonba, majd cserélje le a FontName változót a Google-betűtípus nevére:

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

Betűméret növelése

A sablon betűméretének növeléséhez illessze be a következő kódot a sablonba, majd módosítsa a 14-es számot egy nagyobb vagy kisebb értékre:

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

A sablonban lévő címsorok betűméretének növeléséhez illessze be a következő kódot a sablonba, majd módosítsa a címsorok melletti értékeket:

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

Ha a régi Order Printer alkalmazásból importálta a sablonjait, akkor a következő kódblokkal növelheti a betűméretet:

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