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

{% if tax_lines.size > 0 %} {% endif %} {% for line_item in line_items %} {% if line_item.tax_lines %} {% endif %} {% endfor %}

Quantity	Item	Taxes	Price
{{ line_item.quantity }} x	{{ line_item.title }}	{% for tax_line in line_item.tax_lines %} {{ tax_line.price \| money }} {{ tax_line.title }} {% endfor %}	{{ 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>