인쇄 영수증 코드 편집기

Shopify 관리자에서 코드 편집기를 사용하여 인쇄 영수증을 사용자 지정할 수 있습니다. 코드 편집기를 통해 HTML, CSS 및 Liquid를 사용하여 시각적 편집기보다 고급 맞춤 설정을 생성할 수 있습니다.

인쇄 영수증에 사용되는 영수증 템플릿과 섹션 템플릿을 변경할 수 있습니다. 영수증 템플릿은 스토어에서 인쇄하는 영수증 유형입니다. 섹션은 머리글 또는 바닥글과 같은 영수증의 일부입니다. 섹션은 여러 영수증을 다시 사용할수 있습니다.

이 페이지의 정보

영수증 코드 편집기 사용 시 고려 사항

영수증 코드 편집기를 사용하기 전에 다음 고려 사항을 검토하세요.

데스크톱의 Shopify 관리자에서는 코드 편집기만 사용할 수 있습니다.
코드 변경은 모든 POS Pro 위치에 적용됩니다. 그러나 특정 위치에 대한 맞춤 설정을 표시하는 조건을 추가할 수 있습니다. Liquid로 제어 흐름 태그 사용에 대해 자세히 알아보세요.
코드 편집기로 전환하면 Shopify POS 앱에서 영수증 템플릿을 사용자 지정할 수 없습니다. POS Pro 가입 플랜이 있는 위치의 Shopify POS 앱에서 인쇄 옵션을 조정할 수는 있습니다.
코드 편집기의 맞춤 설정은 POS Pro 위치에만 적용됩니다. 코드 편집기를 사용하고 POS Lite 위치가 있다면 시각적 편집기를 사용하여 Lite 위치의 머리글과 바닥글을 사용자 지정할 수 있습니다.
영수증을 구성하는 파일에는 Shopify의 템플릿 언어인 Liquid가 포함되어 있습니다. Liquid 사용에 대해 자세히 알아보세요.
영수증 코드 편집기에서 템플릿을 편집하려면 HTML, CSS 및 Liquid에 익숙해야 합니다. Shopify 테마 지원팀에서는 Shopify 디자인 정책 범위 내에서 사소한 조정에 도움을 드립니다.
일부 유형의 인쇄 영수증은 사용자 지정할 수 없습니다.
코드 편집기는 이탈리아 내 모든 위치에서 사용할 수 없습니다.

영수증 유형에 대한 비호환성 고려 사항

일부 유형의 인쇄 영수증은 영수증 코드 편집기에서 사용자 지정할 수 없습니다. 코드 편집기에 템플릿이 없는 영수증 유형은 맞춤 설정과 호환되지 않습니다.

다음 유형의 인쇄 영수증을 사용자 지정할 수 있습니다.

판매 영수증
기프트 카드 영수증
기프트 영수증

다음 영수증은 사용자 지정할 수 없습니다.

반품 영수증
교환 영수증

또한 이탈리아 내 위치의 모든 영수증 유형은 사용자 지정에 적합하지 않습니다.

코드 편집기에 액세스

코드 편집기를 사용하여 템플릿을 편집할 수 있습니다.

단계:

Shopify 관리자에서 설정 > 앱 및 판매 채널로 이동합니다.
앱 및 판매 채널 페이지에서 Point of sale을(를) 클릭합니다.
판매 채널 열기 버튼을 클릭합니다.
설정 > 영수증 사용자 지정을 클릭합니다.
영수증 사용자 지정을 클릭합니다.
... > 코드 편집을 클릭합니다.
코드 편집 대화 상자에서 코드 편집을 클릭합니다.

영수증 템플릿에서 사용자 지정 파일 사용

업로드한 파일을 사용하여 영수증을 사용자 지정할 수 있습니다. 영수증에 인쇄하려는 사용자 지정 이미지가 있는 경우 해당 이미지를 Shopify 관리자에 업로드한 다음 사용자 지정 영수증에 사용할 수 있습니다. 파일 업로드에 대해 자세히 알아보세요.

단계:

Shopify 관리자에서 설정 > 앱 및 판매 채널로 이동합니다.
앱 및 판매 채널 페이지에서 Point of sale을(를) 클릭합니다.
판매 채널 열기 버튼을 클릭합니다.
설정 > 영수증 사용자 지정을 클릭합니다.
영수증 사용자 지정을 클릭합니다.
콘텐츠 페이지를 클릭합니다.
영수증 템플릿에서 사용할 파일 옆의 링크를 복사합니다.
템플릿에 링크를 포함합니다.

영수증 템플릿을 기본값으로 재설정

코드 편집기를 사용하여 영수증 템플릿을 기본 버전으로 재설정할 수 있습니다.

단계:

Shopify 관리자에서 설정 > 앱 및 판매 채널로 이동합니다.
앱 및 판매 채널 페이지에서 Point of sale을(를) 클릭합니다.
판매 채널 열기 버튼을 클릭합니다.
설정 > 영수증 사용자 지정을 클릭합니다.
재설정할 템플릿을 클릭합니다.
재설정 아이콘을 클릭합니다.
파일을 기본 값으로 재설정 모달에서 재설정을 클릭하여 확인합니다.

영수증 코드 편집기에서 사용할 수 있는 Liquid 변수

Liquid를 사용하여 인쇄 영수증 템플릿 및 영수증 유형을 사용자 지정할 수 있습니다.

영수증 코드 편집기에서 사용할 수 있는 데이터 개체는 다음과 같습니다.

영수증 데이터 객체 설명
객체	설명
shop	스토어 이름과 같은 스토어 정보가 들어 있습니다.
location	주소 및 전화 번호와 같은 소매점 위치 정보가 들어 있습니다.
order	품목, 할인, 세금 및 거래 정보를 포함한 주문 데이터가 들어 있습니다.
gift_card	`gift_card.liquid` 템플릿 내에서만 사용할 수 있습니다. POS 앱에서 스캔할 수 있는 QR 코드의 잔액, 영숫자 코드 및 콘텐츠를 포함한 기프트 카드 데이터가 들어 있습니다.

영수증 코드 편집기에서 사용할 수 있는 Liquid 필터

Liquid 필터를 사용하여 영수증 템플릿의 정보를 조정할 수 있습니다. 예를 들어, 통화의 형식이나 세금 코드와 같은 특정 텍스트의 대문자 표기를 변경할 수 있습니다.

필터를 적용하려면 수직 막대 기호 |를 추가한 다음 이중 중괄호 {{ }} 사이에 있는 Liquid 코드 블록 내에 필터를 추가하세요. 필터는 Liquid 코드 블록에만 적용할 수 있습니다.

다음 예제에서는 필터가 소문자부터 대문자까지 세금 코드를 조정합니다.

{{ tax_line.title | upcase }}

예제 코드 블록에서 product는 개체, title은 해당 속성이며 upcase는 적용되는 필터입니다. upcase 필터는 tax_line.title 값의 대문자 표기를 대문자로 변경합니다. 예를 들어 tax_line.title에 Hst 값이 있는 경우 upcase 필터는 값을 HST로 변경합니다.

Liquid 필터 사용 방법에 대한 자세한 내용은 Shopify Themes Liquid 참조의 필터 섹션을 참조하세요.

영수증 코드 편집기에서 사용할 수 있는 필터는 다음과 같습니다.

영수증 필터 설명
속성	설명
t	미리 정의한 레이블을 귀하의 위치에 할당된 언어로 번역합니다.
money	해당 위치의 통화로 가격의 형식을 지정합니다.
escape	`<>`, `'` 및 `&`와 같은 HTML의 특수 문자를 이스케이프하고 문자를 이스케이프 시퀀스로 전환합니다.
barcode	1D 바코드 SVG를 생성합니다.
qrcode	2D 바코드 SVG를 생성합니다.

인쇄 영수증 템플릿 코드 맞춤 설정 예시

Liquid를 사용하여 조건부 메시지를 추가할 수 있습니다. 이 기능은 시각적 편집기로 단일 위치에 저장하는 것과 유사합니다. 예를 들어, 하나의 위치로 비즈니스를 시작했다가 이제 새 위치가 여러 개 있습니다. 인쇄 영수증에서 원래 스토어를 강조 표시하려고 합니다.

코드 편집기의 섹션 폴더에서 header.liquid 템플릿에 사용자 지정 메시지를 추가하고 Liquid를 사용하여 플래그십 위치에만 메시지를 표시할 수 있습니다.

다음 코드는 위치의 이름을 확인하며(이 경우 "홈") 위치가 이름과 일치하면 "1972년에 개장한 오리지널 스토어에 오신 것을 환영합니다."라는 메시지가 표시됩니다. 다른 위치에서 인쇄된 영수증에는 "스토어에 오신 것을 환영합니다."라는 메시지가 대신 표시됩니다.

{% if location.name == 'Home' %}
  Welcome to our original store, opened in 1972.
{% else %}
  Welcome to our store.
{% end %}