Az Order Printer-sablonok testreszabása

A Shopify adminisztrációs felületén akár 15 sablont is létrehozhat és testreszabhat az Order Printer alkalmazáshoz. Alapértelmezés szerint az Order Printer alkalmazás két sablont tartalmaz:

Számla – alapszintű számla, amelyet elküldhet a vásárlónak
Csomagjegyzék – az Ön üzletcímét és a vásárló szállítási címét tartalmazó nyomtatvány

Ezen az oldalon

Új Order Printer-sablon létrehozása

Új Order Printer-sablon létrehozásához a HTML, a CSS és a Liquid ismeretére van szükség. A Shopify tématámogatása a Shopify tervezési irányelvek hatókörén belül segíthet az ingyenes Shopify-témák kisebb módosításaiban. Ha összetettebb módosításokra van szüksége, vagy nem a Shopify által készített témát használ, fontolja meg egy Shopify Partner felbérlését.

Lépések:

A Shopify adminisztrációs felületén lépjen az Alkalmazások > Order Printer (legacy) menüpontra.
Kattintson a Sablonok kezelése gombra.
Kattintson a Sablon hozzáadása gombra.
Adjon meg egy nevet az új sablonnak a Név mezőben.
A sablon létrehozásához adjon hozzá HTML-, CSS- vagy Liquid-kódot a Kód mezőbe.
Ha végzett, kattintson a Mentés gombra.

Order Printer-sablon szerkesztése

Az Order Printer-sablonok szerkesztéséhez a HTML, a CSS és a Liquid ismeretére van szükség. A Shopify tématámogatása nem tudja teljeskörűen szerkeszteni a sablonokat Ön helyett, de a Shopify tervezési irányelvek hatókörén belül segíthet az ingyenes Shopify-témák kisebb módosításaiban. Összetettebb módosítások esetén fontolja meg egy Shopify Partner felbérlését.

Lépések:

A Shopify adminisztrációs felületén lépjen az Alkalmazások > Order Printer (legacy) menüpontra.
Kattintson a Sablonok kezelése gombra.
Kattintson a szerkeszteni kívánt sablon nevére.
Végezze el a módosításokat a sablonon HTML-, CSS- vagy Liquid-kód hozzáadásával vagy szerkesztésével a Kód mezőben. A sablonok testreszabására vonatkozó példák megtekintéséhez tekintse meg a(z) Példák sablonok testreszabására című részt.
Ha végzett, kattintson a Mentés gombra.

Példák sablonok testreszabására

Az alábbi példák bemutatják az Order Printer-sablonok testreszabásának néhány gyakori módját:

Példa: Logó hozzáadása az Order Printer-sablonokhoz

Asztali gép

A Shopify adminisztrációs felületén lépjen a Tartalom > Fájlok menüpontra.
Kattintson a Fájlok feltöltése gombra, és válassza ki a képfájlt a számítógépén.
A Fájlok oldalon keresse meg a feltöltött fájlt, és kattintson az URL másolása gombra.
A Shopify adminisztrációs felületén kattintson a Beállítások > Alkalmazások menüpontra.
Kattintson az Order Printer elemre az alkalmazás megnyitásához.
Kattintson a Sablonok kezelése gombra.
Kattintson a szerkeszteni kívánt sablon nevére.
Írja be a következő kódrészletet a sablonba oda, ahol a logót meg szeretné jeleníteni: <img src="your-image-URL">.
Cserélje le a(z) your-image-URL címet a másolt kép URL-címére. Attól függően, hogy hol szeretné megjeleníteni a logót, szükség lehet egy <br/> címke hozzáadására, hogy sortörést szúrjon be a kép elé vagy mögé.

Mobil

A Shopify app-ban koppintson a ikonra.
A Tartalom menüben koppintson a(z) ikonra, majd koppintson a Fájlok elemre.
Koppintson a Fájlok feltöltése gombra, és válassza ki a képfájlt a számítógépén.
A Fájlok oldalon keresse meg a feltöltött fájlt, és koppintson az URL másolása elemre.
A Shopify adminisztrációs felületén koppintson a Beállítások > Alkalmazások elemre.
Koppintson az Order Printer elemre az alkalmazás megnyitásához.
Koppintson a Sablonok kezelése elemre.
Koppintson a szerkeszteni kívánt sablon nevére.
Írja be a következő kódrészletet a sablonba oda, ahol a logót meg szeretné jeleníteni: <img src="your-image-URL">.
Cserélje le a(z) your-image-URL címet a másolt kép URL-címére. Attól függően, hogy hol szeretné megjeleníteni a logót, szükség lehet egy <br/> címke hozzáadására, hogy sortörést szúrjon be a kép elé vagy mögé.

A HTML-kódban így kell kinéznie:

Példa: Táblázatszélesség beállítása 100%-ra

Ahhoz, hogy a táblázatok szegéllyel rendelkezzenek és 100%-os szélességűek legyenek, adjon hozzá egy table-tabular osztályt a táblázathoz:

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

Példa: Termékbélyegképek megjelenítése

A termékbélyegképek megjelenítéséhez illessze be ezt a kódot a sablonba:

{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}

Rendelési adatok hozzáadása

Hozzáadhat rendelési adatokat a sablonjaihoz, például a megvásárolt tételek nevét, mennyiségét és költségét. Rendelési adatok hozzáadása a sablonhoz:

A Shopify adminisztrációs felületén lépjen az Alkalmazások > Order Printer (legacy) menüpontra.
Kattintson a Sablonok kezelése gombra.
Kattintson a szerkeszteni kívánt sablon nevére.
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(z) {{ line_item.price | money }} kiírja a tétel árát.
Ha végzett, kattintson a Mentés gombra.

Például Nyla szerkeszteni szeretné a csomagjegyzéksablonját, hogy az a szállított tételek listáját is tartalmazza. Ehhez a következő kódot adja hozzá az Order Printer alkalmazás Csomagjegyzék sablonjának aljához:

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

Ennek eredményeként Nyla csomagjegyzékei most már tartalmaznak egy táblázatot, amely felsorolja a megvásárolt tételeket.