한국어 한국어   Englilsh English
    Skip to end of metadata
    Go to start of metadata

    추천 위젯 설정 메뉴에서 디자인 변경

    Admin Dashboard 추천 위젯툴을 이용해 간편하게 원하시는 알고리즘 선택 및 디자인 수정이 가능합니다.

    메뉴 설명
    1. 위젯 추가

    서비스 가입을 하시면 기본적으로 하나의 위젯이 만들어지며, 위젯 스타일 추가 버튼을 통해 새로운 스타일의 위젯을 추가하실 수 있습니다.

     

    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 (썸네일이미지에 테두리 지정)


    • No labels