יצירה והתאמה אישית של תבניות Shopify Order Printer

אפשר להתאים אישית תבניות בדרכים רבות, או ליצור תבניות משלך. האפליקציה Shopify Order Printer תומכת בתבניות שנוצרו עם HTML, CSS ומשתני Liquid. לפני התאמה אישית של התבניות שלך, מומלץ לעיין במדריך משתני Liquid והמסננים עבור Shopify Order Printer כדי לראות את כל ההתאמות האישיות הנתמכות עבור תבניות.

אפשר לעיין בדוגמאות הבאות כדי ללמוד על התאמה אישית של תבניות Shopify Order Printer.

הוספת לוגו לתבנית

אפשר להוסיף את הלוגו שלך לתבנית.

שלבים:

1. במנהל של Shopify, יש לעבור אל תוכן > קבצים.

2. יש ללחוץ על העלאת קבצים, ואז לבחור את קובץ התמונה שרוצים להעלות.

3. כדי להעתיק את כתובת ה-URL של תמונת הלוגו שלך, יש ללחוץ על הסמל קישור.

4. יש ללחוץ על הגדרות > אפליקציות.

5. יש ללחוץ על Order Printer.

6. יש ללחוץ על תבניות.

7. יש ללחוץ על שם התבנית שרוצים לערוך.

8. בעורך הקוד, יש להדביק את הבלוק הבא של הקוד:

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

1. יש להחליף את YOUR_IMAGE_URL_HERE בקוד בכתובת ה-URL של התמונה שלך.
2. אופציונלי: כדי ליישר את הלוגו, יש לשנות את הערך של text-align ל-left, right או center.
3. אופציונלי: כדי להתאים את רוחב הלוגו, יש לשנות את הערך width לערך גדול או קטן יותר, כגון 8em או 2em.
4. אופציונלי: כדי להציג את התבנית בתצוגה מקדימה, יש ללחוץ על תצוגה מקדימה.
5. יש ללחוץ על שמירה.

דוגמה:

אפשר לעיין בדוגמה הבאה כדי לראות איך ה-HTML אמור להיראות לאחר הוספת הלוגו לתבנית:

הוספת תמונות לתבנית

אפשר להוסיף תמונות לתבנית שלך.

שלבים:

1. במנהל של Shopify, יש לעבור אל תוכן > קבצים.

2. יש ללחוץ על העלאת קבצים, ואז לבחור את קובץ התמונה שרוצים להעלות.

3. כדי להעתיק את כתובת ה-URL של התמונה שלך, יש ללחוץ על הסמל קישור.

4. יש ללחוץ על הגדרות > אפליקציות.

5. יש ללחוץ על Order Printer.

6. יש ללחוץ על תבניות.

7. יש ללחוץ על שם התבנית שרוצים לערוך.

8. בעורך הקוד, יש להדביק את הבלוק של הקוד <img src=”Image Source” />.

9. יש להחליף את Image Source בקוד בכתובת ה-URL של התמונה שלך.

10. יש ללחוץ על שמירה.

הגדרת רוחב טבלה ל-100%

אפשר להוסיף גבולות לטבלה ולמתוח אותה לרוחב 100%. לשם כך, יש להוסיף את המחלקה table-tabular לטבלה.

שלבים:

1. במנהל Shopify, יש לעבור אל אפליקציות > Order Printer.

2. יש ללחוץ על תבניות.

3. יש ללחוץ על התבנית שרוצים לערוך.

4. בעורך הקוד, יש לאתר את הטבלה שרוצים לערוך, ולאחר מכן להוסיף את המחלקה table-tabular לטבלה.

5. אופציונלי: כדי להציג את התבנית בתצוגה מקדימה, יש ללחוץ על תצוגה מקדימה.

6. יש ללחוץ על שמירה.

דוגמה:

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

הצגת תמונות ממוזערות של מוצרים

אפשר להוסיף תמונות ממוזערות של מוצרים לתבנית ההזמנה. עליך להוסיף בלוק של קוד מותאם אישית לתבנית שלך.

שלבים:

1. במנהל Shopify, יש לעבור אל אפליקציות > Order Printer.

2. יש ללחוץ על תבניות.

3. יש ללחוץ על התבנית שרוצים לערוך.

4. יש להוסיף את בלוק הקוד {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} לתבנית.

5. אופציונלי: כדי להציג את התבנית בתצוגה מקדימה, יש ללחוץ על תצוגה מקדימה.

6. יש ללחוץ על שמירה.

הוספת פרטי ההזמנה

אפשר להוסיף לתבנית פרטי הזמנה כגון שם, כמות ומחיר של הפריטים שנרכשו.

שלבים:

1. במנהל Shopify, יש לעבור אל אפליקציות > Order Printer.

2. יש ללחוץ על תבניות.

3. יש ללחוץ על התבנית שרוצים לערוך.

4. בעורך הקוד, יש להשתמש במשתני Liquid כדי להוסיף פרטי הזמנה, וב-HTML כדי להוסיף עיצוב. לדוגמה, השימוש ב-{{ line_item.price | money }} מציג את מחיר הפריט.

5. אופציונלי: כדי להציג את התבנית בתצוגה מקדימה, יש ללחוץ על תצוגה מקדימה.

6. יש ללחוץ על שמירה.

דוגמה:

ניילה רוצה לערוך את תבנית רשימת האריזה שלה כך שתכלול רשימה של הפריטים שנשלחים. היא מוסיפה את הקוד הבא לתחתית התבנית רשימת אריזה באפליקציית Shopify Order Printer. כתוצאה מכך, רשימות האריזה של ניילה כוללות כעת טבלה שמפרטת את הפריטים שנרכשו.

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

הוספת ברקוד לתבנית

אפשר להוסיף ברקוד לתבנית.

שלבים:

1. במנהל Shopify, יש לעבור אל אפליקציות > Order Printer.

2. יש ללחוץ על תבניות.

3. יש ללחוץ על התבנית שרוצים לערוך.

4. יש להוסיף את בלוק הקוד <s-barcode value="a" /> לתבנית.

5. יש להחליף את הערך `` בערך הטקסט של הברקוד.

6. אופציונלי: כדי להציג את התבנית בתצוגה מקדימה, יש ללחוץ על תצוגה מקדימה.

7. יש ללחוץ על שמירה.

הוספת קוד QR לתבנית

אפשר להוסיף קוד QR לתבנית.

שלבים:

1. במנהל Shopify, יש לעבור אל אפליקציות > Order Printer.

2. יש ללחוץ על תבניות.

3. יש ללחוץ על התבנית שרוצים לערוך.

4. יש להוסיף את בלוק הקוד <s-barcode type="qrcode" value="" /> לתבנית.

5. יש להחליף את הערך `` בערך הטקסט של קוד ה-QR.

6. אופציונלי: כדי להציג את התבנית בתצוגה מקדימה, יש ללחוץ על תצוגה מקדימה.

7. יש ללחוץ על שמירה.

שימוש בגופן Google בתבנית

כדי להשתמש בגופן Google בתבנית, יש להדביק בה את הקוד הבא, ולאחר מכן להחליף את המשתנה FontName בשם של גופן ה-Google שלך:

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

הגדלת גודל הגופן

כדי להגדיל את גודל הגופן בתבנית, יש להדביק בה את הקוד הבא, ולאחר מכן לשנות את המספר 14 לערך גדול או קטן יותר:

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

כדי להגדיל את גודל הגופן של הכותרות בתבנית, יש להדביק בה את הקוד הבא, ולאחר מכן לשנות את הערכים שליד הכותרת:

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

אם ייבאת את התבניות מאפליקציית המורשת של Order Printer, אפשר להגדיל את גודל הגופן באמצעות בלוק הקוד הבא:

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