การสร้างและการปรับแต่งเทมเพลตของ 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. ในเครื่องมือแก้ไขโค้ด ให้วางบล็อกโค้ดต่อไปนี้:

liquid <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 ของคุณ ให้ไปที่การตั้งค่า > แอปและช่องทางการขาย

2. คลิก Order Printer

3. คลิก “เปิดแอป”

4. คลิก "เทมเพลต"

5. คลิก "ทมเพลต" ที่คุณต้องการแก้ไข

6. ในเครื่องมือแก้ไขโค้ด ให้หาตารางที่คุณต้องการแก้ไข จากนั้นเพิ่มระดับ table-tabular ลงในตารางของคุณ

7. ตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง

8. คลิกบันทึก

ตัวอย่าง:

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

แสดงรูปภาพขนาดย่อของสินค้า

คุณสามารถเพิ่มรูปภาพขนาดย่อของสินค้าไปยังเทมเพลตคำสั่งซื้อของคุณ คุณต้องแทรกบล็อกโค้ดแบบปรับแต่งเองลงในเทมเพลตของคุณ

ขั้นตอนมีดังนี้

1. ในส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่การตั้งค่า > แอปและช่องทางการขาย

2. คลิก Order Printer

3. คลิก “เปิดแอป”

4. คลิก "เทมเพลต"

5. คลิก "ทมเพลต" ที่คุณต้องการแก้ไข

6. เพิ่มบล็อกโค้ด liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} ลงในเทมเพลตของคุณ

7. ตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง

8. คลิกบันทึก

เพิ่มรายละเอียดคำสั่งซื้อ

คุณสามารถเพิ่มรายละเอียดคำสั่งซื้อไปยังเทมเพลตของคุณได้ เช่น ชื่อ จำนวน และราคาของสินค้าที่ซื้อ

ขั้นตอนมีดังนี้

1. ในส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่การตั้งค่า > แอปและช่องทางการขาย

2. คลิก Order Printer

3. คลิก “เปิดแอป”

4. คลิก "เทมเพลต"

5. คลิก "ทมเพลต" ที่คุณต้องการแก้ไข

6. ในตัวแก้ไขโค้ด ให้ใช้ตัวแปร Liquid เพื่อเพิ่มรายละเอียดคำสั่งซื้อ และใช้ HTML เพื่อเพิ่มการจัดรูปแบบ ตัวอย่างเช่น การใช้รหัส {{ line_item.price | money }} จะแสดงราคาของสินค้า

7. ตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง

8. คลิกบันทึก

ตัวอย่าง:

Nyla ต้องการแก้ไขเทมเพลตบันทึกการจัดส่งของเธอเพื่อให้ระบุรายการสินค้าที่กำลังได้รับการจัดส่ง เธอเพิ่มโค้ดต่อไปนี้ไปยังด้านล่างของเทมเพลตบันทึกการจัดส่งของเธอในแอป Shopify Order Printer: ด้วยเหตุนั้นเอง บันทึกการจัดส่งของ Nyla ในขณะนี้จะมีตารางที่แสดงรายการสินค้าที่ซื้อไปแล้วอยู่

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

เพิ่มบาร์โค้ดลงในเทมเพลต

คุณสามารถเพิ่มบาร์โค้ดลงในเทมเพลตของคุณได้

ขั้นตอนมีดังนี้

1. ในส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่การตั้งค่า > แอปและช่องทางการขาย

2. คลิก Order Printer

3. คลิก “เปิดแอป”

4. คลิก "เทมเพลต"

5. คลิก "ทมเพลต" ที่คุณต้องการแก้ไข

6. เพิ่มบล็อกโค้ด <s-barcode value="a" /> ลงในเทมเพลตของคุณ

7. แทนที่ค่า `` ด้วยข้อความค่าของบาร์โค้ดของคุณ

8. ตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง

9. คลิกบันทึก

เพิ่มคิวอาร์โค้ดลงในเทมเพลต

คุณสามารถเพิ่มคิวอาร์โค้ดลงในเทมเพลตของคุณได้

ขั้นตอนมีดังนี้

1. ในส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่การตั้งค่า > แอปและช่องทางการขาย

2. คลิก Order Printer

3. คลิก “เปิดแอป”

4. คลิก "เทมเพลต"

5. คลิก "ทมเพลต" ที่คุณต้องการแก้ไข

6. เพิ่มบล็อกโค้ด <s-barcode type="qrcode" value="" /> ลงในเทมเพลตของคุณ

7. แทนที่ค่า `` ด้วยข้อความค่าของคิวอาร์โค้ดของคุณ

8. ตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง

9. คลิกบันทึก

การใช้แบบอักษรของ 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>