Shopify 앱 문서
Shopify 스토어에서 통화 변환을 설정하고 맞춤화하는 데 필요한 모든 것
목차
1 설치
Shopify 앱 스토어에서 설치
- Shopify 앱 스토어에서 Currency.Wiki 앱 페이지 방문
- '앱 추가'를 클릭하고 설치를 승인하세요
- 앱이 열리면 설정 마법사가 안내를 시작합니다
- 설정 마법사를 완료하면 가격 변환이 시작됩니다
팁: 설정 마법사는 약 2분 정도 소요되며 각 단계를 안내합니다.
2 설정 마법사
설정 마법사는 앱을 올바르게 설정하도록 도와줍니다. 통화 포맷 업데이트와 앱 임베드 활성화를 안내합니다.
1단계: 시작
설정 과정에 포함된 내용을 확인하고 '시작하기'를 클릭하세요.
2단계: 통화 포맷 업데이트
Shopify 관리자 → 설정 → 일반 → 스토어 기본값으로 이동하세요. 통화를 찾아 점 3개 메뉴 → '통화 포맷 변경'을 클릭하세요. HTML 필드를 아래 래퍼 클래스로 업데이트하세요:
통화 포함 HTML:
<span class="cwiki">${{amount}} USD</span>
통화 미포함 HTML:
<span class="cwiki">${{amount}}</span>
중요: cwiki 래퍼 클래스는 필수입니다. 이 클래스는 페이지에서 가격 요소만 변환하도록 앱에 알려줍니다. 전화번호나 주문번호는 변환되지 않습니다.
3단계: 앱 임베드 활성화
테마의 앱 임베드 섹션에서 앱을 활성화하세요:
- 온라인 스토어 → 테마 → 맞춤설정으로 이동
- 왼쪽 사이드바에서 '앱 임베드'를 찾으세요
- 'Currency.Wiki App'을 찾아 ON으로 전환하세요
- 테마 에디터에서 저장을 클릭하세요
4단계: 설정 확인
'내 스토어 스캔'을 클릭해 설정이 완료되었는지 확인하세요. 마법사는 cwiki 래퍼 클래스와 앱 임베드 활성화를 점검합니다. 성공하면 바로 사용 가능합니다!
3 위젯 스타일
스토어 디자인에 맞는 6가지 위젯 스타일 중에서 선택하세요. 각 스타일은 브랜드 색상으로 맞춤화할 수 있습니다.
최소형 드롭다운
간단한 드롭다운 목록이 있는 컴팩트 헤더 통합. 우측 상단 헤더에 적합합니다.
플로팅 버튼
확장 가능한 패널이 있는 모바일 친화적 플로팅 버튼. 모바일 중심 스토어에 적합하며 코너에 위치합니다.
사이드바 드로어
검색 기능이 있는 전체 높이 슬라이드 패널. 다양한 통화를 제공하는 스토어에 이상적입니다.
모달 팝업
그리드 레이아웃의 중앙 오버레이. 통화 선택에 집중할 수 있습니다.
인라인 탭 전환기
인기 통화를 위한 수평 탭. 메뉴를 열지 않고 빠르게 전환할 수 있습니다.
코너 배지
클릭 시 확장되는 미니멀한 코너 아이콘. 깔끔한 디자인에 가장 방해가 적습니다.
팁: 앱 관리자 내 위젯 설정 페이지에서 스토어 색상과 함께 모든 스타일을 미리볼 수 있습니다.
4 관리자 대시보드
관리자 대시보드에서 스토어의 통화 변환 방식을 완벽하게 제어할 수 있습니다.
대시보드 홈
위젯 켜기/끄기, 변환 통계 보기, 위젯 실시간 미리보기 제공
위젯 설정
위젯 스타일, 위치, 색상, 크기, 테두리 반경, 국기 표시 옵션을 선택하세요.
통화 관리
통화 활성/비활성화, 목록 순서 변경, 자동 감지 설정, 환율 선호도 설정
분석
변환 차트, 상위 사용 통화, 해외 고객 분포 확인
테마 & 외관
테마 모드(자동, 밝음, 어두움, 맞춤) 선택, 색상 설정, 글래스모피즘 효과, 다크 모드 동작 설정
결제 안내 메시지
장바구니/결제 페이지에 결제 통화 안내 메시지 표시
5 고급 설정
고급 설정은 Pro 사용자에게 가격 포맷 및 변환 동작에 대한 더 많은 제어를 제공합니다.
가격 포맷 (Pro)
- 소수점 자리수 - 표시할 소수점 자리수(0~6)를 제어하세요.
- 숫자 포맷 - 포맷 스타일 선택 (자동, 미국식, 유럽식, 인도식, 공백•점, 공백•쉼표)
- 기호 위치 - 통화 기호를 금액 앞 또는 뒤에 배치하거나 통화별로 자동 설정
- 반올림 - 표준, 올림, 내림, 반올림 없음 중 선택. .99로 반올림 옵션 제공
테마 통합 (Pro)
아래 HTML 스니펫을 사용해 테마 어디든 위젯이나 카트 안내를 수동 임베드할 수 있습니다:
위젯 임베드 (header.liquid 또는 섹션에 추가):
<div class="cwiki-widget"></div>
카트 안내 임베드 (cart.liquid에 추가):
<div class="cwiki-banner"></div>
개발자 옵션 (Pro)
- 스타일 오버라이드 - 위젯 스타일을 조정하는 맞춤 CSS 삽입
- 클릭 리스너 - 특정 요소 클릭 시 가격 재변환 (예: 사이즈 선택, 상품 옵션 등)
- 추가 가격 요소 - 기본 .cwiki 래퍼 외에 추가 가격 요소 지정
- URL 패턴 - 특정 문자열이 포함된 URL에서 가격을 다시 스캔 (AJAX, 무한 스크롤 등)
- 변환 지연 - 페이지 준비 후 로드되는 콘텐츠를 위해 변환 전 대기 시간 설정
알림: 이 옵션은 고급 사용자용입니다. 게시 전 미리보기 테마에서 테스트하세요.
6 문제 해결
가격이 변환되지 않나요?
통화 포맷 설정에 cwiki 래퍼 클래스가 포함되어 있는지 확인하세요. 설정 → 일반 → 스토어 기본값에서 HTML 포맷을 확인하고, 테마 커스터마이저에서 앱 임베드가 활성화되어 있는지도 확인하세요.
위젯이 표시되지 않나요?
테마의 App Embeds 섹션에서 앱 임베드가 활성화되어 있는지 확인하세요. 테마 커스터마이저를 열고 App Embeds에서 Currency.Wiki가 켜져 있는지 확인한 후 저장하고 스토어를 새로고침하세요.
가격이 로드 시 깜빡이나요?
앱은 깜빡임 없는 로딩을 위해 설계되었습니다. 깜빡임이 보인다면 캐싱 플러그인이 간섭하는지 확인하고, 앱 임베드가 테마의 head 섹션에 로드되는지 점검하세요.
잘못된 통화가 감지되나요?
위치 감지는 방문자의 IP 주소를 기반으로 합니다. VPN이나 기업 네트워크는 감지에 영향을 줄 수 있습니다. 방문자는 언제든 선호 통화를 수동으로 선택할 수 있습니다. 설정에서 기본 예비 통화도 지정할 수 있습니다.
위젯이 내 테마와 어울리지 않나요?
테마 & 외관 설정에서 색상을 맞춤화하거나, 자동 모드를 활성화해 테마 색상을 자동 감지하세요. 고급 설정의 맞춤 CSS로 세밀하게 스타일을 조정할 수도 있습니다.
