Upsells 블록은 여러분이 선택한 Strategy가 고른 상품 제안을 카트 드로어에 표시해요. 쇼핑객이 카트를 열면, 블록은 현재 카트 내용과 구성한 타겟팅 규칙을 기반으로 Strategy가 반환하는 상품을 보여줘요.
쇼핑객이 카트를 여는 순간에 관련성 높은 상품 제안을 표시하여 평균 주문 금액을 높이세요. Strategy가 카트 내용과 타겟팅 규칙을 기반으로 표시할 항목을 선택해요.
항상 여러분이 선택한 하나의 상품을 표시하는 Product add-on 블록과 달리, Upsells는 표시할 항목을 결정하는 Strategy에 의해 구동돼요.
동작
- 상품은 쇼핑객의 현재 카트를 기반으로 실시간으로 가져오므로, 제안이 실제 카트 내용을 반영해요.
- 상품이 하나도 확인되지 않으면 전체 섹션이 숨겨져요 — Strategy가 연결되지 않았거나, Strategy가 아무것도 반환하지 않거나, 반환된 상품 중 구매 가능한 것이 없는 경우예요. 쇼핑객이 빈 Upsells 섹션을 보는 일은 없어요.
- 반환된 제안에 할인이 포함되어 있으면 쇼핑객은 정직한 취소선과 할인 배지를 보게 되고, 할인은 체크아웃 시 적용돼요.
설정
지원되는 리뷰 앱
디자인
텍스트 스타일
스타일을 지정할 수 있는 텍스트 요소는 카테고리별로 그룹화되어 있어요:
Heading
- Heading — 업셀 카드 위의 섹션 헤딩이에요(예: You may also like). 커스텀 폰트 패밀리도 지원해요. 굵기와 색상은 위의 Rich Text Editor에서 설정해요.
- Product title — 각 업셀 카드의 상품 이름이에요.
- Review count — Show product reviews가 활성화되었을 때 표시되는 리뷰 수예요.
- Price — 각 카드의 현재 가격이에요.
- Compare-at price — 취소선 처리된 원래 가격이에요.
- Discount — 할인 라벨이에요(예: 20% off).
타일 색상
리뷰
배치 및 제한
- 영역: 본문(body) 또는 하단(bottom).
- 최대: 카트 상태당 1개 — 채워진 카트와 빈 카트가 각각 하나씩 가질 수 있어요.
- 상태: 채워진 카트와 빈 카트 모두.
- 기본으로 추가되지 않아요. 잠겨 있지 않아 제거하거나 숨길 수 있어요.
전략 선택하기
- Create strategy from selected products — 특정 상품을 직접 선택하면 Strategy가 자동으로 생성돼요.
- Create strategy from scratch — 카트 에디터를 떠나지 않고 규칙을 만들 수 있도록 Strategy 에디터를 열어요.
- Shopify AI recommendations — Shopify 자체 추천을 기반으로 하는 Strategy를 생성하며, 이후 모든 곳에서 Shopify AI recommended products라는 이름으로 표시돼요. 스토어에는 하나의 Shopify AI 전략만 필요하기 때문에, 이미 있으면 이 항목은 사라져요.
- 기존 Strategy들이 이름별로 나열돼요. 검색 필드에 입력해서 필터링하세요.
선택된 전략 관리하기
- Edit strategy — 새 탭에서 Strategy 에디터를 열어, 카트 에디터 세션과 저장하지 않은 변경 사항이 그대로 유지돼요. 이 옵션은 자동으로 관리되고 편집 가능한 규칙이 없는 Shopify AI 추천 전략에는 제공되지 않아요.
- Remove from upsell — 이 블록에서 Strategy를 분리해요. Strategy 자체는 삭제되지 않고 Strategies 목록에 그대로 남아 있어요.
커스텀 템플릿
블록 콘텐츠
카트에 추가하기
캐러셀 컨트롤
layout이 'carousel'일 때만 해당돼요.
업셀 카드
upsells의 각 항목:
variants의 각 항목은 id, title, price와 compareAtPrice(원시, 미포맷, 통화의 주 단위 문자열), availableForSale, imageUrl, sku, selectedOptions([{ name, value }])를 가져요.
priceLabel과 compareAtLabel은 이미 표시용으로 포맷되어 있고, variants[].price와 variants[].compareAtPrice는 통화의 주 단위 원시 문자열이에요. 둘을 섞지 마세요: 레이블은 표시용으로 쓰고, 원시 값은 비교에만 사용하세요.