온라인 결제 업그레이드

온라인 결제를 사용자 지정하여 브랜드를 확장하고 메시지를 교환하고 서비스를 제공할 수 있으며 고객 경험을 개선할 수 있습니다. 사용자 지정 사항이 Shopify가 적용 중인 변경 사항과 호환되는지 확인하려면 결제를 정기적으로 업데이트해야 합니다.

업그레이드를 준비하려면 다음 작업을 수행해야 합니다.

  1. 새 결제를 미리 보기하여 고객 대상 결제 환경을 테스트합니다. 결제에 설정한 사용자 지정에 따라, 업그레이드하기 전에 checkout.liquid 파일을 변경해야 할 수도 있습니다.
  2. 변경 사항이 만족스러우면 스토어를 업그레이드하여 새로운 Shopify 결제를 사용합니다.

결제 미리 보기 및 오류 테스트

새 버전의 결제를 사용하려면 스토어를 업그레이드하기 전에 변경 사항을 미리 확인해야 합니다.

고객 입장에서 테스트 결제를 생성하십시오. 이러한 테스트 중 오류가 발견되면 결제 사용자 지정 내용의 일부가 새 버전의 기타 개선 사항과 충돌하게 됩니다. 해당 경우에는 업그레이드하기 전에 checkout.liquid 파일을 변경해야 합니다.

오류 해결

단계:

  1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
  2. 작업을 클릭하고 복제를 클릭합니다.
  3. 더 많은 테마에서 복제된 테마를 찾아 작업 > 코드 편집을 클릭합니다. 이 게시되지 않은 복제 테마 버전을 사용하여 편집하고 테스트하십시오.

참고: 테마를 변경하거나 테스트하는 경우에는 복제 복사본을 생성하고 해당 복제 복사본을 사용하여 작업하십시오. 복제 복사본으로 작업하는 도중 실수가 발생하면 고객에게 영향을 주지 않고 복제를 삭제한 후 원래 테마에서 다른 사본을 생성할 수 있습니다.

  1. checkout.liquid 파일을 엽니다.

  2. 새로운 Shopify 결제를 사용하여 복제된 테마에서 checkout.liquid 파일을 미리 보기합니다.

    1. Shopify 관리자의 결제 업그레이드 페이지로 이동하여 결제 미리 보기를 클릭한 후 복제된 테마를 선택합니다.
    2. 미리 보기에서 테스트 주문을 완료합니다.

결제 방식이 시각적으로 표시되는 방식에 오류가 있거나 문제가 인식되면 checkout.liquid 파일을 편집하여 이를 해결해야 합니다.

새로운 Shopify 결제로 업그레이드

결제 업그레이드는 Shopify 결제를 업그레이드하고 현재 게시된 테마를 변경 사항이 포함된 복제 복사본으로 교체하는 두 단계로 이루어져 있습니다.

업그레이드하기에 충분한 시간대(이른 아침, 늦은 저녁, 주말 등)를 선택하여 발생할 수 있는 중단을 최소화하십시오.

단계:

  1. 결제 업그레이드 페이지에서 결제 업그레이드를 클릭합니다. 이 버튼은 페이지 하단에 있습니다.

  2. 테마 미리 보기 시 오류가 발생하는 경우 위의 오류 해결을 참고하여 해당 테마가 해결되었는지 확인하십시오. 그런 다음 업데이트된 복제 테마를 게시합니다.

    1. 온라인 스토어에서 테마를 클릭합니다.
    2. 복제 테마를 찾아 작업 > 게시를 클릭합니다.

결제가 업그레이드되며 이제 복제 테마가 현재 테마가 됩니다.

Shopify 결제의 새로운 기능

새 버전의 Shopify 결제에 포함된 변경 사항 및 새로운 기능은 다음과 같습니다.

  • 할인 리퀴드 변수
  • Shop 옵트인
  • 주문 편집
  • 접근성 개선
  • 패딩 제거
  • 결제 방법 표시
  • 자리 표시자 문자열 제거
  • 저장된 고객 주소 표시
  • 3D Secure 인증
  • 추가 Google Analytics JavaScript 필드 변경
  • CSS 변경
  • 오류 메시지 보내기

할인 리퀴드 변수

결제 프로세스 전반에 걸쳐 할인 표시와 관련된 몇 가지 새로운 리퀴드 변수가 도입되었습니다. 이 변경 사항을 적용하면 고객에게 적합한 방식으로 자동 할인 및 스크립트 기반 할인을 나타낼 수 있습니다.

새 리퀴드 변수 목록 표
변수 정의
checkout.cart_level_discount_applications 결제에 대한 모든 카트별 할인 애플리케이션의 배열을 반환합니다.
line_item.discount_allocations 할인된 금액 및 상위 할인 애플리케이션에 대한 참조를 포함한 모든 할인 할당 목록을 반환합니다. line_item.discount_allocations는 카트, 결제, 주문 및 발주 주문의 품목에서 사용할 수 있습니다.
line_item.final_line_price 품목에 있는 모든 항목의 결합된 가격을 반환합니다. 이는 line_item.final_priceline_item.quantity를 곱한 값과 같습니다.
line_item.final_price 모든 품목 수준의 할인 금액을 포함한 품목 가격이 반환됩니다.
line_item.line_level_discount_allocations 할인된 금액과 상위 할인 적용에 대한 참조를 포함하는 품목별 특정 할인 할당의 목록을 반환합니다. line_item.line_level_discount_allocations는 카트, 결제, 주문 및 발주 주문에 포함된 품목에 대해 사용할 수 있습니다.
line_item.total_discount 품목에 적용된 모든 할인의 총 금액을 반환합니다. 이 특성은 스크립트 편집기 앱 사용 시에만 값을 가집니다.

Shop 옵트인

전용 전화 번호 필드가 주문 상태 페이지에 추가되었습니다. 배송 업데이트 소식을 받을 휴대폰 번호를 입력하라는 메시지가 텍스트로 고객에게 표시됩니다. 이 텍스트에는 Shop 앱으로 연결되는 링크도 포함되어 있습니다.

주문 편집

Shopify Plus 판매자가 주문 편집을 할 수 있는 경우에는 Shopify 결제를 사용하여 편집된 주문에 대한 추가 미결제 결제를 캡처할 수 있습니다. 결제 페이지가 의도한 대로 작동하게 하기 위해 다음과 같은 일부 변경 사항이 있습니다.

  • 고객은 연락처 정보, 배송 주소 또는 배송 방법을 변경할 수 없습니다.
  • 주문 총계 및 이미 결제된 금액을 나타내는 추가 품목이 있습니다.
  • 구매 완료 버튼이 지금 결제로 변경됩니다. 총계결제 금액으로 변경됩니다.
  • 고객의 결제 프로세스 진행 위치를 표시하는 이동 경로 정보 대신, 주문에 대한 다음과 같은 추가 정보를 상세히 설명하는 축소 배너가 표시됩니다. - 추가 결제 금액
    • 주문에서 추가 또는 제거된 제품
    • 주문 번호입니다.

추가 결제가 필요한 경우의 결제 페이지 이미지

이러한 변경 사항은 주문이 편집되어 고객의 추가 결제가 필요한 경우에만 적용됩니다.

현재 단계를 식별하기 위해 결제 사용자 지정에서 이동 경로를 사용하는 경우에는 Shopify.Checkout.step 개체를 대신 사용해야 합니다. 자세한 내용은 단계 식별을 참조하십시오.

접근성 개선

웹 접근성 표준을 준수하기 위해 여러 변경 사항이 결제에 도입되었습니다. 이를 통해 화면 리더 등의 접근성 기술을 사용하는 고객의 결제 프로세스를 더욱 쉽게 탐색할 수 있습니다.

  • 이제 모든 결제 단계에서 nav 요소로 이동 경로가 래핑됩니다. aria-current 특성은 span 요소의 li 요소로 이동되었습니다.
  • 이제 주문 요약이 aside 요소에 존재합니다.
  • 모바일 고객의 할인 코드 필드 ID가 모든 결제 단계에서 checkout_reduction_code에서 checkout_reduction_code_mobile로 변경되었습니다.
  • 감사주문 상태 페이지에 대한 접근성 특성이 지도에 추가되었습니다. 이제 지도에는 배송 주소가 포함된 role=regionaria-label이 있습니다.
  • stepstep__section 래퍼 divs가 주문 상태, 품절감사 페이지에 추가되었습니다.
  • 시맨틱 HTML5 요소가 결제 프로세스에 도입되었으며 role 특성이 업데이트되었습니다. - 주문 요약은 이제 aside 요소 내부에 있습니다.
    • .main__header div는 이제 role=banner 머리글 요소입니다.
    • .main__content의 div는 이제 role=main의 본문 요소입니다.
    • .main__footer의 div는 이제 role=contentinfo의 바닥글 요소입니다.
    • banner div는 이제 role=banner 머리글입니다.

패딩 제거

주문 상태, 품절감사 페이지에서 상점 이름과 주문 번호 사이의 공백이 제거되었습니다. 이 추가 패딩은 div.section.section--page-title 섹션에서 제거되었습니다.

결제 방법 표시

이제 주문 총 금액이 결제 방법 섹션의 주문 상태 페이지에서 고객에게 표시됩니다.

자리 표시자 문자열 제거

이메일 자리 표시자이메일 또는 전화 자리 표시자 필드가 테마 설정의 언어 옵션에서 제거되었습니다. 필요한 모든 사항은 이메일 레이블이메일 또는 전화 레이블 필드에서 변경할 수 있습니다. 해당 필드에 액세스하려면 온라인 스토어 > 테마로 이동하여 작업 > 언어 편집 > 결제 및 시스템을 클릭하십시오.

저장된 고객 주소 표시

로그인한 고객에게 결제 중 저장된 주소가 표시되는 방식이 변경되었습니다.

주소 옵션이 표시되는 순서는 다음과 같습니다.

  1. 기본으로 저장된 주소
  2. 가장 최근에 추가된 주소(가장 최근부터)
  3. 새 주소 사용 옵션

드롭다운 메뉴에는 최대 5개의 주소가 표시됩니다.

3D Secure 인증

3D Secure 기술은 고객이 구매를 마치기 전에 완료해야 하는 추가 보안 단계를 제공하며 Visa로 확인, Mastercard 신원 확인 또는 Amex SafeKey 등의 서비스를 제공합니다. 일부 고객은 결제 중 추가 인증을 위해 은행 포털로 리디렉션될 수 있습니다. 자세한 내용은 PSD2 및 강력한 고객 인증 이해를 참조하십시오.

유럽 경제 지역(EEA) 및 영국에 위치한 판매자는 Cardinal을 사용하여 3D Secure 결제를 제공할 수 있습니다. 자세한 내용은 Cardinal로 3D Secure을 참조하십시오.

추가 확인이 필요한 결제는 은행에서 결정하며 Shopify 관리자를 통해서는 제어할 수 없습니다. 이 변경 사항을 활성화하는 데 필요한 조치는 따로 없습니다.

추가 Google Analytics JavaScript 필드 변경

온라인 스토어 > 기본 설정의 Shopify 관리자에서 추가 Google Analytics javascript 섹션에 입력된 JavaScript는 표시되지 않는 iFrame으로 결제에 추가됩니다. 이는 분석용으로 사용되는 JavaScript에 영향을 미치지 않으나 다른 변경 사항이 결제에 적용되는 것을 방해합니다. 기타 이유로 사용자 지정 JavaScript를 결제에 추가하려면 직접 checkout.liquid 파일에 추가하십시오.

CSS 변경

heading-*text-container CSS 클래스가 모든 결제 단계에 추가되었습니다.

오류 메시지 보내기

고객이 선택한 express checkout 결제 방법을 사용할 수 없을 때 이를 고객에게 알리는 오류 배너가 추가되었습니다. 이 배너는 결제의 연락처 정보 단계 상단에 표시됩니다.

이전 배송료가 더 이상 유효하지 않음을 고객에게 알리는 오류 배너가 이동되었습니다. 이 배너는 이제 사용 가능한 배송 옵션 바로 위에 표시됩니다.

관련 링크

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

무료 체험