Shopify Order Printer 템플릿 생성 및 맞춤 설정
다양한 방법으로 템플릿을 맞춤 설정하고 자신만의 템플릿을 생성할 수 있습니다. Shopify Order Printer 앱은 HTML, CSS 및 Liquid 변수로 만든 템플릿을 지원합니다. 템플릿을 맞춤 설정하기 전에 지원되는 모든 템플릿 맞춤 설정에 대한 Shopify Order Printer용 Liquid 변수 및 필터 참조를 숙지하십시오.
다음 예시를 검토하여 Shopify Order Printer 템플릿을 맞춤 설정하는 방법을 알아보십시오.
이 페이지의 내용
템플릿에 로고 추가
템플릿에 로고를 추가할 수 있습니다.
단계:
Shopify 관리자에서 콘텐츠 > 파일로 이동합니다.
파일 업로드를 클릭한 다음 업로드할 이미지 파일을 선택합니다.
로고 이미지의 URL을 복사하려면 **링크** 아이콘을 클릭합니다.
**설정** > **앱**을 클릭합니다.
**Order Printer**를 클릭합니다.
**템플릿**을 클릭합니다.
편집할 템플릿의 이름을 클릭합니다.
코드 편집기에 다음 코드 블록을 붙여넣습니다.
<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 관리자에서 콘텐츠 > 파일로 이동합니다.
파일 업로드를 클릭한 다음 업로드할 이미지 파일을 선택합니다.
이미지의 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**로 이동합니다.
**템플릿**을 클릭합니다.
편집할 템플릿을 클릭합니다.
템플릿에 `{{ 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의 패킹 슬립에는 이제 구매한 품목을 나열하는 표가 포함됩니다.
<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>템플릿에 바코드 추가
템플릿에 바코드를 추가할 수 있습니다.
단계:
Shopify 관리자에서 **앱** > **Order Printer**로 이동합니다.
**템플릿**을 클릭합니다.
편집할 템플릿을 클릭합니다.
템플릿에 `<s-barcode value="a" />` 코드 블록을 추가합니다.
`value` 속성의 값을 바코드 텍스트 값으로 바꾸세요.
선택 사항: 템플릿을 미리 보려면 **미리 보기**를 클릭합니다.
**저장**을 클릭합니다.
템플릿에 QR 코드 추가
템플릿에 QR 코드를 추가할 수 있습니다.
단계:
Shopify 관리자에서 **앱** > **Order Printer**로 이동합니다.
**템플릿**을 클릭합니다.
편집할 템플릿을 클릭합니다.
템플릿에 `<s-barcode type="qrcode" value="" />` 코드 블록을 추가합니다.
`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>