การปรับแต่งเทมเพลตโดยใช้ Shopify Order Printer
คุณสามารถปรับแต่งเทมเพลตของคุณได้หลายวิธีและสร้างเทมเพลตของคุณเอง แอป Shopify Order Printer รองรับเทมเพลตที่สร้างโดยใช้ตัวแปร HTML, CSS และ Liquid ก่อนที่คุณจะปรับแต่งเทมเพลตของคุณ ตรวจสอบให้แน่ใจว่าคุณได้คุ้นเคยกับตัวแปร Liquid และข้อมูลอ้างอิงตัวกรองของ Shopify Order Printer สำหรับการปรับแต่งเทมเพลตที่รองรับทั้งหมด
ตรวจสอบตัวอย่างต่อไปนี้เพื่อเรียนรู้วิธีที่คุณสามารถใช้เทมเพลตของ Shopify Order Printer:
ในหน้านี้
เพิ่มโลโก้ของคุณไปยังเทมเพลต
คุณสามารถเพิ่มโลโก้ของคุณไปยังเทมเพลตได้
ขั้นตอน:
- จากส่วนผู้ดูแล Shopify ให้ไปที่เนื้อหา > ไฟล์
- คลิก “อัปโหลดไฟล์” จากนั้นจึงเลือกรูปภาพของไฟล์ที่คุณต้องการอัปโหลด
- หากต้องการคัดลอก URL ของรูปภาพโลโก้ของคุณ ให้คลิกที่ไอคอนลิงก์
- คลิกที่ การตั้งค่า > แอปและช่องทางการขาย
- คลิก "Order Printer"
- คลิก "เทมเพลต"
- คลิกชื่อของเทมเพลตที่คุณต้องการแก้ไข
- ในเครื่องมือแก้ไขโค้ด ให้วางบล็อกโค้ดต่อไปนี้:
liquid
<div style="text-align: center;">
<img style="width: 4em;" src="YOUR_IMAGE_URL_HERE">
</div>
- แทนที่โค้ด
YOUR_IMAGE_URL_HEREด้วย URL รูปภาพของคุณ - ทางเลือก: หากต้องการจัดแนวโลโก้ของคุณ ให้เปลี่ยนค่า
text-alignเป็นleft,rightหรือcenter - ทางเลือก: หากต้องการปรับความกว้างโลโก้ของคุณ ให้เปลี่ยนค่า
widthเป็นค่าที่มากขึ้นหรือน้อยลง เช่น8emหรือ2em - ตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง
- คลิกบันทึก
ตัวอย่าง:
ตรวจสอบตัวอย่างต่อไปนี้ว่า HTML ของคุณควรแสดงผลอย่างไรหลังจากที่คุณเพิ่มโลโก้ไปยังเทมเพลตของคุณ:
เพิ่มรูปภาพลงในเทมเพลต
คุณสามารถเพิ่มรูปภาพลงในเทมเพลตได้
ขั้นตอน:
- จากส่วนผู้ดูแล Shopify ให้ไปที่เนื้อหา > ไฟล์
- คลิก “อัปโหลดไฟล์” จากนั้นจึงเลือกรูปภาพของไฟล์ที่คุณต้องการอัปโหลด
- หากต้องการคัดลอก URL ของรูปภาพของคุณ ให้คลิกที่ไอคอน ลิงก์
- คลิกที่ การตั้งค่า > แอปและช่องทางการขาย
- คลิก "Order Printer"
- คลิก "เทมเพลต"
- คลิกชื่อของเทมเพลตที่คุณต้องการแก้ไข
- ในเครื่องมือแก้ไขโค้ด ให้วางบล็อกโค้ด
<img src=”Image Source” /> - แทนที่โค้ด
Image Sourceด้วย URL รูปภาพของคุณ - คลิกบันทึก
ทำให้ตารางกว้าง 100%
คุณสามารถเพิ่มเส้นขอบในตารางและยืดความกว้างได้ 100% คุณต้องเพิ่มระดับ table-tabular ลงในตารางของคุณ
ขั้นตอน:
- จากส่วนผู้ดูแล Shopify ให้คลิกการตั้งค่า > แอปและช่องทางการขาย
- คลิก Order Printer
คลิก “เปิดแอป”
คลิก "เทมเพลต"
คลิก "ทมเพลต" ที่คุณต้องการแก้ไข
ในเครื่องมือแก้ไขโค้ด ให้หาตารางที่คุณต้องการแก้ไข จากนั้นเพิ่มระดับ
table-tabularลงในตารางของคุณตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง
คลิกบันทึก
ตัวอย่าง:
<table class="table-tabular">
...
</table>แสดงรูปภาพขนาดย่อของสินค้า
คุณสามารถเพิ่มรูปภาพขนาดย่อของสินค้าไปยังเทมเพลตคำสั่งซื้อของคุณ คุณต้องแทรกบล็อกโค้ดแบบปรับแต่งเองลงในเทมเพลตของคุณ
ขั้นตอน:
- จากส่วนผู้ดูแล Shopify ให้คลิกการตั้งค่า > แอปและช่องทางการขาย
- คลิก Order Printer
คลิก “เปิดแอป”
คลิก "เทมเพลต"
คลิก "ทมเพลต" ที่คุณต้องการแก้ไข
เพิ่มบล็อกโค้ด
liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}ลงในเทมเพลตของคุณตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง
คลิกบันทึก
เพิ่มรายละเอียดคำสั่งซื้อ
คุณสามารถเพิ่มรายละเอียดคำสั่งซื้อไปยังเทมเพลตของคุณได้ เช่น ชื่อ จำนวน และราคาของสินค้าที่ซื้อ
ขั้นตอน:
- จากส่วนผู้ดูแล Shopify ให้คลิกการตั้งค่า > แอปและช่องทางการขาย
- คลิก Order Printer
คลิก “เปิดแอป”
คลิก "เทมเพลต"
คลิก "ทมเพลต" ที่คุณต้องการแก้ไข
ในตัวแก้ไขโค้ด ให้ใช้ตัวแปร Liquid เพื่อเพิ่มรายละเอียดคำสั่งซื้อ และใช้ HTML เพื่อเพิ่มการจัดรูปแบบ ตัวอย่างเช่น การใช้รหัส
{{ line_item.price | money }}จะแสดงราคาของสินค้าตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง
คลิกบันทึก
ตัวอย่าง:
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>
เพิ่มบาร์โค้ดลงในเทมเพลต
คุณสามารถเพิ่มบาร์โค้ดลงในเทมเพลตของคุณได้
ขั้นตอน:
- จากส่วนผู้ดูแล Shopify ให้คลิกการตั้งค่า > แอปและช่องทางการขาย
- คลิก Order Printer
คลิก “เปิดแอป”
คลิก "เทมเพลต"
คลิก "ทมเพลต" ที่คุณต้องการแก้ไข
เพิ่มบล็อกโค้ด
<s-barcode value="a" />ลงในเทมเพลตของคุณแทนที่ค่า `` ด้วยข้อความค่าของบาร์โค้ดของคุณ
ตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง
คลิกบันทึก
เพิ่มคิวอาร์โค้ดลงในเทมเพลต
คุณสามารถเพิ่มคิวอาร์โค้ดลงในเทมเพลตของคุณได้
ขั้นตอน:
- จากส่วนผู้ดูแล Shopify ให้คลิกการตั้งค่า > แอปและช่องทางการขาย
- คลิก Order Printer
คลิก “เปิดแอป”
คลิก "เทมเพลต"
คลิก "ทมเพลต" ที่คุณต้องการแก้ไข
เพิ่มบล็อกโค้ด
<s-barcode type="qrcode" value="" />ลงในเทมเพลตของคุณแทนที่ค่า `` ด้วยข้อความค่าของคิวอาร์โค้ดของคุณ
ตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง
คลิกบันทึก
การใช้แบบอักษรของ 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>