Shopify Order Printer 템플릿 생성 및 사용자 지정하기
다양한 방식으로 템플릿을 사용자 지정하고 나만의 템플릿을 생성할 수 있습니다. Shopify Order Printer 앱은 HTML, CSS 및 Liquid 변수로 제작된 템플릿을 지원합니다. 템플릿을 사용자 지정하기 전에 지원되는 모든 템플릿 사용자 지정에 대한 Shopify Order Printer의 Liquid 변수 및 필터 참조와 익숙해지도록 하세요.
다음 예제를 검토하여 Shopify Order Printer 템플릿을 사용자 지정하는 방법을 알아보세요.
이 페이지의 정보
템플릿에 로고 추가
템플릿에 로고를 추가할 수 있습니다.
단계:
Shopify 관리자에서 콘텐츠 > 파일로 이동합니다.
파일 업로드를 클릭한 다음 업로드할 이미지 파일을 선택합니다.
로고 이미지의 URL을 복사하려면 링크 아이콘을 클릭합니다.
설정 > 앱 및 판매 채널을 클릭합니다.
Order Printer를 클릭합니다.
템플릿을 클릭합니다.
편집할 템플릿 이름을 클릭합니다.
코드 편집기에서 다음 코드 블록을 붙여넣습니다.
`liquid
- 코드의
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
Quantity | Item | {% if tax_lines.size > 0 %}Taxes | {% endif %}Price |
---|---|---|---|
{{ line_item.quantity }} x | {{ line_item.title }} | {% if line_item.tax_lines %}
{% for tax_line in line_item.tax_lines %}
{{ tax_line.price | money }} {{ tax_line.title }} {% endfor %} |
{% endif %}
{{ line_item.price | money }} |
템플릿에 바코드 추가
템플릿에 바코드를 추가할 수 있습니다.
단계:
Shopify 관리자에서 설정 > 앱 및 판매 채널로 이동합니다.
Order Printer을(를) 클릭합니다.
앱 열기 를 클릭합니다.
템플릿을 클릭합니다.
편집할 템플릿을 클릭합니다.
템플릿에
<s-barcode value="a" />
코드 블록을 추가합니다.`` 값을 바코드의 텍스트 값으로 교체합니다.
선택 사항: 템플릿을 미리 보려면 미리 보기를 클릭합니다.
저장을 클릭합니다.
템플릿에 QR 코드 추가
템플릿에 QR 코드를 추가할 수 있습니다.
단계:
Shopify 관리자에서 설정 > 앱 및 판매 채널로 이동합니다.
Order Printer을(를) 클릭합니다.
앱 열기 를 클릭합니다.
템플릿을 클릭합니다.
편집할 템플릿을 클릭합니다.
템플릿에
<s-barcode type="qrcode" value="" />
코드 블록을 추가합니다.`` 값을 QR 코드의 텍스트 값으로 교체합니다.
선택 사항: 템플릿을 미리 보려면 미리 보기를 클릭합니다.
저장을 클릭합니다.
템플릿에서 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>