온라인 결제 업그레이드

이 페이지는 Apr 27, 2024에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/checkout-settings/checkout-upgrade에서 확인하십시오.

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

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

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

이 페이지의 정보

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

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

단계:

  1. Shopify 관리자에서 결제 업그레이드 페이지로 이동한 다음 결제 미리 보기를 클릭합니다.
  2. 목록에서 현재 테마를 선택한 다음 미리 보기를 클릭합니다.
  3. 고객 입장에서 결제 프로세스를 진행하여 결제를 테스트합니다.

테스트 중에 오류가 발생하는 원인은 일부 결제 사용자 지정 사항이 새 버전의 개선 사항과 충돌하기 때문일 수 있습니다. 이러한 경우 업그레이드하기 전에 checkout.liquid 파일을 변경해야 합니다.

오류 해결

단계:

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. ... 버튼을 클릭한 다음 복제를 클릭합니다.
  3. 다른 테마에서 복제된 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다. 이 게시되지 않은 복제 테마 버전을 사용하여 편집하고 테스트합니다.

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

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

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

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

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

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

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

단계:

  1. 결제 업그레이드 페이지에서 결제 업그레이드를 클릭합니다(이 버튼은 페이지 아래쪽에 있습니다).

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

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

Shopify 결제의 새로운 기능

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

가입

결제의 사용자 지정 사항을 유지하면서 가입 제품도 제공할 수 있는 여러 섹션이 Shopify 결제에 추가되었습니다. 이러한 섹션을 사용하면 Shopify 결제에서 가입 제품을 판매하고 정기결제를 직접 처리할 수 있습니다.

결제 업그레이드를 완료한 후에는 Shopify App Store에서 가입 앱을 추가하여 가입 서비스를 제공하거나 새로운 가입 API를 사용해 사용자 지정 앱을 작성할 수 있습니다.

가입에 대한 자세한 내용은 Shopify 지원 센터를 참조하십시오.

  • 가입을 사용하도록 설정하면 가입에 사용되는 배송 방법이 일회성 구매와는 별도로 표시됩니다.
  • .product_description_variant Span.product_description_selling_plan 이 추가 품목 속성으로 표시됩니다(해당 제품과 관련된 구독이 있는 경우).
  • 툴팁과 함께 정기 결제 총합이 주문 요약의 합계 아래에 표시됩니다.
  • 가입 제품이 포함된 주문에는 가입 배송 옵션이 표시됩니다.

상향 판매

새로워진 구매 후 상향 판매(post-purchase upsell) 앱은 Shopify App Store에서 다운로드할 수 있습니다. 이 앱을 사용하면 구매 후 제안을 Shopify 결제에서 직접 제공하고, 청구나 배송 정보를 고객이 다시 입력하지 않고도 추가 제품을 포함하도록 완료된 주문을 수정합니다.

이 결제 업그레이드에는 기존의 사용자 지정 결제 기능과 구매 후 상향 판매가 호환되도록 허용하는 결제 파일 변경이 포함됩니다.

구매 후 상향 판매에 대해 자세히 알아보십시오.

  • 유효한 구매 후(post-purchase) 앱이 Shopify Admin에 설치되면 고객은 구매 후 제안을 받게 됩니다.

참고: 구매 후 페이지의 사용자 지정 설정은 타사의 상향 판매(upsell) 앱 내에서 실행해야 합니다. 사용자 지정은 checkout.liquid를 사용하여 실행할 수 없습니다.

결제 시 팁

팁 옵션을 사용하면 고객이 온라인 주문 시 팁이나 기부를 포함하도록 선택할 수 있습니다. 팁을 사용하도록 설정하면 결제 시 결제 방법 단계에서 팁 추가 섹션이 표시됩니다. 팁 추가 섹션에는 원하는 팁 금액을 입력하는 필드 이외에 미리 지정된 3가지 팁 옵션이 함께 제공됩니다.

팁 옵션 제공 방법에 대해 자세히 알아보십시오.

  • 팁을 사용하도록 설정하면 결제 시 결제 방법 단계에 팁 추가 섹션이 표시됩니다.

픽업 및 지역 배송

지역 픽업과 배달은 고객이 주문을 현지 지역에서 수령할 수 있는 새로운 배송 방법입니다. 이러한 배송 방법을 사용하도록 설정하면 고객이 결제의 배송 단계에서 지역 픽업이나 배송을 선택할 수 있습니다.

지역 픽업 및 지역 배송을 사용하도록 설정하는 방법을 알아봅니다.

  • 지역 배송이 활성화된 상태에서 고객이 선택한 경우에는 지역 배달용 추가 필드가 표시됩니다.
  • 지역 픽업이 활성화된 상태인 경우 결제의 정보 페이지에 배송 방법 섹션이 고객에게 표시됩니다. 배송을 사용할 수 없는 경우에는 픽업 정보만 표시됩니다.

  • 배송 방법은 구별되는 탭으로 표시됩니다.

    • 배송을 선택하면 배송 정보를 입력하도록 요청하는 메시지가 고객에게 표시되며 배송 계속하기를 클릭하면 사용 가능한 배송 방법이 표시됩니다.
    • 픽업을 선택하면 픽업 위치 목록이 표시됩니다. 원하는 픽업 위치의 라디오 버튼을 클릭한 다음 결제 계속을 클릭합니다.

  • 결제 배송 단계에서 픽업을 선택하면 배송 정보가 수집되지 않습니다. 고객은 결제 단계에서 청구 정보를 입력해야 합니다.

  • 주문 상태 페이지에 지역 배송 지침이 표시됩니다. Shopify Admin의 설정 > 배송 및 배달로 이동하여 지침을 편집할 수 있습니다. 지역 픽업 섹션에서 편집할 위치를 찾은 다음 관리를 클릭합니다.

  • 주문 상태 페이지는 배송 및 픽업 진행 상황을 표시하도록 업데이트되었습니다. 다음과 같은 경우에 메시지가 표시됩니다.

    • 주문의 배송 준비가 완료되었습니다.
    • 배달이 완료되었습니다. 이 메시지에는 동일한 품목의 재주문 링크가 포함됩니다.
    • 픽업 주문이 확인되었으며, 해당 주문의 픽업 준비가 완료되면 고객에게 이메일이 전송된다는 메시지가 표시됩니다.
    • 픽업 주문이 준비되었습니다.
    • 고객이 픽업 주문을 수령했습니다.

해외 추가 필드

일부 국가에서는 물품을 고객에게 전달하기 위해 특수한 배송 규정을 준수해야 합니다. 이제 특수한 배송 규정이 적용되는 국가에 대해 추가 필드를 사용할 수 있습니다. 이러한 새 필드는 결제 시 결제 방법 단계에 표시됩니다.

해외 추가 필드에 대해 자세히 알아보십시오.

  • 추가 결제 필드는 브라질, 대한민국, 이탈리아, 중국 고객에게만 표시됩니다.

Shop 버튼을 이용해 주문 추적

주문 상태 및 감사 페이지에 있는 Shop을 이용해 주문 추적 버튼이 새로운 디자인으로 업데이트되었습니다.

Shop 앱에 대해 자세히 알아보십시오.

  • 고객에게 Shop 앱에서 구매를 추적하도록 요청하는 텍스트 버튼이 추가되었습니다.
  • Shop Pay 추적을 표시하는 매개 변수가 추가되었습니다.
  • 다음의 경우 Shop을 이용해 주문 추적 버튼을 렌더링합니다.
    • 배송 시도
    • 확인
    • 배송됨
    • 실패
    • 이동 중
    • 배송 불가
    • 배송 시작

주문 상태 페이지 업데이트

주문 상태 페이지에 몇 가지 업데이트가 적용되었습니다.

  • 기프트 카드 구매 시 기프트 카드 정보가 표시되는 전용 섹션이 생성되었습니다.
  • 가입 정보가 추가되었습니다.
  • icon-svg--align-text-bottom 클래스가 제거되었습니다.
  • data-step="thank-you" 이(가) data-step="thank_you"(으)로 변경되었습니다. 고객이 방문 중인 결제 페이지를 식별할 때 이 속성을 사용하려면 대신 Shopify.Checkout.page JavaScript 개체를 사용하십시오.
  • 주문 상태 카드가 추가되었습니다.

일반 파일 변경

  • div.content-box__row 에 이제 role="table"이(가) 포함됩니다.
  • 감사 단계에 있는 고객에게 QR 번들이 있는 경우에는 show_qr.js이(가) 추가됩니다.
  • 고객이 결제에 액세스할 수 있는지 확인하기 위해 확인 단계가 추가되었습니다.
  • 이제 기프트 카드가 checkouts/order_status/gift_cards와(과) 함께 표시됩니다.
  • 연락처 정보 지침이 enforce_content_directionality(으)로 수정되었습니다.
  • 배송 정보가 checkouts/web/checkouts/contact_information/pickup(으)로 이동되었습니다.
  • 이제 주문 요약 사이드바에 여러 배송 라인을 표시할 수 있도록 지원됩니다.
  • tr.total-line 은(는) 합계가 업데이트되는 경우에만 표시 됩니다.
  • 이제 일반 결제 라인이 지원됩니다.
  • 이제 결제 중 통화 변경이 지원됩니다.

  • #payment-gateway-subfields 에 이제 다음의 클래스가 포함됩니다.

    • .radio-wrapper content-box__row .content-box__row--secondary
    • .card-fields-container

  • 신용 카드 툴팁이 조정되어 이제 div.field__icon에 있습니다.

  • Aria 레이블이 배송 요금 전체 설명에서 제거되었습니다.

  • 배송 요금 양식 필드가 checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields(으)로 이동되었습니다.

스캘레톤/로딩 상태

결제 페이지의 로드 상태가 업데이트되어 페이지가 로드되는 동안 표시되는 스캘레톤을 추가하거나 로드가 완료될 때까지 일부 요소를 선택적으로 숨길 수 있습니다. 이러한 변경 사항을 통해 로드 시간이 최적화됩니다.

  • 로드 중 숨겨지는 개체:

    • del.total-recap__original-price
    • .total-line__price span.payment-due__currency
    • span.order-summary__emphasis

  • 로딩 중 스캘레톤을 표시하는 개체:

    • Span.total-recap__final-price
    • .product__price del.order-summary__small-text
    • .product__price del.order-summary__emphasis
    • .total-line__price span.payment-due__price
    • .total-line__price span.order-summary__emphasis
    • .total-line__price span.visually-hidden
    • .total-line__price.total-line--subtotal span.order-summary__emphasis

오류 메시지 보내기

결제에 새 오류 메시지가 추가되었습니다.

  • 주소 필드에 시민 번호(civic number) 경고가 추가 되었습니다.
  • 카트, 목적지, 국가에 사용 가능한 배송 요금이 없음을 나타내는 경고가 두 개의 개별 경고 메시지로 분리되었습니다. 하나는 카트나 목적지에 해당하는 요금이 없음을 나타내고, 다른 경고 메시지는 해당 국가에 사용 가능한 요금이 없음을 나타냅니다.
  • 개발 스토어에서 구매 완료를 시도할 때 결제에 경고 배너가 추가되었습니다.
  • 고객이 결제 시 요금이 청구되지 않는 경우에 표시되는 알림이 추가되었습니다.
  • 인증 변경 오류를 나타내는 경고 배너가 추가되었습니다.
  • 결제의 배송 단계에서 사용할 수 있는 배송 방법이 없는 경우를 위한 오류 메시지가 추가되었습니다.

데이터 속성 변경

다음 개체에서 Trekkie가 제거되었습니다.

  • Continue_shipping_button
  • Get_shipping_updates_button
  • Shipping_updates_handle_field
  • Shipping_updates_submit_button
  • Change_shipping_address_link
  • breadcrumb_cart_link
  • apply_discount_button
  • Have_an_account_login_link
  • Email_or_phone_field
  • Email_field
  • buyer_accepts_marketing_field
  • Change_billing_address_link
  • Change_contact_method_link
  • Change_payment_method_link
  • Change_pickup_method_link
  • Change_shipping_address_link
  • 결제 입력 필드:
    • {type}_address_field
    • {type}_firstname_field
    • {type}_lastname_field
    • {type}_company_field
    • {type}_address1_google_autocomplete_field
    • {type}_address1_field
    • {type}_address2_field
    • {type}_city_field
    • {type}_country_field
    • {type}_province_field
    • {type}_zip_google_autocomplete_field
    • {type}_phone_field

접근성 개선

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

  • ul에 role="list"이(가) 다음과 같이 추가 되었습니다.

    • u.breadcrumb
    • ul.payment-method-list
    • ul.os-timeline
    • ul.policy-list

  • telephone_field의 aria-labelledby에서 툴팁이 제거되었습니다.

  • Shop에서 입력 레이블이 전화를 참조하도록 변경되었습니다.

  • 세금을 기다리는 동안 제목(h3)이 추가되었습니다.

  • 리디렉션할 때 제목(h3)이 추가되었습니다.

  • 배송 방법을 로드할 때 p 태그가 h3 태그로 변경되었습니다.

  • 이제 자동 완성은 phone 대신 mobile tel을(를) 참조합니다.

  • div[data-processing-order] 업데이트로 role="region"이(가) 추가되었습니다.

  • div[data-announce-change]이(가) 다음과 같이 업데이트되었습니다.

    • 추가됨: role="region"
    • 머리글 요소의 ID와 일치하도록 aria-labelledby 설정
    • 콘텐츠를 포함하는 요소의 ID와 일치하도록 aria-describedby 설정

  • div.content-box blank-slate이(가) 다음과 같이 업데이트되었습니다.

    • 추가됨: role="region"
    • 머리글 요소의 ID와 일치하도록 aria-labelledby 설정

  • div대신 ul 요소와 li 요소를 사용하도록 Express 결제 그리드가 개선되었습니다.

  • 주문 요약이 다음과 같이 업데이트되었습니다.

    • 할인가와 정가의 명확성 개선
    • span을 dl 태그로 변경
    • del 태그를 dt 및 dd 태그로 변경

  • 결제 세부 정보 방법이 다음과 같이 업데이트되었습니다.

    • span.radio__label__accessory 이(가) 다음으로 변경됨: div.radio__label__accessory
    • span.visually-hidden 이(가) 다음으로 변경됨: h3.visually-hidden
    • span.payment-icon-list__more 이(가) 다음으로 변경됨: li.payment-icon-list__more
    • span.content-box__small-text 이(가) 다음으로 변경됨: small.content-box__small-text

관련 링크

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

무료 체험