[디자인블럭] he18 : 사은품 – 구매 금액별로 더해지는 감동 혜택!

 

 

 

 

 

✅ [디자인블럭] he18 : 사은품 – 구매 금액별로 더해지는 감동 혜택!

 

 

 

 

 

🔠 블럭개요

구매 금액대별로 사은품을 안내하는 블럭으로, 고객의 구매 단가를 자연스럽게 끌어올리는 마케팅 구성입니다. 금액 기준에 따라 4가지 사은품을 카드형으로 보여주어 명확하고 시각적인 정보 전달이 가능합니다.

 

 

 

 

 

📌 사용목적

• 객단가 상승 유도 – “조금 더 구매하면 더 좋은 사은품!” 전략
• 구매 후 만족도 향상 – 실제 활용도 높은 사은품 구성
• 구매 동기 자극 – 금액별 사은품 정보를 시각적으로 설득력 있게 전달

 

 

 

 

 

🎨 디자인 특징

• 4단 카드형 구성 – 구매 기준별 사은품을 직관적으로 배열
• 카드 상단 ‘금액 배너’ 스타일 강조 – 한눈에 조건 파악 가능
• 사은품 이미지 중심 구성 – 실물 인식 강화
• 반응형 대응 – 모바일에서는 2단 정렬로 자연스럽게 변화
• 여백과 박스 디자인의 정갈한 레이아웃 – 고급스러운 분위기 연출

 

 

 

 

 

❄️ 활용 예시

• 식품 브랜드 / 프리미엄 해산물몰
“7만원 이상이라 레시피북까지 받았어요! 덕분에 다양한 요리에 도전해보고 있어요.”
“10만원 넘기고 실리콘 받침까지 받았는데 실용적이고 예뻐요!”
→ 문어, 해산물 세트 등의 고단가 제품에 사은품 구성이 매우 효과적

 

• 생활용품 / 키친 브랜드
“칼 하나 샀다가 가위까지 받을 수 있다니, 당장 장바구니 추가했어요.”
“기본 구성에 사은품까지 있으니 선물용으로도 만족도가 높아요.”
→ 금액 구간별 주방 도구나 소형 잡화를 사은품으로 구성해 활용

 

• 뷰티 / 스킨케어 브랜드
“5만원 이상 사니 마스크팩 세트가 딸려왔어요. 덕분에 추가 결제했죠.”
“금액 조건이 잘 보여서 계획적으로 쇼핑하게 돼요.”
→ 기초세트, 클렌징 키트, 뷰티툴 등을 사은품으로 구성

 

• 전자기기 / 소형가전 브랜드
“전기포트 사면서 실리콘 매트도 받아서 유용하게 쓰고 있어요.”
“다음엔 더 높은 금액 조건까지 맞춰보고 싶어요.”
→ 액세서리, 사용 보조품 등 실용 사은품 구성이 매력적

 

• 교육 / 도서 브랜드
“책 3권만 더 담으니 사은품이 업그레이드되더라고요!”
“책 살 때마다 무슨 선물이 딸려오는지 보는 재미가 있어요.”
→ 레시피북, 필기도구, 독서 보조 도구 등으로 응용 가능

 

 

 

 

 

📢 마케팅 콘텐츠 확장 예시

• 카카오톡 채널 메시지
구매 유도 메시지와 함께 ‘금액대별 사은품 구성표’로 이미지 전송

 

• 블로그 & 상세페이지 내 배너
“얼마 이상 구매하면 이런 혜택까지!” 콘텐츠 내에 본 블럭 배치

 

• 오프라인 매장 POP
매장 내 사은품 안내 보드로 활용 – 금액 기준별 사은품 실물 사진과 함께

 

• 쇼핑몰 메인 이벤트 배너
‘금액대별 선물 증정 이벤트’ 안내 배너 내 본 구성 사용

 

• 리마케팅 광고
장바구니 유실 고객에게 “조금만 더 담으면 사은품 증정!” 이미지 삽입 광고 진행

 

 

 

 

 

💻 HTML 설명

기본 구조
– .row > .col-* 4단 카드형 구성
– 각 카드 안에는 .priceArea, .imgArea, .txtArea로 구분

 

금액 배너 (priceArea)
– 카드 상단 파란색 배경 박스로 금액 기준 명확히 표시
– 타이포 강조로 직관적인 사은품 조건 전달

 

이미지 영역 (imgArea)
– 정사각형 비율로 제품 이미지 삽입
– object-fit: cover로 비율 유지하며 깔끔하게 표현

 

텍스트 영역 (txtArea)
– 제품명(title)은 진한 글씨로 강조
– 설명문(desc)은 2줄 구성으로 간결하게 혜택 전달

 

스타일 요소
– 카드형 박스에 radius 효과로 깔끔한 디자인 완성
– 반응형 구성으로 모바일에서는 2단, 데스크탑에서는 4단 유지

 

 

 

 

 

👉 커스터마이징 팁

• 금액대 조정 – priceArea 텍스트만 변경하여 다양한 프로모션 조건 대응 가능
• 카드 수 확대 – 카드 6개까지 무리 없이 확장 가능 (col-lg-3 기준 유지 시)
• 컬러 변경 – priceArea의 배경 컬러를 브랜드 메인 컬러로 변경 가능
• 사은품 순차 노출 – 상단 고정 배너나 타임 이벤트와 연계해 단계별 오픈도 가능
• 조건 강조 애니메이션 – 10만원 이상 등 고가 조건은 별도 애니메이션 효과로 시선 집중 유도 가능

 

 

 

 

 

 

html

<!-- he18 : 사은품 -->
<div class="he18">
  <div class="row">

    <!-- 카드 1 -->
    <div class="col-6 col-sm-6 col-md-6 col-lg-3">
      <div class="box">
        <div class="box_inner">
          <div class="priceArea">3만원 이상</div>
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he18/he18_img01.jpg" alt="문어 전용 가위">
          </div>
          <div class="txtArea">
            <p class="title">문어 전용 가위</p>
            <p class="desc">
              문어 다리 손질에 최적화된 스테인리스 가위입니다.<br>
              레몬과 함께 위생적인 조리 연출이 가능합니다.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 카드 2 -->
    <div class="col-6 col-sm-6 col-md-6 col-lg-3">
      <div class="box">
        <div class="box_inner">
          <div class="priceArea">5만원 이상</div>
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he18/he18_img02.jpg" alt="해물 육수팩 3종">
          </div>
          <div class="txtArea">
            <p class="title">해물 육수팩 3종</p>
            <p class="desc">
              다시마, 멸치, 건새우로 구성된 티백형 육수팩입니다.<br>
              문어탕이나 찜 요리에 바로 활용할 수 있어요.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 카드 3 -->
    <div class="col-6 col-sm-6 col-md-6 col-lg-3">
      <div class="box">
        <div class="box_inner">
          <div class="priceArea">7만원 이상</div>
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he18/he18_img03.jpg" alt="문어 요리 레시피북">
          </div>
          <div class="txtArea">
            <p class="title">문어 요리 레시피북</p>
            <p class="desc">
              초보자도 쉽게 따라 할 수 있는 문어 요리 가이드북.<br>
              허브와 우드 소품으로 감성 연출을 더했어요.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 카드 4 -->
    <div class="col-6 col-sm-6 col-md-6 col-lg-3">
      <div class="box">
        <div class="box_inner">
          <div class="priceArea">10만원 이상</div>
          <div class="imgArea">
            <img src="{{$template}}/img/_hes/he18/he18_img04.jpg" alt="문어 다리 실리콘 받침">
          </div>
          <div class="txtArea">
            <p class="title">문어 실리콘 받침</p>
            <p class="desc">
              감각적인 문어 다리 모양으로 제작된 실리콘 매트.<br>
              냄비나 뜨거운 그릇을 올려두기 좋아요.
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

 

 

 

 

 

css

/*****************************************************************
he18 : 사은품
*****************************************************************/
.he18 {
    padding: 20px;
    /* background-color: #ddd; */
}

.he18 .row>div {
    padding: 3px;
}

.he18 .box {
    height: 100%;
}

.he18 .box .box_inner {
    position: relative;
    padding: 0 0px 20px;
    height: 100%;
    border-radius: 0px;
    /* border: 1px solid #ccc; */
    background-color: #fff;
    border-radius: 10px;
}

/* 구매 조건 (금액 조건) 표시 영역 */
.he18 .priceArea {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    padding: 15px 0;
    background-color: #1e88e5;
    text-align: center;
    font-weight: 700;
    font-size: 1.750em;
    color: #fff;
    border-radius: 10px 10px 0 0;
    /* 카드 상단 둥글게 */
}

/* 이미지 영역 */
.he18 .imgArea {
    padding: 1px;
    text-align: center;
}

.he18 .imgArea img {
    width: 100%;
    border-radius: 0px;
    object-fit: cover;
}

/* 텍스트 영역 */
.he18 .txtArea {
    text-align: center;
    padding: 10px;
}

.he18 .txtArea .title {
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 1.5em;
    color: #111;
}

.he18 .txtArea .desc {
    line-height: 1.4;
    font-size: 1.125em;
    color: #333;
}

/* 반응형 여백 조정 */
@media screen and (min-width: 768px) {
    .he18 .row>div {
        padding: 5px;
    }
}