การสร้างและการปรับแต่งเทมเพลตของ 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
ลงในตารางของคุณตัวเลือกเสริม: หากต้องการดูตัวอย่างเทมเพลตของคุณ ให้คลิกดูตัวอย่าง
คลิกบันทึก
ตัวอย่าง:
แสดงรูปภาพขนาดย่อของสินค้า
คุณสามารถเพิ่มรูปภาพขนาดย่อของสินค้าไปยังเทมเพลตคำสั่งซื้อของคุณ คุณต้องแทรกบล็อกโค้ดแบบปรับแต่งเองลงในเทมเพลตของคุณ
ขั้นตอนมีดังนี้
ในส่วนผู้ดูแล 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 ของคุณ:
การเพิ่มขนาดแบบอักษร
หากต้องการเพิ่มขนาดแบบอักษรในเทมเพลตของคุณ ให้วางโค้ดต่อไปนี้ลงในเทมเพลตของคุณ จากนั้นปรับตัวเลข 14
ให้มีค่าที่มากขึ้นหรือน้อยลง:
หากต้องการเพิ่มขนาดแบบอักษรของส่วนหัวในเทมเพลต ให้วางโค้ดต่อไปนี้ลงในเทมเพลตของคุณ จากนั้นปรับค่าที่อยู่ถัดจากหัวเรื่อง:
หากคุณนําเข้าเทมเพลตจากแอป Order Printer เดิม คุณจะสามารถเพิ่มขนาดแบบอักษรได้โดยใช้บล็อกโค้ดต่อไปนี้: