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

<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. คลิกบันทึก

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

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

ขั้นตอน:

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่แอป > Order Printer

2. คลิกเทมเพลต

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

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

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

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>