thumbnail

상품 상세페이지에 쿠폰 받기 버튼 표시하기

내 쇼핑몰에서 회원을 위한 쿠폰을 발행했다면, 회원이 상품 상세페이지에서 쿠폰을 간편하게 내려받을 수 있도록  쿠폰 받기 버튼을 표시할 수 있습니다.

  1. 디자인 모드에 접속합니다. 

  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.

  3. 글로벌 메뉴 에서 상품 상세페이지 메뉴를 클릭합니다.

  4. 상품 상세페이지 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

  5. 컨텍스트 메뉴가 나오면 상품 상세페이지 설정 을 클릭합니다.

  6. 상품 상세페이지 설정 창이 나오면 왼쪽 메뉴에서 표시 항목 탭을 클릭합니다.

  7. 쿠폰정보 항목에서 쿠폰 받기 버튼 옵션을 선택합니다.

  1. 이제 상품 상세페이지에 쿠폰 받기 버튼이 표시되며, 판매자가 발행한 쿠폰이 여러 개라면 회원은 이용 가능한 쿠폰을 선택해 미리 내려받을 수 있게 됩니다.


쿠폰받기 버튼 디자인의 기준은 PC, 모바일이 다르게 적용됩니다. PC와 모바일 각각의 특성을 고려하여 설정되었습니다.

PC 화면

  • 쿠폰 혜택이 먼저 노출됩니다.(PC, 모바일 설정 동일)

  • [디자인 모드 > 상품 상세페이지 > 상품 상세페이지 설정 > 디자인 > 상품가격] 의 폰트 크기로 설정됩니다.

  • 설정한 쿠폰명이 노출됩니다.

  • ‘쿠폰받기’ 버튼의 색상은 ‘구매하기’ 버튼의 색상과 동일하게 적용됩니다.

  • PC 디자인의 글꼴 크기 : [디자인 모드 > 공통 디자인 설정 > 텍스트 정의 > 글꼴 크기]

  • 모바일 디자인의 글꼴 크기 : [디자인 모드 > 공통 디자인 설정 > 텍스트 정의 > 글꼴 크기] 의 0.9배

  • 구매하기’ 버튼과 동일한 설정값을 따라갑니다.설정한 쿠폰명이 노출됩니다.

  • PC

    • 박스의 테두리 컬러 : [디자인 모드 > 공통 디자인 설정 > 글자 색의 10%]

    • 박스 배경색 : 없음(투명)

  • 모바일

    • 박스의 테두리 컬러 : [디자인 모드 > 공통 디자인 설정 > 글자 색의 10%]

    • 박스 배경색 : [디자인 모드 > 공통 디자인 설정 > 브랜드/링크색의 6%]