✅ [디자인블럭] he17 : 함께 팔기 – 구성 상품과 함께 혜택도 강조!
🔠 블럭개요
메인 제품과 함께 구매 시 더 좋은 관련 상품들을 묶어 제안하는 구성 블럭입니다. 쿠폰 혜택 메시지와 함께 제품 라인업을 보여주어 구매 전환율을 높이는 전략형 디자인입니다.
📌 사용목적
• 관련 제품을 세트로 제안해 객단가 상승 유도
• 고객이 실사용에 필요한 구성품을 한눈에 확인
• 쿠폰, 혜택 메시지를 상단에 배치해 구매 심리 자극
🎨 디자인 특징
• 2~4개 구성의 유연한 카드 레이아웃
• 제품 이미지 위 리본 오버레이 디자인으로 포인트 부여
• 상단 타이틀 섹션에서 해시태그와 혜택 메시지 강조
• 카드별 컬러 구분으로 제품 간 시각적 분리 효과
• 반응형 구성 – 모바일에서도 2단 정렬로 깔끔한 UI 유지
❄️ 활용 예시 (제품/브랜드 등)
• 식품 브랜드 / 프리미엄 해산물 세트
“킹크랩만 구매하려다 해물탕 키트랑 소스까지 함께 담았어요. 딱 필요한 조합!”
“모듬조개 구성도 알차고, 할인 쿠폰 덕분에 전부 부담 없이 구입했어요.”
→ 메인 제품 + 활용 키트/소스류를 묶어 추천할 때 효과적
• 생활용품 / 주방 도구 브랜드
“칼만 사려다가 도마랑 세척솔까지 할인받고 함께 샀어요.”
“추천 묶음 구성이 보이니 선택이 쉬워졌어요.”
→ 용도 연계 상품들을 함께 소개해 자연스러운 번들 구매 유도
• 뷰티 / 스킨케어 브랜드
“세럼만 보려다가 클렌저랑 마스크팩도 함께 담았어요.”
“구성별 혜택 안내가 잘 보여서 고르기 편했어요.”
→ 단품 + 세트 구성으로 업셀링 유도 시 사용
• 전자제품 / 주방가전 브랜드
“전기그릴만 필요했는데 전용 팬이랑 기름받이 세트가 할인돼서 같이 샀어요.”
“꼭 필요한 구성품만 모아 제안해주니 실용적이에요.”
→ 주요 기기 + 전용 액세서리 함께 제안 시 적합
• 교육 / 키즈 제품 브랜드
“교재만 주문하려다가 연습노트랑 스티커까지 같이 샀어요.”
“쿠폰 할인으로 전부 챙기니 알뜰하게 구매한 느낌이에요.”
→ 메인 교재 + 연계된 부가 콘텐츠를 함께 구성 가능
📢 마케팅 콘텐츠 확장 예시
• SNS 이벤트 홍보
쿠폰 적용 상품을 카드뉴스 형식으로 슬라이드 제작 후 프로모션 진행
• 이메일 뉴스레터
할인되는 구성 상품을 정리해 '놓치면 손해인 세트 제안'으로 발송
• 팝업 배너 또는 팝업 창
사이트 접속 시 “함께 사면 할인!” 메시지를 팝업으로 띄워 유입률 강화
• 상세페이지 중간 제안
제품 설명 중간에 이 블럭을 배치해, 구성품을 자연스럽게 소개하고 구매 유도
• 상품 상세 하단 번들 구성 안내
하단에 묶음 구매 혜택 또는 "이 상품과 함께 많이 구매한 제품" 영역으로 삽입
💻 HTML 설명
기본 구조
– .row > .col-* 구조를 통해 카드 레이아웃 4개까지 유연하게 대응
– 상단에는 .titArea로 타이틀 메시지와 해시태그 제공
이미지 영역
– imgArea 내부에 overlay-img를 중첩해 리본 형태의 오버레이 이미지 삽입
– ribbon-text로 제품명을 강조하며 시각적 식별력 제공
텍스트 영역
– .txtArea 안에 제품명(h4)과 설명문(.desc) 배치
– 강조 색상(빨강 계열)으로 주요 상품명을 시각적으로 강조
스타일 요소
– 카드별 여백 및 그림자 처리 없이 깔끔한 평면 스타일 유지
– 반응형 설정으로 모바일에서 1~2단 정렬로 자동 전환
사용자 설정 옵션
– .row>div:nth-of-type(4) 설정으로 4번째 카드 숨김도 가능 (주석 처리 해제 시 적용됨)
👉 커스터마이징 팁
• 카드 개수 조정 – 2개, 3개, 4개까지 유연하게 확장 가능 (col-lg-4 기준 조절)
• 리본 디자인 교체 – 리본 이미지 또는 색상 변경으로 브랜드 스타일 맞춤 적용
• 상품명 강조 컬러 변경 – 브랜드 메인 컬러 적용 시 시각적 통일감 상승
• 쿠폰 텍스트 수정 – #회원전용 등 해시태그 문구를 상황에 맞게 바꿔 활용
• 다국어 대응 가능 – 제품명 및 설명 텍스트를 다국어로 쉽게 수정 가능
html
<!-- he17 : 함께 팔기 -->
<div class="he17">
<div class="row">
<!-- 타이틀 영역 -->
<div class="col-12">
<div class="titArea">
<h3 class="title">
바로 사용 가능한<br>
특별 쿠폰 혜택!
</h3>
<p>
#회원전용 #즉시할인 #혜택챙기기
</p>
</div>
</div>
<!-- 카드 1 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="box">
<div class="box_inner">
<div class="imgArea">
<div class="overlay-img">
<img src="{{$template}}/img/_hes/he17/he17_overlay01.png" alt="리본">
<div class="ribbon-text">킹크랩</div>
</div>
<img src="{{$template}}/img/_hes/he17/he17_img01.jpg" alt="킹크랩">
</div>
<div class="txtArea">
<h4>킹크랩</h4>
<p class="desc">
자숙 상태 그대로!<br>
속살 꽉 찬 통킹크랩
</p>
</div>
</div>
</div>
</div>
<!-- 카드 2 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="box">
<div class="box_inner">
<div class="imgArea">
<div class="overlay-img">
<img src="{{$template}}/img/_hes/he17/he17_overlay02.png" alt="리본">
<div class="ribbon-text">해물탕 키트</div>
</div>
<img src="{{$template}}/img/_hes/he17/he17_img02.jpg" alt="킹크랩">
</div>
<div class="txtArea">
<h4>해물탕 키트</h4>
<p class="desc">
손질 NO, 준비 끝!<br>
육수부터 재료까지 완벽 구성
</p>
</div>
</div>
</div>
</div>
<!-- 카드 3 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="box">
<div class="box_inner">
<div class="imgArea">
<div class="overlay-img">
<img src="{{$template}}/img/_hes/he17/he17_overlay03.png" alt="리본">
<div class="ribbon-text">소스류</div>
</div>
<img src="{{$template}}/img/_hes/he17/he17_img03.jpg" alt="킹크랩">
</div>
<div class="txtArea">
<h4>전용 소스</h4>
<p class="desc">
입맛 살리는 소스 조합<br>
간장/초장/양념장 3종
</p>
</div>
</div>
</div>
</div>
<!-- 카드 4 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="box">
<div class="box_inner">
<div class="imgArea">
<div class="overlay-img">
<img src="{{$template}}/img/_hes/he17/he17_overlay04.png" alt="리본">
<div class="ribbon-text">모듬조개</div>
</div>
<img src="{{$template}}/img/_hes/he17/he17_img04.jpg" alt="킹크랩">
</div>
<div class="txtArea">
<h4>모듬조개</h4>
<p class="desc">
싱싱함이 살아있다!<br>
홍합, 가리비, 바지락까지
</p>
</div>
</div>
</div>
</div>
</div>
</div>
css
/*****************************************************************
he17 : 함께 팔기
*****************************************************************/
.he17 {
padding: 0px 0;
}
.he17 .row {
padding: 50px 10px;
background-color: #fff;
}
.he17 .row>div {
padding: 5px;
}
.he17 .box {
position: relative;
overflow: hidden;
background-color: #fff;
}
.he17 .box_inner {
display: flex;
flex-direction: column;
height: 100%;
}
/* 타이틀 영역 */
.he17 .titArea {
margin: 20px 0;
text-align: center;
}
.he17 .titArea .title {
font-weight: 700;
font-size: 3.0em;
}
.he17 .titArea p {
font-weight: 500;
font-size: 1.50em;
color: #666;
}
/* */
.he17 .imgArea {
position: relative;
margin: auto;
text-align: center;
padding: 0px;
width: 100%;
}
.he17 .imgArea img {
width: 100%;
}
/* */
.he17 .imgArea .overlay-img {
position: absolute;
top: 0%;
left: 0%;
/* transform: translate(-50%, -50%); */
z-index: 2;
pointer-events: none;
width: 100%;
height: 100%;
}
.he17 .imgArea .overlay-img img {
width: 100%;
height: auto;
opacity: 1.0;
}
.he17 .imgArea .overlay-img .ribbon-text {
position: absolute;
top: 18%;
left: 17%;
transform: translateX(-50%) rotate(-45deg);
transform-origin: center center;
font-size: 1.5em;
font-weight: 700;
color: #fff;
white-space: nowrap;
z-index: 3;
pointer-events: none;
text-align: center;
}
/* */
.he17 .txtArea {
background-color: #fff;
text-align: center;
margin: 0 0 30px 0;
/* border-radius: 50px 50px 0px 0px; */
}
.he17 .txtArea h4 {
font-weight: 700;
font-size: 2.0em;
color: #d80000;
}
.he17 .txtArea .desc {
font-size: 1.250em;
color: #888;
}
/* */
@media screen and (min-width: 768px) {
.he17 .imgArea .overlay-img .ribbon-text {
font-size: 1.0em;
}
}
/* he17 블럭 내 카드 4번 숨김 처리 */
.he17 .row>div:nth-of-type(4),
.he17 .row>div:nth-of-type(4) {
/* display: none; */
}
'디자인블럭' 카테고리의 다른 글
| [디자인블럭] he19 : 프로모션 정보 시각화형 혜택 안내 블럭 (3) | 2025.08.11 |
|---|---|
| [디자인블럭] he18 : 사은품 – 구매 금액별로 더해지는 감동 혜택! (9) | 2025.08.10 |
| [디자인블럭] he16 : 추천 대상 – 이런 분들께 딱 맞아요! (6) | 2025.08.08 |
| [디자인블럭] he15 : 활용/레시피 – 상황별 맞춤 제안형 콘텐츠 블럭 (10) | 2025.08.07 |
| [디자인블럭] he14 : 품질 인증/테스트 – 과학적 검증을 시각화해 신뢰도를 높이는 정보 카드형 블럭 (5) | 2025.08.06 |
