Shopify Order Printer를 사용하여 템플릿 사용자 지정하기
다양한 방식으로 템플릿을 사용자 지정하고 나만의 템플릿을 생성할 수 있습니다. Shopify Order Printer 앱은 HTML, CSS 및 Liquid 변수로 제작된 템플릿을 지원합니다. 템플릿을 사용자 지정하기 전에 지원되는 모든 템플릿 사용자 지정에 대한 Shopify Order Printer의 Liquid 변수 및 필터 참조와 익숙해지도록 하세요.
다음 예제를 검토하여 Shopify Order Printer 템플릿을 사용자 지정하는 방법을 알아보세요.
이 페이지의 정보
템플릿에 로고 추가
템플릿에 로고를 추가할 수 있습니다.
단계:
- Shopify Admin에서 콘텐츠 > 파일로 이동합니다.
- 파일 업로드를 클릭한 다음 업로드할 이미지 파일을 선택합니다.
- 로고 이미지의 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 Admin에서 콘텐츠 > 파일로 이동합니다.
- 파일 업로드를 클릭한 다음 업로드할 이미지 파일을 선택합니다.
- 이미지의 URL을 복사하려면 링크 아이콘을 클릭합니다.
- 설정 > 앱 및 판매 채널을 클릭합니다.
- Order Printer를 클릭합니다.
- 템플릿을 클릭합니다.
- 편집할 템플릿 이름을 클릭합니다.
- 코드 편집기에서
<img src=”Image Source” />코드 블록을 붙여넣습니다. - 코드의
Image Source을 이미지 URL로 교체합니다. - 저장을 클릭합니다.
표 너비 100% 설정
표에 테두리를 추가하고 100% 너비로 늘릴 수 있습니다. table-tabular 클래스를 표에 추가해야 합니다.
단계:
Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.
앱 및 판매 채널 페이지에서 Order Printer을(를) 클릭합니다.
앱 열기 를 클릭합니다.
템플릿을 클릭합니다.
편집할 템플릿을 클릭합니다.
코드 편집기에서 편집할 표를 찾은 다음
table-tabular클래스를 표에 추가합니다.선택 사항: 템플릿을 미리 보려면 미리 보기를 클릭합니다.
저장을 클릭합니다.
예:
<table class="table-tabular">
...
</table>제품 썸네일 표시
주문 템플릿에 제품 썸네일을 추가할 수 있습니다. 사용자 지정 코드 블록을 템플릿에 삽입해야 합니다.
단계:
Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.
앱 및 판매 채널 페이지에서 Order Printer을(를) 클릭합니다.
앱 열기 를 클릭합니다.
템플릿을 클릭합니다.
편집할 템플릿을 클릭합니다.
템플릿에
liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}코드 블록을 추가합니다.선택 사항: 템플릿을 미리 보려면 미리 보기를 클릭합니다.
저장을 클릭합니다.
주문 세부 정보 추가
구매한 품목의 이름, 수량, 가격 등의 주문 세부 정보를 템플릿에 추가할 수 있습니다.
단계:
Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.
앱 및 판매 채널 페이지에서 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 Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.
앱 및 판매 채널 페이지에서 Order Printer을(를) 클릭합니다.
앱 열기 를 클릭합니다.
템플릿을 클릭합니다.
편집할 템플릿을 클릭합니다.
템플릿에
<s-barcode value="a" />코드 블록을 추가합니다.`` 값을 바코드의 텍스트 값으로 교체합니다.
선택 사항: 템플릿을 미리 보려면 미리 보기를 클릭합니다.
저장을 클릭합니다.
템플릿에 QR 코드 추가
템플릿에 QR 코드를 추가할 수 있습니다.
단계:
Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.
앱 및 판매 채널 페이지에서 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>