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

Shopify 관리자에서 Shopify Order Printer 앱을 사용하여 템플릿을 생성하고 사용자 지정할 수 있습니다. Shopify Order Printer 앱에는 기본적으로 다음 템플릿이 포함되어 있습니다.

  • 인보이스: 고객에게 보낼 수 있는 인보이스
  • 패킹 슬립 - 스토어의 주소 및 고객의 배송 주소 인쇄물

Liquid를 사용하여 쿠폰, 레이블 또는 영수증과 같은 다른 패키지 삽입물에 대한 자체 사용자 지정 템플릿을 생성할 수 있습니다.

Shopify Order Printer 앱에서 템플릿 생성 시 고려 사항

Shopify Order Printer 앱에서 템플릿을 생성하기 전에 다음 고려 사항을 검토하세요.

  • Shopify Order Printer 앱에서 템플릿을 생성하거나 편집하려면 HTML, CSS 및 Liquid에 익숙해야 합니다. Shopify 테마 지원에서는 Shopify 디자인 정책 범위 내에서 사소한 조정에 도움을 드립니다.
  • 템플릿은 최대 15개까지 생성할 수 있습니다.
  • 지원되는 모든 템플릿 사용자 지정은 Shopify Order Printer의 Liquid 변수 및 필터 참조를 검토하세요.

템플릿 생성

주문서의 새 템플릿을 생성할 수 있습니다.

단계:

  1. Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.

  2. 앱 및 판매 채널 페이지에서 Order Printer을(를) 클릭합니다.

  3. 앱 열기 를 클릭합니다.

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

  5. 템플릿 생성을 클릭합니다.

  6. 이름 필드에 레이블이나 쿠폰과 같은 템플릿의 이름을 입력합니다.

  7. 코드 편집 섹션에서 HTML, CSS 또는 Liquid 코드를 추가하여 템플릿을 생성합니다.

  8. 선택 사항: 템플릿을 미리 보려면 미리 보기를 클릭합니다.

  9. 저장을 클릭합니다.

템플릿 편집

기존 템플릿을 편집할 수 있습니다. 템플릿 사용자 지정에 대한 자세한 내용은 템플릿 사용자 지정 예시를 참조하세요.

단계:

  1. Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.

  2. 앱 및 판매 채널 페이지에서 Order Printer을(를) 클릭합니다.

  3. 앱 열기 를 클릭합니다.

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

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

  6. 코드 편집 섹션에서 HTML, CSS 또는 Liquid 코드를 추가하거나 편집합니다.

  7. 선택 사항: 템플릿을 미리 보려면 미리 보기를 클릭합니다.

  8. 저장을 클릭합니다.

템플릿 사용자 지정 예시

다음 예제를 검토하여 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 표시 방법에 대한 다음 예제를 검토합니다.

템플릿에 로고를 추가하는 방법에 대한 코드 블록을 표시하는 예제

표 너비 100% 설정

표에 테두리를 추가하고 100% 너비로 늘릴 수 있습니다. table-tabular 클래스를 표에 추가해야 합니다.

단계:

  1. Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.

  2. 앱 및 판매 채널 페이지에서 Order Printer을(를) 클릭합니다.

  3. 앱 열기 를 클릭합니다.

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

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

  6. 코드 편집기에서 편집할 표를 찾은 다음 table-tabular 클래스를 표에 추가합니다.

  7. 선택 사항: 템플릿을 미리 보려면 미리 보기를 클릭합니다.

  8. 저장을 클릭합니다.

예:

<table class="table-tabular">
    ...
</table>

제품 썸네일 표시

주문 템플릿에 제품 썸네일을 추가할 수 있습니다. 사용자 지정 코드 블록을 템플릿에 삽입해야 합니다.

단계:

  1. Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.

  2. 앱 및 판매 채널 페이지에서 Order Printer을(를) 클릭합니다.

  3. 앱 열기 를 클릭합니다.

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

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

  6. 템플릿에 liquid {{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }} 코드 블록을 추가합니다.

  7. 선택 사항: 템플릿을 미리 보려면 미리 보기를 클릭합니다.

  8. 저장을 클릭합니다.

주문 세부 정보 추가

구매한 품목의 이름, 수량, 가격 등의 주문 세부 정보를 템플릿에 추가할 수 있습니다.

단계:

  1. Shopify Admin에서 설정 > 앱 및 판매 채널을 클릭합니다.

  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>

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

무료 체험