플로팅 견적 위젯

Enable Quote Cart Widget — “Shows a floating button on your storefront so customers can open their quote cart from any page.”

이 위젯은 모든 페이지의 가장자리에 고정된 빠른 견적 버튼입니다. 장바구니 아이콘처럼 작동하며, 고객이 무언가를 추가하면 대기 중인 제품 수가 표시되고, 한 번 클릭하면 견적 장바구니 페이지나 견적 팝업으로 바로 이동합니다. 고객은 페이지를 찾아 헤매지 않고도 담아 둔 항목을 확인하고 양식을 작성할 수 있습니다.

켜기

1. 견적 장바구니 설정 열기

   앱에서 Quote settings로 이동해 Customize를 클릭한 다음 Quote cart page 탭을 엽니다.

2. Enable Quote Cart Widget 켜기

   Enable Quote Cart Widget은 탭의 마지막 블록이며 Enable Quote Sections 아래에 있습니다. 헤더 오른쪽 끝의 토글이 컨트롤입니다. 토글을 켜면 블록이 펼쳐지며 여섯 가지 설정이 표시됩니다.

   

3. 여섯 가지 위젯 설정 지정하기

   Text, Action, Position, Border radius, Text color, Background color를 차례로 설정하세요. 각 항목은 아래 표에서 설명합니다. 오른쪽의 Preview 패널에서 설정을 변경할 때마다 위젯의 모습을 확인할 수 있습니다.

   

   선택할 수 있는 색상은 배경과 텍스트, 두 가지뿐입니다.

   

4. 저장하고 스토어프런트 확인하기

   편집기 오른쪽 상단의 Save를 클릭한 다음 스토어프런트에서 견적에 제품을 추가해 보세요. 화면 가장자리에 Quote와 괄호 안의 제품 수가 표시된 위젯이 나타납니다.

   

   스토어의 모든 페이지에서 고객에게 보이는 위젯.

   

모든 위젯 설정

설정	값과 기본값	기능
Text	기본값은 Quote ({numOfItem})	위젯에 표시되는 문구입니다. {numOfItem}은 고객의 견적에 담긴 제품 수로 대체되어 Quote (3)처럼 표시됩니다. 이 토큰을 지우면 위젯에 수량 없이 일반 라벨만 표시됩니다.
Action	Go to quote cart page · Open quote popup	위젯을 클릭했을 때의 동작입니다. 아래를 참고하세요.
Position	Half bottom right · Bottom right · Half top right · Half bottom left · Bottom left · Half top left	위젯이 붙는 가장자리와 위아래 높이를 정합니다. "Half" 옵션은 화면 측면에 고정하고, Bottom right와 Bottom left는 모서리에 배치합니다.
Border radius	px 단위의 숫자이며 기본값은 0	위젯 모서리의 둥근 정도입니다. 0은 각진 모서리입니다.
Text color	색상	문구의 색상입니다.
Background color	색상	위젯 자체의 색상입니다.

참고

Border radius 필드가 없나요? 스토어가 아직 이 필드를 제공하지 않는 앱의 이전 스토어프런트 코드를 사용 중입니다. 목록의 나머지 항목은 모두 있습니다.

고객이 이동하는 곳

Action이 이를 결정하며, 두 값은 서로 다르게 동작합니다.

Action	고객이 클릭하면 일어나는 일
Go to quote cart page	위젯이 견적 장바구니 페이지로 연결되는 링크가 됩니다. 이 페이지는 /pages/request-for-quote에 있는 스토어프런트 페이지이며 "Shows the quote form and the customer's quote cart."라고 설명됩니다. 고객은 보고 있던 페이지를 벗어납니다.
Open quote popup	이미 보고 있는 페이지 위에 견적 팝업이 열립니다. 고객은 카탈로그에서 보던 위치를 벗어나지 않습니다.

견적 장바구니 페이지와 위젯은 같은 Quote cart page 탭에서 설정하므로, 페이지 자체의 이름과 경로가 위젯 블록 바로 위에 있습니다.

어느 쪽을 선택할지는 고객이 견적을 만드는 방식에 따라 달라집니다. 여러 제품을 담은 뒤 문의하는 경우에는 Go to quote cart page가 더 좋습니다. 견적 장바구니 페이지에는 수량이 포함된 전체 목록이 표시되며, 고객이 확인하려는 것이 바로 그 목록이기 때문입니다. 제품 하나를 추가하고 바로 보낼 준비가 된 경우에는 Open quote popup이 페이지 로딩을 줄여 줍니다.

참고

Click action을 Add product to quote cart로 설정했을 때 위젯이 제 역할을 합니다. 고객이 둘러보면서 제품을 담고, 위젯이 목록으로 돌아가는 통로가 되기 때문입니다. Open quote form popup에서는 요청이 그 자리에서 마무리되므로 중요도가 훨씬 낮습니다. 클릭 후 동작 설정하기를 참고하세요.

위젯이 표시되지 않는 곳

앱은 견적 장바구니 페이지에서는 위젯을 숨깁니다. 고객이 이미 견적을 보고 있으면 연결할 곳이 없기 때문입니다. 스토어프런트의 다른 모든 곳에서는 위젯이 고객을 따라다닙니다.

색상 선택하기

구매 버튼과 충돌하지 않으면서 페이지에서 눈에 띄는 Background color와, 한눈에 읽을 수 있을 만큼 대비가 충분한 Text color를 선택하세요. 휴대폰에서도 확인하세요. 플로팅 요소는 실시간 채팅 말풍선이나 쿠키 배너와 공간을 다투므로, 위젯이 놓이는 위치에서도 잘 읽히는지 확인해야 합니다. 다른 요소와 겹친다면 위젯을 끄지 말고 Position으로 옮기세요. Half top right와 Half top left는 대부분의 채팅 도구가 사용하는 하단 모서리 컨트롤과 겹치지 않습니다.

위젯 텍스트 번역하기

Text에 입력하는 내용은 스토어프런트 텍스트이므로, 고객이 읽는 나머지 항목과 함께 앱의 번역 기능을 거칩니다. 번역된 스토어에서 영어로 두지 말고 해당 기능에서 언어별 문구를 설정하세요. 스토어프런트 텍스트 번역하기를 참고하세요.

도움이 필요하신가요?

위젯이 스토어프런트의 다른 요소와 겹치고 Position으로도 해결되지 않는다면 스크린샷을 보내 주세요. 지원팀에 문의하기를 참고하세요.

다음 단계

• 클릭 후 동작 설정하기 — 제품을 추가할 때의 동작 제어하기
• Request a Quote 페이지 — 위젯이 여는 견적 장바구니 페이지
• 견적 내역 페이지 — 고객이 지난 견적을 찾는 곳