< 필독!!! > 현재 상품 카테고리 메뉴는 텍스트로 자동 출력되도록 되어있어 포토샵 작업을 별도로 하지않아도 됩니다. 하지만 텍스트가 아닌 이미지를 만들어 업로드하고 싶으신 분들은 아래의 방법대로 해주시기 바랍니다.

< 소스 수정하기 >

현재 텍스트로 출력되고 있는 상품 카테고리 메뉴를 이미지로 작업하여 올리고싶으시면 일단 소스를 수정해주셔야 합니다. 카테고리 메뉴를 전부 다 이미지로 올리는 방법입니다. 카테고리 메뉴 중 일부 메뉴만 이미지로 올리실 경우에는 아래 소스 수정은 하지마시고 텍스트를 포토샵에서 작업 후 여백없이 딱 텍스트 크기 만큼만 잘라서 이미지로 저장 후 상품관리 > 상품분류관리 > 분류 관리에서 각 카테고리 선택 후 업로드 해주세요.

아래는 카테고리 메뉴 전부 이미지로 수정하는 방법입니다.

관리자페이지에서 디자인관리 > 디자인 관리 > 디자인 보관함에서 수정할 디자인의 HTML디자인 수정 버튼 클릭하면 스마트 디자인 편집창이 뜹니다.

편집창 왼쪽 하단의 화면명 검색창에 nav.css 를 검색하여 선택파일열기 버튼을 눌러 열어줍니다.

파일을 열면 소스중에서 아래와 같은 소스가 있는데 아래 소스만 삭제해주세요.

다른 소스는 건드리지마시고 아래 소스만 삭제해주신 후 편집창 상단 왼쪽의 ‘저장’ 버튼을 클릭해주세요.

/* 상품 카테고리 텍스트 */

#category-lnb .d1-wrap li { margin:0 auto; border-bottom:1px solid #e9e9e9; width:80%; }

#category-lnb .d1-wrap li a { width:100%; font-size:12px; display:inline-block; padding:5px 0 5px 20px; text-decoration:none; letter-spacing:0.5px; }

/* 마우스 아웃 */

.xans-layout-boardinfo li a:link { color: #666666; font-weight:bold; }

/* 마우스 오버 */

.xans-layout-boardinfo li a:hover { color: #94a9ff; }

.xans-layout-boardinfo a:active {color: #666666;}

.xans-layout-boardinfo a:visited {color: #666666;}

소스를 삭제하셨으면 이제 바로 아래 설명인 < 상품 카테고리 메뉴 (대분류) 이미지 작업 및 업로드 방법 > 설명대로 이미지 작업하여 업로드하시면 됩니다.

< 상품 카테고리 메뉴 (대분류) 이미지 작업 및 업로드 방법 >

상품 카테고리 메뉴는 메뉴에 마우스를 올리기 전인 기본 이미지 와 메뉴에 마우스를 올렸을 때인 오버 이미지로 각각 만들어주어야 합니다. 각각의 이미지는 글자는 똑같고 글자 색상만 바뀌도록 해주시면 됩니다. 이미지 가로길이는 185픽셀로 해주세요.

- 기본 이미지와 오버 이미지 업로드 하기

상품관리 메뉴에서 각각의 카테고리 클릭 후 오른쪽 설정 페이지에서

마우스 올리기 전 이미지와

마우스 올린 후 이미지를 각각 등록 가능합니다.    

< 주의사항!!! > 상품관리 메뉴에서 메뉴 이미지를 업로드 할 때는 반드시 해당 디자인이 대표 디자인으로

설정되어있어야 적용이 됩니다.

다른 디자인이 대표 디자인으로 설정되어있는 상태에서 상품관리 메뉴에서 카테고리 메뉴 이미지를 업로드하시면

현재 표 디자인으로 설정되어있는 디자인에 메뉴 이미지가 적용되기때문에 유의바랍니다.

현재 대표 디자인으로 사용하고있지않은 디자인을

디자인 보관함에서  수정하시는 분들은

쇼핑몰 고객들의 방문이 뜸한 시간에 잠깐 해당 디자인을 대표 디자인으로 설정하신 후

상품관리 메뉴에서 상품 카테고리 이미지 업로드 하시고

다시 사용중이던 디자인을 대표 디자인으로 설정해주시기 바랍니다.