Request a Quote 페이지

앱에서는 이 페이지를 Quote cart page라고 부릅니다. 스토어프런트에서는 제목이 “Request for quote”이고 경로가 /pages/request-for-quote인 페이지이며, 앱은 이 페이지를 “Shows the quote form and the customer’s quote cart.“라고 설명합니다.

요청이 실제로 전송되는 곳입니다. 고객은 담은 모든 제품을 확인하고, 수정하고, 양식을 작성한 다음 제출합니다.

페이지 설정 찾기

1. Customize 편집기 열기

   Quote settings로 이동합니다. Request a Quote 페이지에서 Customize를 클릭합니다.

2. Quote cart page 탭 열기

   편집기에는 Button & widget, Quote form, Quote cart page, Success message의 네 개 탭이 있습니다. 이 페이지의 모든 설정은 Quote cart page 탭에 있습니다.

3. Pages 섹션이 올바른 페이지를 가리키게 하기

   단순히 읽는 것이 아니라 직접 확인해야 하는 설정입니다. Pages에는 두 개의 페이지 선택기가 있습니다. Quote cart page(“Shows the quote form and the customer’s quote cart.”)와 Quote history page(“Shows a logged-in customer’s past quotes.”)입니다.

   Quote cart page를 클릭합니다. Search by page title or URL 상자와 스토어 페이지의 Select page 목록이 있는 패널이 열리며, 각 페이지의 제목, 경로, Published 또는 Draft 배지가 표시됩니다. Request for quote — /pages/request-for-quote를 선택하세요.

   검색 결과가 없으면 목록 대신 Create page automatically가 표시됩니다.

   

   견적 장바구니 페이지는 이 탭에서 설정합니다.

4. 저장하기

   편집기에서 변경한 내용은 저장하기 전에는 적용되지 않습니다. 무엇이든 변경하면 상단에 저장 바가 나타나며, 여기서 Save를 클릭하세요.

   저장하지 않은 작업이 있는 상태에서 나가려고 하면 앱이 “Discard all unsaved changes”라는 메시지와 함께 “If you discard changes, you’ll delete any edits you made since you last saved.“라고 경고합니다. 변경 내용을 정말 버리려는 것이 아니라면 Continue editing을 선택하고 저장하세요.

위험

선택기에 Draft로 표시된 페이지는 Shopify에서 게시되지 않은 상태이므로, 앱을 어떻게 설정하든 고객에게는 Not Found가 표시됩니다. 먼저 온라인 스토어 > 페이지에서 페이지를 게시하세요.

고객을 이 페이지로 보내기

페이지를 설정했다고 해서 고객이 저절로 이 페이지에 오는 것은 아닙니다. 설정할 경로는 두 가지이며, 각각 Save로 마무리한 다음 스토어프런트에서 확인합니다.

경로 1 — 견적 버튼에서 바로 이동시키기

1. Button & widget 탭 열기

   Customize에서 Button & widget 탭을 클릭합니다.

2. Click action을 Redirect to quote page로 설정하기

   Click action 제목 아래에서 Redirect to quote page를 선택합니다. 앱의 안내 문구는 “Go directly to quote cart page”입니다. 나머지 두 가지, Open quote form popup과 Add product to quote cart는 고객을 현재 페이지에 그대로 둡니다.

   

   참고

   이 탭 아래쪽에는 Add to quote 제목도 있습니다. 여기에는 편집 가능한 가격, 옵션 선택기, 로그인 필수 설정의 체크박스가 있으며 리디렉션 설정은 없습니다. “Add to quote”를 가리키는 이전 안내를 따르고 있다면, 탭의 더 위쪽을 확인하세요.

3. 이동할 페이지 확인하기

   Quote cart page 탭으로 돌아가 위에서 설명한 대로 Pages > Quote cart page가 Request for quote를 가리키는지 확인하세요. 리디렉션과 페이지 설정은 두 곳에 나뉜 하나의 작업입니다. 한쪽만 설정하면 버튼이 고객을 엉뚱한 곳으로 보냅니다.

4. 저장한 후 고객 입장에서 시험하기

   Save를 클릭합니다. 그런 다음 스토어프런트에서 제품 페이지를 열고 견적 버튼을 클릭하세요. 해당 제품이 이미 견적 장바구니에 담긴 상태로 /pages/request-for-quote로 이동해야 합니다.

경로 2 — 플로팅 위젯에서 열기

1. Enable Quote Cart Widget 열기

   Quote cart page 탭에서 Enable Quote Cart Widget까지 스크롤합니다. “Shows a floating button on your storefront so customers can open their quote cart from any page.”

2. 위젯 켜기

   Enable quote cart widget을 켭니다. 나머지 설정은 위젯을 켠 후에야 나타납니다.

3. Action을 견적 장바구니 페이지로 설정하기

   Action은 클릭했을 때의 동작을 결정합니다. Go to quote cart page를 선택하세요. 앱 버전에 따라 같은 옵션이 Go to quote page로 표시되기도 합니다. 다른 선택지인 Open quote popup은 견적을 팝업으로 열며 고객을 이 페이지로 이동시키지 않으므로, 의도한 경우에만 선택하세요.

   많은 분이 놓치는 설정입니다. 위젯을 켜 놓고 Open quote popup으로 둔 채로 두면 견적 페이지로 가는 링크가 고장 난 것처럼 보입니다.

4. 문구와 모양 설정하기

   Text는 위젯에 표시되는 레이블입니다. Position은 위치를 정합니다. Bottom right, Half bottom right, Half top right, Bottom left, Half bottom left, Half top left 중에서 선택할 수 있습니다. Border radius, Text color, Background color로 스타일을 마무리하며, 팝업 동작을 선택했다면 Quote popup primary color가 적용됩니다.

5. 저장한 후 고객 입장에서 시험하기

   Save를 클릭합니다. 스토어프런트의 아무 페이지나 열어 보세요. 플로팅 위젯이 표시되어야 하며, 기본적으로 Quote (n) 형태로 담긴 항목 수가 함께 표시됩니다. 클릭하면 견적 장바구니 페이지로 바로 이동해야 합니다.

참고

두 경로는 함께 사용할 수 있습니다. 고객이 여러 제품을 담는 스토어라면 보통 버튼에는 Add product to quote cart를 설정하고 위젯도 함께 켜서, 페이지가 항상 한 번의 클릭으로 닿는 곳에 있게 합니다. 플로팅 견적 위젯과 클릭 후 동작 설정하기를 참고하세요.

고객에게 보여 줄 제품 정보 선택하기

Product list columns는 “The product details shown as columns in the customer’s quote cart.“를 제어합니다. 클릭하면 Search product columns 상자와 Choose Product list columns 아래의 열 목록이 있는 선택기가 열립니다. 선택한 열은 칩으로 추가되며, 칩을 제거해 다시 뺄 수 있습니다.

전체 목록은 Vendor, SKU, Option, Price, Quote prices, Total, Subtotal, Note입니다. 이 설정을 한 번도 변경한 적이 없다면 Option과 Price가 사용 중입니다.

열	표시하면 좋은 경우
Vendor	여러 브랜드를 재판매하고 구매자가 브랜드별로 주문하는 경우
SKU	구매자가 코드로 주문하는 경우 — 거래처와 도매 고객은 대개 그렇습니다.
Option	제품에 옵션이 있어 고객이 어떤 옵션을 선택했는지 확인해야 하는 경우
Price	정가를 공개하고 있으며 고객이 요청을 작성하는 동안 볼 수 있게 하려는 경우
Quote prices	고객이 희망 가격을 직접 제시하도록 허용하는 경우 — 고객이 가격 제안하게 하기 참고
Total	고객이 대량으로 주문하며 품목별 합계가 요청 규모를 가늠하는 데 도움이 되는 경우
Subtotal	품목별이 아니라 요청 전체의 금액이 필요한 경우
Note	고객이 마감 처리, 납기, 대체품 등 개별 품목에 대해 전달할 내용이 있는 경우

견적 장바구니가 사용할 스토어프런트 페이지를 선택합니다.

참고

스토어프런트에서 가격을 숨기고 있다면 여기서도 Price와 Total을 꺼 두세요. 견적 장바구니에 가격을 표시하면 다른 곳에서 가격을 숨긴 의미가 없어집니다.

주의

Total과 Subtotal은 최신 스토어프런트 버전에서만 제공됩니다. 목록에서 찾을 수 없다면 그 때문입니다. 나머지 여섯 개는 항상 표시됩니다.

양식 레이아웃 선택하기

Quote form appearance는 “Controls how the quote form looks on the quote cart page.“를 제어합니다. 두 가지 선택지가 있습니다.

옵션	고객에게 보이는 화면	적합한 경우
Multiple step	양식이 여러 단계로 나뉘어 고객이 한 단계씩 진행합니다.	회사 정보, 배송 및 청구 주소, 결제 조건 등 긴 양식
Single page	모든 필드가 한 화면에 위에서 아래로 표시됩니다.	고객이 한눈에 전체를 볼 수 있는 짧은 양식

참고

긴 양식을 한 페이지에 두면 끝까지 작성하지 않고 포기하는 고객이 생깁니다. 회사와 주소 섹션이 있는 B2B 양식을 만들었다면 Multiple step을 선택하세요.

주의

Single page가 “This feature requires the new storefront version”이라는 메시지와 함께 잠겨 있다면, 요금제 때문도 오류도 아닙니다. 이 선택지는 앱의 최신 스토어프런트 버전이 필요하며, 그 전까지는 페이지가 Multiple step을 사용합니다. 전환을 원하면 지원팀에 문의하세요.

Multiple step 양식의 모습

Multiple step을 선택하면 스토어프런트 페이지가 Request a Quote 제목과 “Tell us what you need and we will contact you soon.” 문구로 시작하고, 번호가 매겨진 세 단계가 이어집니다.

1. Products selection

   Quote Cart에는 고객이 담은 모든 제품이 Product, Quantity, Price, Total 열과 함께 나열됩니다. Enable Quote Sections를 켜면 장바구니 위에 “Products are organized into quote sections.“라는 안내가 표시되고 첫 번째 그룹의 이름은 Section 1입니다.

   이 단계는 Continue Shopping과 Next step으로 끝납니다.

   

   /pages/request-for-quote의 1단계, Products selection

2. Contact information

   이 단계에는 Form builder에서 만든 섹션 — Contact information, Company information, Shipping address가 표시됩니다.

   그 위에는 Login 링크와 함께 “Already have an account? Log in to auto-fill your contact and company information.” 안내가 있습니다.

   

   필드 위에 로그인 안내가 표시된 2단계, Contact information

3. Review information

   마지막 단계는 Review information으로, 고객이 요청을 보내기 전에 제품과 입력한 정보를 확인합니다.

   

   고객이 요청을 보내기 전에 내용을 확인합니다.

팁

“Already have an account? Log in to auto-fill your contact and company information.” 안내는 아직 로그인하지 않은 고객을 위한 것입니다. 로그인하면 앱이 필드를 자동으로 채워 줍니다. 이미 로그인한 고객에게는 로그인할 것이 없습니다.

제출 후 고객에게 보이는 화면

요청이 전송되면 앱이 성공 메시지를 표시합니다. 기본값은 Thank you, “Thank you for submitting a request a quote!”, 그리고 Continue Shopping 버튼입니다.

이 문구는 이 탭에 속하지 않습니다. 같은 Customize 편집기의 Success message 탭에서 설정하며, 고객을 직접 만든 페이지로 보내려면 이 탭의 After submit에서 Redirect to custom URL을 사용할 수도 있습니다.

참고

이메일은 또 별개입니다. Success message 탭에 안내된 대로 “Customer confirmation and admin notification emails are managed in Other settings.“입니다. 고객에게 발송되는 이메일을 참고하세요.

탭의 나머지 설정

설정	기능
Enable Quote Sections	"Lets customers group the products in their quote cart into named sections." 견적 제품 그룹 참고
Enable Quote Cart Widget	"Shows a floating button on your storefront so customers can open their quote cart from any page." 위의 경로 2에서 설정하며, 자세한 내용은 플로팅 견적 위젯에서 다룹니다.

Enable quote sections를 켜면 Default section name과 Customer options 아래의 Add new sections, Rename sections 컨트롤이 추가로 나타납니다. Move products between sections와 Add note per section 두 옵션은 Coming soon으로 표시됩니다.

고객이 페이지에 접근하는 방법

경로	적합한 경우
Click action을 Redirect to quote page로 설정	고객이 보통 한 번에 한 제품만 견적을 요청해서 먼저 담을 것이 없는 경우
Click action을 Add product to quote cart로 설정한 뒤 플로팅 위젯 사용	고객이 둘러보며 여러 제품을 담은 다음 한꺼번에 검토하는 경우
팝업의 Primary button, 기본값 View Quote	제품이 추가될 때마다 확인 메시지를 표시하는 경우
내비게이션 메뉴의 링크	고객이 언제든 다시 돌아올 수 있도록 항상 추가해 두면 좋습니다.

처음 세 가지는 Button & widget 탭에서 설정합니다. 클릭 후 동작 설정하기를 참고하세요. 메뉴 링크는 Shopify 설정입니다. 메뉴에 견적 링크 추가하기를 참고하세요.

주의

페이지에 견적 양식과 견적 장바구니가 표시되지 않는다면 문제 해결을 참고하세요.

다음 단계

• 견적 내역 페이지 — 고객이 이미 보낸 견적을 찾는 곳
• 메뉴에 견적 링크 추가하기 — 내비게이션에서 페이지로 연결
• 견적 페이지 문구 편집하기 — 페이지에 직접 문구 추가