Shopify Order Printer टेम्पलेट बनाना और कस्टमाइज़ करना

आप अपने टेम्पलेट को कई तरीकों से कस्टमाइज़ कर सकते हैं और अपने खुद के टेम्पलेट बना सकते हैं। Shopify Order Printer ऐप HTML, CSS और लिक्विड वैरिएबल से बने टेम्पलेट को सपोर्ट करता है। अपने टेम्पलेट को कस्टमाइज़ करने से पहले, सभी सपोर्टेड टेम्पलेट कस्टमाइज़ेशन के लिए 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. कोड एडिटर में, ऑर्डर विवरण जोड़ने के लिए लिक्विड वैरिएबल और फ़ॉर्मेटिंग जोड़ने के लिए 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. value के मान को अपने बारकोड के टेक्स्ट मान से बदलें।

6. वैकल्पिक: अपने टेम्पलेट का प्रीव्यू देखने के लिए, प्रीव्यू पर क्लिक करें।

7. सेव करें पर क्लिक करें.

टेम्पलेट में क्यूआर कोड जोड़ना

आप अपने टेम्पलेट में क्यूआर कोड जोड़ सकते हैं।

चरण:

1. अपने Shopify एडमिन से, ऐप > Order Printer पर जाएं.

2. टेम्पलेट पर क्लिक करें.

3. उस टेम्पलेट पर क्लिक करें जिसे आप एडिट करना चाहते हैं।

4. अपने टेम्पलेट में <s-barcode type="qrcode" value="" /> कोड ब्लॉक जोड़ें।

5. value के मान को अपने क्यूआर कोड के टेक्स्ट मान से बदलें।

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>