1)를 열거나 Shopify App Store 페이지를 확인하세요.1. ShipCalc 설치
ShipCalc는 Shopify App Store에서 설치합니다. 설치하면 14일 무료 체험이 시작되며 모든 기능을 사용할 수 있습니다.
- Shopify App Store의 ShipCalc 페이지를 엽니다.
- Install(설치)을 클릭하고 앱을 승인합니다.
- ShipCalc가 Shopify 관리자에서 시작 체크리스트와 함께 열립니다.
시작 페이지에는 각 표시 위치에 맞춰 테마 편집기를 바로 여는 원클릭 링크가 있습니다.
2. 상품 페이지 블록 추가
상품 페이지 블록을 사용하면 고객이 상품을 장바구니에 담기 전에 배송비를 확인할 수 있습니다. 현재 선택된 옵션과 수량을 사용합니다.
- ShipCalc 시작 화면에서 Add Product Page Block을 클릭합니다. 테마 편집기가 상품 템플릿에서 열립니다.
- 상품 정보 섹션에서 Add block(블록 추가)을 클릭하고 ShipCalc 블록을 선택합니다.
- 원하는 위치로 끌어 놓습니다. 가격 아래나 구매 버튼 아래가 적합합니다.
- Save(저장)를 클릭합니다.
3. 장바구니 페이지 블록 추가
장바구니 블록은 장바구니의 모든 상품과 수량을 반영해 견적을 내므로 고객이 주문 전체의 배송비를 확인할 수 있습니다.
- ShipCalc에서 Add Cart Page Block을 클릭합니다. 테마 편집기가 장바구니 템플릿에서 열립니다.
- Add block(블록 추가)을 클릭하고 ShipCalc 장바구니 블록을 선택합니다.
- 소계와 결제 버튼 근처에 배치한 다음 Save(저장)를 클릭합니다.
4. 장바구니 드로어 지원 활성화
장바구니 드로어(슬라이드형 장바구니)는 테마마다 구조가 다르기 때문에 ShipCalc는 앱 임베드로 이를 지원합니다. 앱 임베드가 열린 드로어를 찾아 결제 버튼 위에 접을 수 있는 컴팩트한 계산기를 배치합니다.
- 테마 편집기를 열고 왼쪽 사이드바에서 App embeds(앱 임베드)를 선택합니다.
- ShipCalc 장바구니 드로어 임베드를 켭니다.
- 대부분의 테마는 자동 감지로 작동합니다. 작동하지 않으면 임베드 설정에 드로어의 CSS 선택자를 입력하세요.
- Save(저장)를 클릭한 다음 실제 스토어에서 드로어를 열어 위치를 확인합니다.
5. 위젯 사용자 정의
디자인과 문구 설정은 ShipCalc의 Appearance(디자인) 페이지에 있으며, 변경 사항이 스토어에 반영되기 전에 실시간 미리보기로 확인할 수 있습니다.
레이아웃과 스타일
- 카드 또는 미니멀 레이아웃.
- 강조, 배경, 텍스트, 테두리 색상.
- 모서리 반경, 여백, 글자 크기.
- 테마의 타이포그래피와 기본 컨트롤 스타일 상속.
문구
- 제목, 도움말 문구, 버튼 문구.
- 국가와 우편번호의 라벨 및 안내 문구.
- 계산 중, 요금 없음, 오류, 빈 장바구니 메시지.
- 무료 배송 방법용 라벨.
고객에게 보이는 모든 라벨은 스토어 언어로 작성할 수 있습니다.
사용자 정의 CSS
더 세밀하게 제어하려면 CSS 편집기에서 위젯에 적용할 규칙을 추가할 수 있습니다. 테마별 여백이나 호버 상태를 조정할 때 유용합니다.
6. 국가와 우편번호
배송 국가를 가져올 방식을 선택합니다.
- Fixed country(고정 국가) — 항상 선택한 한 국가 기준으로 견적을 냅니다.
- Shopper’s Shopify country(고객의 Shopify 국가) — Shopify Markets의 현지화 국가를 따릅니다.
- Country selector(국가 선택) — 허용한 국가 중에서 고객이 선택합니다.
그런 다음 우편번호 동작을 선택합니다.
- Required(필수) — 고객이 우편번호나 ZIP 코드를 입력해야 합니다.
- Optional(선택) — 더 정확한 견적을 위해 고객이 입력할 수 있습니다.
- Country only(국가만) — 우편번호 입력란을 숨기며, ShipCalc는 선택한 국가에 대한 예상 요금을 반환할 수 있습니다.
특정 국가 방문자에게는 계산기를 숨기거나, 선택한 국가의 방문자에게만 표시할 수도 있습니다.
7. 요금 표시 옵션
- 이용 가능한 모든 요금, 최저가만 또는 최고가만 표시합니다.
- Shopify가 반환하는 경우 요금 아래에 배송 세부 정보를 표시합니다.
- 무료 방법에는 직접 정한 라벨을 사용합니다(예: “무료 배송”).
8. 수동 배치(고급)
테마 레이아웃상 원하는 위치에 앱 블록을 넣을 수 없다면, 테마에 자리 표시 요소와 ShipCalc 로더를 추가하세요.
<div data-shipcalc-m="product"></div>
<script src="/apps/shipcalc/manual.js" defer></script>장바구니에 배치하려면 data-shipcalc-m="cart"를 사용하세요. 수동 계산기도 앱 블록과 같은 설정, 스타일, 분석을 사용합니다.
9. 분석
Analytics(분석) 페이지에서 고객의 계산기 사용 현황을 확인할 수 있습니다.
- 기간별 총 견적 요청 수와 최근 활동.
- 출처별 견적: 상품 페이지, 장바구니 페이지 또는 장바구니 드로어.
- 자주 조회되는 우편번호와 국가 조합.
- 고객에게 표시된 배송 방법.
- 요금이 없는 배송지를 찾을 수 있는 오류 정보.
10. 마케팅 이벤트
스토어에 Google Analytics 4, Google Tag Manager, Meta Pixel이 이미 설치되어 있다면 ShipCalc가 Calculate Shipping 이벤트를 보낼 수 있습니다. ShipCalc는 추적 스크립트를 설치하지 않습니다.
- ShipCalc에서 Marketing events(마케팅 이벤트)를 엽니다.
- 이벤트를 보낼 플랫폼을 선택합니다.
- 필요하면 이벤트 이름, 카테고리, 라벨, 값을 변경하거나 사용자 정의 매개변수를 추가합니다.
- 저장합니다.
이벤트에는 위젯 출처(상품, 장바구니 또는 드로어), 국가, 우편번호 입력 여부가 포함됩니다.
11. 진단
Diagnostics(진단) 페이지는 스토어를 거치지 않고 실제 견적을 실행합니다. 배송 지역이나 요금을 변경한 후에 유용합니다.
- ShipCalc에서 Diagnostics(진단)를 엽니다.
- 상품, 국가, 우편번호를 선택합니다.
- 견적을 실행해 Shopify가 반환하는 결과를 정확히 확인합니다.
12. 문제 해결
상품 페이지에 계산기가 표시되지 않습니다
- 상품이 실제로 사용하는 템플릿에 블록을 추가했는지, 저장했는지 확인하세요.
- 블록이 숨겨지거나 접힌 섹션 안에 있지 않은지 확인하세요.
- Appearance의 방문자 국가 규칙이 현재 위치에서 계산기를 숨기고 있지 않은지 확인하세요.
요금이 반환되지 않습니다
- 배송지가 Shopify의 활성 마켓과 배송 지역에 속하는지 확인하세요.
- 상품의 배송 프로필과 무게가 요금 조건을 충족하는지 확인하세요.
- Diagnostics에서 같은 배송지로 실행해 Shopify가 무엇을 반환하는지 확인하세요.
- 고객이 다음에 무엇을 해야 할지 알 수 있도록 요금 없음 메시지를 수정하세요.
더 자세한 체크리스트는 Shopify 배송 요금이 표시되지 않을 때를 참고하세요.
장바구니 드로어에 표시되지 않습니다
- 장바구니 드로어 앱 임베드가 켜져 있고 저장되었는지 확인하세요.
- 임베드 설정에서 드로어 선택자를 지정해 보세요.
- 테마 이름과 함께 문의해 주세요.
13. 지원
ShipCalc 관리 화면에는 빠른 답변과 문의 양식이 있는 지원 페이지가 있습니다. 여기에서 메시지를 보내셔도 이메일로 답변드립니다.