오더 프린터 앱 사용자 지정

Shopify Admin에서 주문 프린터 앱에 대해 최대 15개의 템플릿을 생성하고 사용자 지정할 수 있습니다. 주문 프린터 앱에는 기본적으로 다음 두 가지 템플릿이 포함되어 있습니다.

  • 인보이스 - 고객에게 보낼 수 있는 기본 인보이스
  • 패킹 슬립 - 상점 주소 및 고객의 배송 주소 인쇄물

새 주문 프린터 템플릿 생성

새 주문 프린터 템플릿을 생성하려면 HTML, CSS 및 Liquid에 익숙해야 합니다. Shopify 테마 지원에서는 Shopify 디자인 정책 범위 내에서 사소한 조정에 도움을 드립니다.

단계:

  1. Shopify 관리자에서 설정 > 앱 및 판매 채널로 이동합니다.

  2. 주문 프린터를 클릭하여 앱을 엽니다.

  3. 탬플릿 관리를 클릭합니다.

  4. 템플릿 추가를 클릭합니다.

  5. 이름 필드에 새 템플릿 이름을 입력합니다.

  6. 코드 필드에 HTML, CSS 또는 Liquid 코드를 추가하여 템플릿을 생성합니다.

  7. 작업을 마치면 저장을 클릭합니다.

주문 프린터 템플릿 편집

주문 프린터 템플릿을 편집하려면 HTML, CSS 및 Liquid에 익숙해야 합니다. Shopify 테마 지원에서는 Shopify 디자인 정책 범위 내에서 사소한 조정에 도움을 드립니다.

단계:

  1. Shopify 관리자에서 설정 > 앱 및 판매 채널로 이동합니다.

  2. 주문 프린터를 클릭하여 앱을 엽니다.

  3. 탬플릿 관리를 클릭합니다.

  4. 편집할 템플릿 이름을 클릭합니다.

  5. HTML, CSS 또는 Liquid 코드를 코드 필드에 추가하거나 편집하여 템플릿을 변경합니다. 템플릿 사용자 지정 예를 미리 보려면 예시 템플릿 사용자 지정을 참조하십시오.

  6. 작업을 마치면 저장을 클릭합니다.

예시 템플릿 사용자 지정

다음 예는 주문 프린터 템플릿을 사용자 지정하는 몇 가지 일반적인 방법을 설명합니다.

데스크톱
  1. Shopify 관리자에서 콘텐츠 > 파일로 이동합니다.

  2. 파일 업로드를 클릭한 다음 컴퓨터에서 이미지 파일을 선택합니다.

  3. 파일 페이지에서 업로드한 파일을 찾은 다음 URL 복사를 클릭합니다.

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

  5. 주문 프린터를 클릭하여 앱을 엽니다.

  6. 탬플릿 관리를 클릭합니다.

  7. 편집할 템플릿 이름을 클릭합니다.

  8. 로고를 표시할 위치에서 다음 코드 조각을 템플릿에 입력합니다. <img src="your-image-URL">

  9. your-image-URL을 복사한 이미지 URL로 교체합니다. 로고를 표시할 위치에 따라 이미지의 앞이나 뒤에 줄 바꿈을 추가하려면 <br/> 태그를 추가해야 할 수 있습니다.

iPhone
  1. Shopify 앱에서 버튼을 탭한 다음 설정을 탭합니다.
  2. 스토어 설정 섹션에서 파일을 탭합니다.
  3. 파일 업로드를 탭한 다음 컴퓨터에서 이미지 파일을 선택합니다.
  4. 파일 페이지에서 업로드한 파일을 찾은 다음 URL 복사를 탭합니다.
  5. Shopify 관리자에서 설정 > 앱 및 판매 채널을 탭합니다.
  6. Order Printer를 탭하여 앱을 엽니다.
  7. 템플릿 관리를 탭합니다.
  8. 편집할 템플릿 이름을 탭합니다.
  9. 로고를 표시할 위치에서 다음 코드 조각을 템플릿에 입력합니다. <img src="your-image-URL">
  10. your-image-URL을 복사한 이미지 URL로 교체합니다. 로고를 표시할 위치에 따라 이미지의 앞이나 뒤에 줄 바꿈을 추가하려면 <br/> 태그를 추가해야 할 수 있습니다.
Android
  1. Shopify 앱에서 버튼을 탭한 다음 설정을 탭합니다.
  2. 스토어 설정 섹션에서 파일을 탭합니다.
  3. 파일 업로드를 탭한 다음 컴퓨터에서 이미지 파일을 선택합니다.
  4. 파일 페이지에서 업로드한 파일을 찾은 다음 URL 복사를 탭합니다.
  5. Shopify 관리자에서 설정 > 앱 및 판매 채널을 탭합니다.
  6. Order Printer를 탭하여 앱을 엽니다.
  7. 템플릿 관리를 탭합니다.
  8. 편집할 템플릿 이름을 탭합니다.
  9. 로고를 표시할 위치에서 다음 코드 조각을 템플릿에 입력합니다. <img src="your-image-URL">
  10. your-image-URL을 복사한 이미지 URL로 교체합니다. 로고를 표시할 위치에 따라 이미지의 앞이나 뒤에 줄 바꿈을 추가하려면 <br/> 태그를 추가해야 할 수 있습니다.

이는 HTML에서 다음과 같이 보여야 합니다.

Example HTML code

예: 표 너비 100% 설정

표에 테두리를 만들고 100% 너비로 늘이려면 table-tabular 클래스를 표에 추가합니다.

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

예: 제품 썸네일 표시

제품 썸네일을 포함하려면 이 코드를 템플릿에 삽입합니다.

{{ line_item.product.featured_image | product_img_url: 'thumb' | img_tag }}

주문 세부 정보 추가

참고: 다음 사용자 지정에는 HTML 및 Liquid에 대한 지식이 필요합니다.

구매한 품목의 이름, 수량, 비용 등의 주문 세부 정보를 템플릿에 추가할 수 있습니다. 템플릿에 주문 세부 정보를 추가하려면 다음 단계를 수행합니다.

  1. Shopify 관리자에서 설정 > 앱 및 판매 채널로 이동합니다.

  2. 주문 프린터를 클릭하여 앱을 엽니다.

  3. 탬플릿 관리를 클릭합니다.

  4. 편집할 템플릿 이름을 클릭합니다.

  5. Liquid 변수를 사용하여 주문 세부 정보를 추가하고 HTML을 사용하여 형식을 추가합니다. 예를 들어, {{ line_item.price | money }}는 해당 품목의 가격을 인쇄합니다.

  6. 작업을 마치면 저장을 클릭합니다.

예를 들어, Nyla는 패킹 슬립 템플릿을 편집하여 배송 중인 품목의 목록을 포함하려고 합니다. 그녀는 주문 프린터 앱에서 Packing slip 템플릿 하단에 다음 코드를 추가합니다.

<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>

그 결과, 이제 Nyla의 패킹 슬립에는 구매한 품목을 나열한 표가 포함됩니다.

적절한 답변을 찾을 수 없습니까? 언제든지 도와드리겠습니다.