| 메뉴 설명 |
|---|
- 위젯 추가
| 서비스 가입을 하시면 기본적으로 하나의 위젯이 만들어지며, 위젯 스타일 추가 버튼을 통해 새로운 스타일의 위젯을 추가하실 수 있습니다. |
2. 위젯명과 채널명 입력 
| 위젯명: 페이지 삽입 위치로 표시 ex) 상품상세_상단, 상품상세_하단, 메인, 장바구니, 주문완료 ,마이페이지 등 채널명 : 삽입위치를 영문으로 표시 ex) detail_top, detail_bottom, main, basket, order_result, mypage |
3. 추천타입설정 
| * 추천 우선 순위 설정 1순위부터 선택한 알고리즘의 추천 결과를 읽어 위젯으로 표시합니다. 1순위 알고리즘이 빈 결과를 응답하면 2순위, 2순위 알고리즘도 빈 결과를 응답하면 3순위의 알고리즘이 사용됩니다. 3순위의 알고리즘까지도 빈 결과를 응답하면 위젯 영역은 노출되지 않습니다. | | 상품상세_상단 | 상품상세_하단 | 메인 페이지 | 장바구니 | 주문완료 | 마이페이지 | 그외 페이지 |
|---|
| 1순위 | 함께 본 상품 추천 | 함께 구매한 상품 추천 | 실시간 개인화 추천 | 함께 구매한 상품 추천 | 실시간 개인화 추천 | 실시간 개인화 추천 | 실시간 개인화 추천 | | 2순위 | 실시간 개인화 추천 | 실시간 개인화 추천 | 통계형 추천 (구매전환율 TOP 100) | 실시간 개인화 추천 | 함께 구매한 상품 추천 | 통계형 추천 (구매전환율 TOP 100) | 통계형 추천 (구매전환율 TOP 100) | | 3순위 | 통계형 추천 (구매전환율 TOP 100) | 통계형 추천 (구매전환율 TOP 100) | 사용안함 | 통계형 추천 (베스트셀러 많이 팔린 상품 TOP 100) | 통계형 추천 (베스트셀러 많이 팔린 상품 TOP 100) | 사용안함 | 사용안함 |
* 메뉴에서 타이틀 설정 : 변경버튼 클릭, 추천타입에 맞는 타이틀 이미지를 선택하시면 됩니다. (RecoPick이 제공해드리는 타이틀 이미지를 선택할 수 있습니다.) * 커스텀 CSS로 타이틀 영역 디자인 변경 예시 | 변경할 부분 | CSS 코드 예시 | 상세설명 |
|---|
타이틀의 정열 및 간격을 조절하고 싶은 경우 | body, th, td, h1 {margin-top:5px;padding:5px;} | * text-align: center; (타이틀 가운데 정열) * margin-top:5px; (타이틀 위쪽 간격) * padding:5px; (타이틀 상하좌우 여백 ) * margin-bottom:5px; (line아래 간격 ) | 텍스트 타이틀을 이용할 경우 •타이틀 변경버튼 클릭후 텍스트사용을 선택함 •텍스트 입력후 글자 크기를 지정 | 웹 | .title {font-family: NanumGothic, 나눔고딕, NanumGothicWeb, '맑은 고딕', 'Malgun Gothic', 돋움, Dotum, 굴림, Gulim, Helvetica, AppleGothic, sans-serif;font-weight:bold;color:#7c7c7c;padding:3px;} | | | 모바일 | mobile-widget .title {font-family: NanumGothic, 나눔고딕, NanumGothicWeb, '맑은 고딕', 'Malgun Gothic', 돋움, Dotum, 굴림, Gulim, Helvetica, AppleGothic, sans-serif;;font-weight:bold;padding:5px;letter-spacing: -1px;color:#fc5402;border:0px} | |
|
4. 위젯 스타일 변경 
| 테두리 : 위젯 테두리(border) 표시 여부입니다. 테두리 표시 여부, 테두리 색을 선택 가능. 나머지 CSS로 변경 * 커스텀 CSS로 테두리 영역 디자인 변경 예시 | 변경할 부분 | CSS 코드 예시 | 상세설명 |
|---|
타이틀 및 Line 전체 삭제하고 섬네일 이미지만 보이게 하고 싶은 경우 | 웹 | .title {display:none} | | | 모바일 | .mobile-widget .title {display:none} | 타이틀과 이미지만 보이게 하고 싶은 경우 (Line만 삭제) | 웹 | .widget--h1.line .title {border:0px} | * Css 적용이 안될경우 : 테두리색 변경에서 컬러값을 #ffffff(화이트)로 설정 | | 모바일 | .mobile-widget .title {border:0px} | 타이틀 바 배경색을 넣고 싶을 경우 | 웹 | .widget--h1.line .title {border:0px;background: #eeede8;} | * background: #eeede8 (백그라운드 컬러 지정) | | 모바일 | .mobile-widget .title {border:0px;background: #eeede8;} |
상품 갯수: 한 화면에 표시될 상품 갯수. (주로 PC웹은 5 ~6개, 모바일은 3개 노출 권장) 페이지 이동 : 상품 목록의 페이지 수. (상품 갯수 5, 페이지 수가 3일 경우 총 15개의 상품이 3 페이지에 거쳐 표시. 단, 추천 계산 결과가 10개라면, 페이지 수를 3으로 지정해도 2 페이지로 표시) 텍스트 정렬 : 상품명, 가격 등의 텍스트의 정렬 변경. 여러줄 추천 : 상품 목록을 여러줄로 표시. 자신 포함 : "함께 본 상품" 등 상품 기반 추천 시 추천 대상 상품도 위젯에 포함시키는 옵션. 장바구니 페이지에서 함께 구매한 상품 위젯을 표시하고자 할 때 유용. 무한 스크롤 : 페이지 스크롤 시 마지막 페이지 -> 첫 페이지와 같이 같은 방향으로 무한 스크롤됨. 랜덤 추천 : 추천 결과를 랜덤으로 표시. |
4. 위젯 스타일 변경 
| 상품명 : 상품명의 글자 크기, 색상을 선택할 수 있습니다. (폰트종류, 글자 생략은 CSS 로 변경 가능) - 상품 링크: 링크 클릭 시 페이지 이동을 새 창으로 할지, 현재 창에서 할지 선택할 수 있습니다.
가격: 가격의 글자 크기, 색상, 표시 여부를 선택할 수 있습니다. * 커스텀 CSS로 상품명/가격 영역 변경 예시 | 변경할 부분 | CSS 코드 예시 | 상세설명 |
|---|
상품명 (class= name)의 폰트 종류, 글자간격, 글자생략 등을 변경시 | 웹 | .name {font-family:Malgun Gothic;display: inline-block;font-weight:normal;letter-spacing: -1px; width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} | * font-family:Malgun Gothic; (폰트 지정) * letter-spacing: -1px (글자 간격) * text-overflow: ellipsis; white-space: nowrap; overflow: hidden; (…글자 생략) | | 모바일 | .mobile-widget .name {font-family:Malgun Gothic;display: inline-block;font-weight:normal;letter-spacing: -1px; width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} | - 가격(class= price)의 폰트 종류, 글자 간격 변경시
- 할인가(class= sale_price) 컬러 강조시
| 웹 | .widget .price {font-family: Malgun Gothic;font-weight;bold;} | font-family : Malgun Gothic (폰트 지정) letter-spacing: -0px (글자 간격 : 0.1em 으로 지정 가능) | | .widget .sale_price {color:#ff6101} | | 모바일 | .mobile-widget .price {font-family:Verdana,Malgun Gothic;letter-spacing:-1px;font-weight:bold;} | | .mobile-widget .sale_price {color:#ff6101} |
저자: 저자의 글자 크기, 색상, 표시 여부를 선택할 수 있습니다. 저자 정보는 상품 상세 페이지에 지정하신 메타 태그 중 author 태그의 값에 해당됩니다. 섬네일: 섬네일 이미지의 표시 여부를 선택할 수 있습니다. 섬네일 이미지의 크기는 위젯의 크기에 따라 자동으로 지정됩니다. | 변경할 부분 | CSS 코드 예시 | 상세설명 |
|---|
이미지 사이즈 및 테두리 지정할 경우 | thumbnail {width:200px; margin-top:10px} | * width:200px height :50px(썸네일 크기 지정) * margin-top:10px (라인과 썸네일 간격 지정) * border:1px solid #B8B8B8 (썸네일이미지에 테두리 지정) |
|
한국어
English