Skip to main content

​
개요

이 기능을 사용하면 구매자의 저장된 결제 수단을 활용한 더 빠른 체크아웃 경험을 위해 Shopify의 익스프레스 결제 옵션(Shop Pay, Apple Pay, Google Pay 등)을 표시할 수 있어요. 익스프레스 또는 가속 체크아웃 버튼은 재방문 고객이 결제 및 배송 정보를 수동으로 입력하지 않고 더 빠르게 구매를 완료하도록 도와줘요. 이 버튼들은 카트의 기본 Checkout 버튼 아래에 나타나며 Shopify가 구동해요. Upcart는 이 버튼들을 시각적·구조적으로 지원하지만, 동작과 표시 여부는 Shopify가 제어해요. 📘 자세한 내용은 Shopify의 가속 체크아웃 문서와 가속 체크아웃 버튼에 대한 Shopify 릴리스 노트를 참고하세요. Upcart 체크아웃 버튼 아래에 있는 Shop Pay, PayPal, Google Pay 익스프레스 버튼

​
익스프레스 결제가 표시되도록 하기

Upcart 안에 가속 체크아웃 버튼을 표시하려면 Shopify 테마가 이미 스토어프론트에 해당 버튼을 포함하고 있어야 해요. 다음과 같이 할 수 있어요:
  1. 테마 코드에 스니펫 추가하기
    • Online Store > Themes > Edit Code로 이동하세요
    • layout/theme.liquid 파일을 여세요
    • 여는 <body> 태그를 찾으세요 (</body>가 아니에요)
    • 그 태그 아래에 다음 코드를 붙여넣으세요:
  2. 파일을 저장하세요
다음은 어떻게 보여야 하는지에 대한 예시예요: theme.liquid의 body 태그 아래에 추가된 additional checkout buttons Liquid 스니펫 이 작업이 완료되면 Upcart가 익스프레스 결제 옵션을 감지하고 렌더링할 수 있어요. 💡 코드를 직접 편집하고 싶지 않다면 개발자나 Shopify Expert에게 문의하세요.

​
결제 게이트웨이

Payment gateways 카드는 레거시 Express Payments 모듈에 속해요 — 스토어가 아직 이전 버전을 사용 중인 경우에만 보여요. 이 카드는 Upcart가 카트에 표시할 수 있는 익스프레스 게이트웨이를 나열하며, 각각을 켜거나 끄고 표시 순서를 설정할 수 있어요. 여섯 개의 게이트웨이가 나열돼요:
  • Shop Pay
  • PayPal
  • Apple Pay
  • Amazon Pay
  • Meta Pay
  • Google Pay — 나열되지만 Coming Soon으로 표시되며 선택할 수 없어요
Google Pay는 의도적으로 보류되어 있어요: 카트가 변경될 때 새로 고침되지 않아서 클릭하기 전에 카트를 편집한 사람에게 오래된 가격을 보여줄 수 있기 때문이에요. 나머지 다섯 개는 활성화하고 순서를 변경할 수 있어요 — 활성화된 게이트웨이는 순서가 있는 목록에 있으며, 각 행 옆의 위아래 화살표로 순서를 변경하고, 비활성화된 게이트웨이는 아래에 있으며 클릭하면 다시 추가돼요.
여기서 게이트웨이를 활성화한다고 해서 표시가 보장되는 것은 아니에요. Shopify 스토어에서 활성화되어 있지 않거나 쇼핑객이 사용 자격이 없으면 실제 카트에서 게이트웨이가 숨겨져요 — 예를 들어 Apple Pay 버튼은 지원되는 기기와 브라우저에서만 표시돼요. 게이트웨이 활성화 방법과 각각의 자격 규칙은 Shopify의 가속 체크아웃 문서를 참고하세요.

​
가속 체크아웃 버튼 디자인

버튼 설정이 완료되면 Upcart 안에서 버튼이 표시되는 방식을 커스터마이징할 수 있어요.

​
버튼 높이

  • Default button height와 Mobile button height는 각각 25px에서 55px까지 별도로 설정돼요
  • 각각 같은 값에 연결된 숫자 필드와 슬라이더가 있어요 — 더 편한 쪽을 사용하세요

​
체크아웃 버튼 정렬

  • 익스프레스 버튼의 정렬 방식을 선택하세요:
    • Left
    • Right
    • Center
    • Space Between

​
행 간격

  • 쌓인 버튼 사이의 수직 간격을 0px에서 40px까지 설정하세요

​
고급 표시 옵션

이 옵션을 활성화하면 구독 제품이 카트에 있을 때 일반적으로 표시되는 구매자 동의 메시지를 숨겨요. 관련 정보를 이미 다른 곳에서 제공하고 있다면 시각적 혼잡을 줄이는 데 도움이 될 수 있어요.

​
Shadow DOM에서 카트 렌더링하기

Shopify 테마의 CSS가 Upcart의 스타일링을 방해하지 않도록 하려면 이 옵션을 활성화하세요.
모든 브라우저와 기기에서 일관된 디자인이 보장돼요. 이 옵션을 활성화하면 Settings > Cart settings > Advanced Settings의 동일한 설정도 함께 적용돼요.

​
테마 호환성 참고 사항

  • 이제 Shopify는 가속 체크아웃 버튼에 대해 엄격한 스타일링 규칙을 적용해요.
  • Upcart의 새 버전은 이 규칙을 완전히 지원하며 Shopify의 스타일링 동작을 따라요.
⚠️ 현재 모듈에서는 상단에 Revert To Legacy Express Payments 버튼이 있는 Revert To Old Version 배너가 나타나요. 이는 오래된 테마에만 필요해요 — 되돌리면 Shopify 스타일링 이전의 동작으로 돌아가므로, 테마가 정말로 필요로 하지 않는 한 그대로 두세요. 되돌리는 경우에는 이전 모듈에서 저장된 스타일링 옵션을 모두 선택 해제하여 새 버전을 방해하지 않도록 하세요.