Shopify Order Printer ٹیمپلیٹس بنانا اور کسٹمائز کرنا

آپ اپنے ٹیمپلیٹس کو کئی طریقوں سے کسٹمائز کر سکتے ہیں اور اپنے خود کے ٹیمپلیٹس بنا سکتے ہیں۔ Shopify Order Printer ایپ HTML، CSS، اور Liquid ویری ایبلز سے بنے ٹیمپلیٹس کو سپورٹ کرتی ہے۔ اپنے ٹیمپلیٹس کسٹمائز کرنے سے پہلے، یقینی بنائیں کہ آپ تمام تعاون یافتہ ٹیمپلیٹ کسٹمائزیشنز کے لیے Shopify Order Printer کے لیے Liquid ویری ایبلز اور فلٹرز کے حوالے سے واقف ہیں۔

یہ جاننے کے لیے کہ آپ 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>