도움말
로그인

Order Printer 템플릿 맞춤 설정

Shopify 관리자에서 Order Printer 앱에 대한 템플릿을 최대 15개까지 생성하고 맞춤 설정할 수 있습니다. 기본적으로 Order Printer 앱에는 다음 두 가지 템플릿이 포함됩니다.

  • 인보이스 - 고객에게 보낼 수 있는 기본 인보이스입니다.
  • 패킹 슬립 - 스토어 주소 및 고객 배송 주소가 인쇄된 문서입니다.

이 페이지의 내용

새 Order Printer 템플릿 생성

새 Order Printer 템플릿을 생성하려면 HTML, CSS 및 Liquid에 익숙해야 합니다. Shopify 테마 지원팀은 Shopify 디자인 정책 범위 내에서 무료 Shopify 테마의 간단한 조정을 도와드릴 수 있습니다. 더 복잡한 변경이 필요하거나 Shopify에서 제작하지 않은 테마를 사용하는 경우에는 Shopify 파트너를 고용하는 것을 고려해 보십시오.

단계:

  1. Shopify 관리자에서 앱 > Order Printer (legacy)로 이동합니다.

  2. 템플릿 관리를 클릭합니다.

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

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

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

  6. 완료되면 저장을 클릭합니다.

Order Printer 템플릿 편집

Order Printer 템플릿을 편집하려면 HTML, CSS 및 Liquid에 익숙해야 합니다. Shopify 테마 지원팀은 템플릿을 광범위하게 편집해 드릴 수는 없지만 Shopify 디자인 정책 범위 내에서 무료 Shopify 테마의 간단한 조정을 도와드릴 수 있습니다. 더 복잡한 변경이 필요한 경우에는 Shopify 파트너를 고용하는 것을 고려해 보십시오.

단계:

  1. Shopify 관리자에서 앱 > Order Printer (legacy)로 이동합니다.

  2. 템플릿 관리를 클릭합니다.

  3. 편집하려는 템플릿의 이름을 클릭합니다.

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

  5. 완료되면 저장을 클릭합니다.

템플릿 맞춤 설정 예시

다음 예시에서는 Order Printer 템플릿을 맞춤 설정하는 몇 가지 일반적인 방법을 설명합니다.

데스크톱

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

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

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

  4. Shopify 관리자에서 설정 > 앱을 클릭합니다.

  5. Order Printer를 클릭하여 앱을 엽니다.

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

  7. 편집하려는 템플릿의 이름을 클릭합니다.

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

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

모바일

  1. Shopify app에서 Menu 아이콘을 탭합니다.

  2. 콘텐츠 메뉴에서 아래쪽 화살표 아이콘을 탭한 다음 파일을 탭합니다.

  3. 파일 업로드를 탭하고 컴퓨터에서 이미지 파일을 선택합니다.

  4. 파일 페이지에서 업로드된 파일을 찾은 다음 URL 복사를 탭합니다.

  5. Shopify 관리자에서 설정 > 앱을 탭합니다.

  6. Order Printer를 탭하여 앱을 엽니다.

  7. 템플릿 관리를 탭합니다.

  8. 편집하려는 템플릿의 이름을 탭합니다.

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

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

HTML에서는 다음과 같이 표시됩니다.

HTML 코드 예시

예: 표 너비를 100%로 설정

표에 테두리를 추가하고 너비를 100%로 확장하려면 표에 table-tabular 클래스를 추가합니다.

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

예: 제품 썸네일 표시

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

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

주문 세부 정보 추가

템플릿에 구매한 품목의 이름, 수량, 비용 등 주문 세부 정보를 추가할 수 있습니다. 템플릿에 주문 세부 정보를 추가하는 방법은 다음과 같습니다.

  1. Shopify 관리자에서 앱 > Order Printer (legacy)로 이동합니다.

  2. 템플릿 관리를 클릭합니다.

  3. 편집하려는 템플릿의 이름을 클릭합니다.

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

  5. 완료되면 저장을 클릭합니다.

예를 들어, Nyla는 배송되는 품목 목록을 포함하도록 패킹 슬립 템플릿을 편집하기 위해 Order Printer 앱의 패킹 슬립 템플릿 하단에 다음 코드를 추가합니다.

<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의 패킹 슬립에는 이제 구매한 품목이 나열된 표가 포함됩니다.