Shopify Order Printer를 사용하여 템플릿 사용자 지정하기

다양한 방식으로 템플릿을 사용자 지정하고 나만의 템플릿을 생성할 수 있습니다. Shopify Order Printer 앱은 HTML, CSS 및 Liquid 변수로 제작된 템플릿을 지원합니다. 템플릿을 사용자 지정하기 전에 지원되는 모든 템플릿 사용자 지정에 대한 Shopify Order Printer의 Liquid 변수 및 필터 참조와 익숙해지도록 하세요.

다음 예제를 검토하여 Shopify Order Printer 템플릿을 사용자 지정하는 방법을 알아보세요.

템플릿에 로고를 추가할 수 있습니다.

단계:

  1. Shopify Admin에서 콘텐츠 > 파일로 이동합니다.
  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 Admin에서 콘텐츠 > 파일로 이동합니다.
  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. 저장을 클릭합니다.

템플릿에 QR 코드 추가

템플릿에 QR 코드를 추가할 수 있습니다.

단계:

  1. Shopify 관리자에서 설정 > 앱 및 판매 채널을 클릭합니다.
  2. Order Printer을(를) 클릭합니다.
  3. 앱 열기 를 클릭합니다.

  4. 템플릿을 클릭합니다.

  5. 편집할 템플릿을 클릭합니다.

  6. 템플릿에 <s-barcode type="qrcode" value="" /> 코드 블록을 추가합니다.

  7. `` 값을 QR 코드의 텍스트 값으로 교체합니다.

  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>

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험