การปรับแต่งเทมเพลต Order Printer

คุณสามารถสร้างและปรับแต่งเทมเพลตได้สูงสุด 15 เทมเพลตสำหรับแอป Order Printer ในส่วน Shopify admin ของคุณ ตามค่าเริ่มต้นแอป Order Printer จะมีเทมเพลตสองชนิด:

  • ใบแจ้งหนี้ - ใบแจ้งหนี้พื้นฐานที่คุณสามารถส่งให้แก่ลูกค้าได้
  • บันทึกการจัดส่ง - สิ่งพิมพ์ระบุที่อยู่ร้านค้าของคุณและที่อยู่สำหรับการจัดส่งของลูกค้า

สร้างเทมเพลต Order Printer ใหม่

ในการสร้างเทมเพลตใหม่ของ Order Printer คุณต้องคุ้นเคยกับการใช้ HTML, CSS และ Liquid ฝ่ายช่วยเหลือด้านธีมของ Shopify สามารถช่วยในการเปลี่ยนแปลงเล็กน้อยภายในขอบเขตของนโยบายการออกแบบของ Shopify

ขั้นตอน:

  1. จากส่วน Shopify admin ให้ไปที่ แอป

  2. คลิก Order Printer เพื่อเปิดแอป

  3. คลิกจัดการเทมเพลต:

    ปุ่มจัดการเทมเพลต

  4. คลิกเพิ่มเทมเพลต:

    คลิก 'เพิ่มเทมเพลต'

  5. ป้อนชื่อเทมเพลตใหม่ของคุณในช่องชื่อ

  6. เพิ่มรหัส HTML, CSS หรือรหัส Liquid ในช่องรหัสเพื่อสร้างเทมเพลตของคุณ

  7. เมื่อเสร็จแล้ว ให้คลิกที่บันทึก

แก้ไขเทมเพลตของ Order Printer

ในการแก้ไขเทมเพลตของ Order Printer คุณต้องคุ้นเคยกับการใช้ HTML, CSS และ Liquid ฝ่ายช่วยเหลือด้านธีมของ Shopify สามารถช่วยในการเปลี่ยนแปลงเล็กน้อยภายในขอบเขตของนโยบายการออกแบบของ Shopify

ขั้นตอน:

  1. จากส่วน Shopify admin ให้ไปที่ แอป

  2. คลิก Order Printer เพื่อเปิดแอป

  3. คลิกจัดการเทมเพลต:

    ปุ่มจัดการเทมเพลต

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

    เลือกเทมเพลตเพื่อแก้ไข

  5. ทำการเปลี่ยนแปลงเทมเพลตโดยการเพิ่มหรือแก้ไข HTML CSS หรือโค้ด Liquid ในช่องโค้ด หากต้องการดูตัวอย่างการปรับแต่งเทมเพลตให้ดูตัวอย่างการปรับแต่งเทมเพลต

  6. เมื่อเสร็จแล้ว ให้คลิกที่บันทึก

ตัวอย่างการปรับแต่งเทมเพลต

ตัวอย่างต่อไปนี้แสดงวิธีที่พบโดยทั่วไปในการปรับแต่งเทมเพลตของ Order Printer:

  • เพิ่มโลโก้ของคุณไปยังเทมเพลตของ Order Printer
  • ทำให้ความกว้างตาราง 100%
  • แสดงรูปภาพขนาดย่อของสินค้า
  • เพิ่มรายละเอียดคำสั่งซื้อ

ตัวอย่าง: เพิ่มโลโก้ของคุณไปยังเทมเพลตของ Order Printer

หมายเหตุ: การปรับแต่งต่อไปนี้จำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับ HTML

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

  1. คลิกอัปโหลดไฟล์และเลือกไฟล์รูปภาพบนคอมพิวเตอร์ของคุณ

  2. ในหน้าไฟล์ให้คลิกที่ URL รูปภาพเพื่อไฮไลต์จากนั้นคัดลอกข้อความ:

    คัดลอก URL รูปภาพ

  3. จากส่วน Shopify admin ให้ไปที่ แอป

  4. คลิก Order Printer เพื่อเปิดแอป

  5. คลิกจัดการเทมเพลต:

    ปุ่มจัดการเทมเพลต

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

    เลือกเทมเพลตเพื่อแก้ไข

  7. ป้อนส่วนย่อยของโค้ดต่อไปนี้ไปยังเทมเพลตของคุณที่คุณต้องการให้โลโก้ปรากฏ:<img src="your-image-URL">.

  8. แทนที่ your-image-URL ด้วย URL รูปภาพที่คุณคัดลอก คุณอาจต้องเพิ่มแท็ก <br/> เพื่อเพิ่มตัวแบ่งบรรทัดก่อนหรือหลังรูปภาพของคุณทั้งนี้ขึ้นอยู่กับตำแหน่งที่คุณต้องการให้โลโก้ของคุณปรากฏ

ควรมีลักษณะเช่นนี้ใน HTML:

ตัวอย่างโค้ด HTML

และเช่นนี้ในใบแจ้งหนี้ของคุณ:

ตัวอย่างเทมเพลตอีเมลที่กำหนดเอง

ตัวอย่าง: สร้างตารางที่มีความกว้าง 100%

หากต้องการทำให้ตารางของคุณมีเส้นขอบและความกว้างถึง 100% ให้เพิ่มระดับชั้น table-tabular ลงในตารางของคุณ:

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

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

หากต้องการใส่รูปภาพขนาดย่อของสินค้าให้ใส่รหัสนี้เข้าไปในเทมเพลตของคุณ:

{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}

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

หมายเหตุ: การปรับแต่งต่อไปนี้จำเป็นต้องมีความรู้เกี่ยวกับ HTML และ Liquid

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

  1. จากส่วน Shopify admin ให้ไปที่ แอป

  2. คลิก Order Printer เพื่อเปิดแอป

  3. คลิกจัดการเทมเพลต:

    ปุ่มจัดการเทมเพลต

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

    เลือกเทมเพลตเพื่อแก้ไข

  5. ใช้ตัวแปร Liquid เพื่อเพิ่มรายละเอียดคำสั่งซื้อและ HTML เพื่อเพิ่มการจัดรูปแบบ ตัวอย่างเช่น `` พิมพ์ราคาของสินค้า

  6. เมื่อเสร็จแล้ว ให้คลิกที่บันทึก

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

<br>
<br>
<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      {% if show_line_item_taxes %}
      <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>

ในขณะนี้บันทึกการจัดส่งของ Nyla จะมีตารางที่แสดงรายการสินค้าที่ซื้อ:

ตัวอย่างบันทึกการจัดส่ง

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี