스토어 앱 · 설정 가이드
GraphicMeat Smart Cart 설정 가이드시나리오 16개를 앱에서 설정하는 부분과 테마 편집기에서 설정하는 부분으로 나누고, 실제 화면에 보이는 라벨을 그대로 사용했습니다. 필요한 시나리오만 읽으세요. 다른 시나리오를 읽었다고 가정하지 않습니다.
Smart Cart는 두 곳에서 설정합니다. 리워드 단계와 업셀 규칙은 Shopify admin 안의 앱에서 관리하고(백엔드), 드로어 자체와 문구, 공지 바, 업셀 선택, 카운트다운은 테마 app embed의 설정입니다(프런트엔드). 아래 모든 시나리오는 이 방식으로 나뉘어 있으며, 정확한 라벨이 함께 표시됩니다.
읽는 방법. 각 시나리오에는 두 개의 열이 있습니다. 백엔드 는 Shopify admin 안의 앱이며, 프런트엔드 는 테마 편집기와 쇼핑객이 스토어프런트에서 보는 화면입니다. 굵게 표시된 라벨은 화면에 나오는 정확한 이름입니다. 프런트엔드 열이 비어 있으면 스토어프런트에 아래에서 한 번 켜는 app embed 외에는 필요한 것이 없다는 뜻입니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
| 설정 | 주요 기능 | 기본값 |
|---|---|---|
| Drawer title | 드로어 상단의 제목. | 장바구니 |
| Checkout button | 체크아웃 버튼의 텍스트. | 체크아웃 |
| Open drawer from cart links | 장바구니 아이콘과 모든 장바구니 링크가 드로어를 열며, 드로어가 /cart 페이지도 대체합니다. 끄면 드로어는 장바구니에 담은 뒤에만 열립니다. | 켜짐 |
| Show remove button on cart items | 항목마다 휴지통 아이콘. 어느 쪽이든 − 스테퍼로 0까지 줄일 수 있습니다. | 켜짐 |
| Slide in from | Right 또는 Left. | Right |
| Accent color | 진행 바, 칩, 버튼, 번들 라벨. | #1a7f37 |
| Upsell products | “You may also like” 목록에 표시할 상품(최대 8개), 우선순위 순. | 없음 |
| Max upsells shown | 한 번에 표시할 개수, 1–6. | 3 |
| Announcement text | 드로어 상단의 바. 비워 두면 숨겨집니다. | 비어 있음 |
| Announcement link (optional) | 바를 링크로 만듭니다. | 없음 |
| Starts at / Ends at (ISO date, optional) | 바의 일정, 예: 2026-07-01T00:00:00Z; 비워 두면 항상 표시. | 비어 있음 |
| Deadline (ISO date, optional), under Urgency countdown (Pro) | 장바구니 항목 위에 표시되는 카운트다운. Pro 요금제가 필요합니다. | 비어 있음 |
| 페이지 | 들어 있는 내용 |
|---|---|
| Home | 창출한 매출(최근 30일 / 전체 기간), 스위트 전체 매출, Setup checklist, 그리고 Open theme editor. |
| Rewards | 최대 5개 단계: Cart amount, Reward label, Select gift; Gamified display; Add tier; Save. |
| Upsell rules | 형제 앱을 위한 규칙: Select trigger products (optional), Select upsell products, Discount %; Save & publish. |
| Plan | Upgrade to Pro (월 $9.99, 14일 체험) 및 Switch to Free. |
| Help / Support | 앱 내 문서와 지원 양식. 메시지는 스튜디오로 전달됩니다. |
테마의 장바구니 드로어를 Smart Cart로 바꿉니다. 아직 다른 것은 없습니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
장바구니 아이콘, 장바구니 링크, 모든 장바구니 담기가 Smart Cart를 열고, 테마 자체 드로어는 닫힌 상태로 유지됩니다.
장바구니 아이콘을 연속으로 네 번 클릭하세요. 매번 열립니다. 상품을 담으면 드로어가 저절로 열립니다.
데모 스토어에서
공지 바가 혜택을 알려 주고, 칩은 무료 배송을 이미 달성했고 무료 스티커 팩까지 $52.03 남았음을 보여 주며, 바는 단계마다 초기화되지 않고 단계에 걸쳐 계속 채워집니다. 모든 항목에는 번들 라벨, 수량 스테퍼, 삭제 버튼이 있고, You may also like 아래의 추천 상품은 직접 고른 것입니다.
“Add $12.03 more to unlock free shipping” 문구가 표시되며, 장바구니가 커질수록 채워집니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
단계용 칩, “Add $X more to unlock Free shipping” 줄, 진행 바가 표시되며, 소계가 $50를 넘으면 칩에 체크가 표시됩니다. GraphicMeat Smart Cart 페이지의 전체 페이지 캡처.
$40 장바구니 → 바가 일부만 채워짐, 상품을 추가해 $50를 넘기면 → 칩이 체크되고 체크아웃에 무료 배송이 표시됩니다.
소계가 $150을 넘는 순간에만 스티커 팩이 무료로 장바구니에 담깁니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
이미 켜져 있는 app embed 외에는 필요한 것이 없습니다.
$150를 넘으면 드로어가 사은품을 가격이 “Free”인 실제 장바구니 항목으로 추가하고, Shopify Function이 체크아웃에서 장바구니를 다시 확인해 $0로 할인합니다. 기준 아래로 내려가면 드로어가 사은품을 다시 제거합니다.
$160 장바구니 → 드로어와 체크아웃에 사은품 항목이 $0로 표시됩니다. 상품을 빼서 $150 아래로 내려가면 → 사은품이 사라집니다.
데모 스토어에서
$150 단계를 넘으면 두 칩이 모두 체크되고, 축하 문구가 나오며, 무료 스티커 팩이 가격 Free인 실제 장바구니 항목으로 추가됩니다. 같은 기준값이 체크아웃에서 Shopify Function으로 적용되므로 드로어는 주문이 자격을 갖추지 못한 사은품을 절대 약속할 수 없고, 장바구니가 다시 기준 아래로 내려가면 드로어가 사은품을 다시 빼 줍니다.
$50에서 무료 배송, $150에서 사은품, $300에서 더 좋은 사은품. 각 단계가 열릴 때마다 칩에 체크가 표시됩니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
이미 켜져 있는 app embed 외에는 필요한 것이 없습니다.
칩이 한 줄로 표시되며, 잠긴 칩에는 아직 필요한 금액이 보입니다. 진행 바는 단계마다 초기화되지 않고 단계에 걸쳐 부드럽게 채워집니다. GraphicMeat Smart Cart 페이지의 전체 페이지 캡처.
기준을 넘으면 칩에 체크가 표시되고 축하 효과가 한 번 나옵니다. 아래로 내려갔다가 다시 넘으면: 다시 열리기 전에는 두 번째 축하 효과가 없습니다.
세일 기간 동안 드로어에 표시되는 초록색 바.
백엔드 · 앱에서
이 시나리오는 앱에서 설정할 것이 없습니다.
프런트엔드 · 테마 편집기 & 스토어프런트
2026-07-01T00:00:00Z; 비워 두면 항상 켜짐.바는 지정한 기간 안에서만 드로어 상단에 표시되며, 빈 장바구니도 포함됩니다. GraphicMeat Smart Cart 페이지의 전체 페이지 캡처.
종료 시각을 몇 분 뒤로 설정하세요. 그 시각 이후 드로어를 다시 열면 바가 사라집니다.
빈 장바구니에서도 한 번 탭으로 담을 수 있는 Add 버튼과 함께 캡과 후디를 보여 줍니다.
백엔드 · 앱에서
이 시나리오는 앱에서 설정할 것이 없습니다.
프런트엔드 · 테마 편집기 & 스토어프런트
항목 아래(그리고 빈 장바구니 메시지 아래)에 Add 버튼이 있는 “You may also like” 목록이 표시되며, 상품은 정상 가격으로 담깁니다.
추천 상품 중 하나를 담으세요. 목록에서 빠지고 다음 상품이 그 자리를 채웁니다.
여기서 담은 항목에는 드로어 출처 표시가 붙으며, 이것이 Smart Cart의 귀속 매출로 집계됩니다.
데모 스토어에서
장바구니가 비어 있으면 드로어에 공지와 직접 고른 추천 상품이 한 번 탭으로 담을 수 있는 Add 버튼과 함께 표시됩니다. 어떤 상품을, 어떤 순서로, 한 번에 몇 개 보여 줄지는 테마 편집기 설정이며, 모델이 대신 추측하지 않습니다.
스위트의 나머지 앱에 무엇과 함께 무엇을, 어떤 할인율로 제안할지 알려 줍니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
이미 켜져 있는 app embed 외에는 필요한 것이 없습니다.
드로어에서는 달라지는 것이 없습니다. 드로어의 목록은 위의 테마 편집기 선택에서 가져옵니다. 규칙은 형제 앱의 오퍼를 구동하므로, 한 번 수정하면 모든 화면이 일관되게 유지됩니다.
Popups나 Post Purchase를 설치했다면 해당 앱의 오퍼 화면에 같은 상품과 할인율이 표시됩니다.
세일 기간 동안 장바구니 항목 위에 “Offer ends in 2d 4h 12m”이 표시됩니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
2026-08-31T23:59:00Z → Save.해당 시각까지의 실시간 카운트다운이 표시되며, 0이 되면 “ended”로 바뀝니다. Pro가 없으면 이 필드는 무시됩니다.
드로어를 열면 시계가 매초 움직입니다. 마감 시각을 1분 뒤로 설정하고 만료되는 모습을 확인하세요.
단계까지 1개가 모자라는 장바구니 항목 아래에 “Add 1 more, save 15%” 유도 문구가 표시됩니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
이미 켜져 있는 app embed 외에는 필요한 것이 없습니다.
항목에 1개를 더 담으면 얻는 절약액을 알리는 유도 문구와 그것을 담는 버튼이 표시되고, 오퍼에 속한 항목에는 번들 라벨 배지가 나타납니다. GraphicMeat Smart Cart 페이지의 전체 페이지 캡처.
2개 이상 단계가 있는 상품을 1개 담으세요. 유도 문구가 나타납니다. 누르면 수량이 2가 되고 체크아웃에 할인이 표시됩니다.
쇼핑객이 장바구니를 떠나지 않고 항목을 구독으로 바꿀 수 있게 합니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
이미 켜져 있는 app embed 외에는 필요한 것이 없습니다.
상품에 판매 플랜이 있는 항목에는 배송 주기 선택기가 표시되며, 이를 바꾸는 것은 플랜이 연결된 일반적인 장바구니 변경입니다.
항목을 “Every month”로 바꾸면 체크아웃에 구독 가격과 일정이 표시됩니다.
/cart에 들어온 쇼핑객(URL, 북마크, 체크아웃의 이동 경로)도 두 번째 장바구니가 아니라 같은 드로어를 봅니다.
백엔드 · 앱에서
이 시나리오는 앱에서 설정할 것이 없습니다.
프런트엔드 · 테마 편집기 & 스토어프런트
어디서나 하나의 장바구니. 드로어 뒤의 테마 장바구니에는 Shopify가 적용한 번들 가격이 이미 표시되어 있습니다.
주소창에 /cart를 입력하면 그 위로 드로어가 열리고, 닫으면 이전 페이지로 돌아갑니다.
데모 스토어에서
URL이나 체크아웃의 이동 경로(breadcrumb)로 /cart에 들어가면 테마 자체의 장바구니 페이지 위로 드로어가 열려, 쇼핑객은 어디서나 하나의 장바구니를 보게 됩니다. 그 뒤에서는 체크아웃에 닿기 전에 Shopify가 이미 번들 가격을 적용해 둔 상태입니다($69.99였던 것이 $63.99).
팝업과 드로어가 화면을 두고 다투지 않게 합니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
이미 켜져 있는 app embed 외에는 필요한 것이 없습니다.
GraphicMeat 팝업이 표시되는 동안 드로어는 자동 열림을 미루고, 팝업이 닫히면 열립니다. 팝업이 부여한 할인 코드는 드로어에 “code applied” 안내로 표시됩니다.
팝업을 띄우고 그 뒤에서 상품을 담으세요. 드로어는 기다립니다.
드로어의 문구와 모양을 스토어의 나머지 부분과 맞춥니다.
백엔드 · 앱에서
이 시나리오는 앱에서 설정할 것이 없습니다.
프런트엔드 · 테마 편집기 & 스토어프런트
드로어는 테마의 글꼴과 스토어의 통화 형식을 상속합니다. 그 밖의 라벨(“You may also like”, “Add”, “Your cart is empty”)은 현재 영어입니다.
저장한 뒤 스토어프런트를 새로고침하세요. 임베드 설정은 다음 페이지 로드부터 적용됩니다.
드로어가 한 모든 약속이 체크아웃에서 지켜지는지 확인합니다.
백엔드 · 앱에서
이 시나리오는 앱에서 설정할 것이 없습니다.
프런트엔드 · 테마 편집기 & 스토어프런트
모든 기준값은 두 번(드로어와 체크아웃 Function) 검증되므로 이 확인 과정에서 서로 어긋나는 일은 없어야 합니다.
마지막 체크아웃은 테스트 주문이나 결제 게이트웨이의 테스트 모드로 진행하세요.
드로어가 얼마나 벌었는지, Pro가 언제 필요해지는지 확인합니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
이미 켜져 있는 app embed 외에는 필요한 것이 없습니다.
Pro 전용 스토어프런트 기능은 번들 레일과 카운트다운이며, 나머지는 모두 무료로 유지됩니다.
업그레이드하면 Home에 “Pro plan active — bundle rail and urgency countdown enabled”라고 표시됩니다.
테마 장바구니로 일시적으로 또는 영구히 되돌립니다.
백엔드 · 앱에서
프런트엔드 · 테마 편집기 & 스토어프런트
다음 페이지 로드부터 테마 자체의 드로어와 장바구니 페이지가 다시 사용됩니다.
장바구니 아이콘을 클릭하면 테마의 드로어가 열립니다.
Z).다음을 통해 메시지를 보내 주세요: 문의 양식 (앱을 만든 사람이 직접 답변합니다). FAQ 는 요금, 귀속 매출, 데이터를 다루고, 앱 페이지 는 위의 모든 시나리오를 데모 스토어에서 실제로 보여 줍니다.