المساعدة
تسجيل الدخول

إنشاء وتخصيص قوالب 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. انقر على حفظ.

مثال:

تريد Nyla تعديل قالب قسيمة التعبئة الخاص بها ليتضمن قائمة بالعناصر التي يتم شحنها. أضافت التعليمات البرمجية التالية إلى أسفل قالب قسيمة التعبئة في تطبيق Shopify Order Printer. ونتيجة لذلك، أصبحت قسائم تعبئة Nyla الآن تتضمن جدولاً يسرد العناصر المشتراة.

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