현재 위치
  1. 게시판
  2. 유용한 웹 팁

유용한 웹 팁

쇼핑몰 운영에 도움이 되는 정보들입니다.

게시판 상세
제목 상품 카테고리 (대분류) 를 이미지로 작업하기
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2020-02-07
  • 추천 추천하기
  • 조회수 108


현재 쇼핑몰에서는 상품관리 > 상품분류관리 > 분류 관리에서 대분류를 생성하면

쇼핑몰에 자동적으로 카테고리 메뉴가 노출이 되도록 되어있어

별도의 포토샵 작업을 하지않아도 됩니다.
하지만 카테고리 메뉴를 텍스트가 아닌 이미지로 만들고 싶으시면

아래의 방법대로 해주시면 됩니다.




< 카테고리 메뉴 (대분류) 이미지 작업하기 >

포토샵을 열어서 아래의 이미지처럼 대분류 메뉴를 이미지로 작업해주세요.

(중요) 이미지 크기는 여백없이 텍스트 크기만큼 정확하게 잘라서 저장해주세요.

포토샵의 왼쪽의 crop툴로 잘라주시면 됩니다.

메뉴 각각 개별적으로 작업해주셔야 합니다.


예시) 



마우스 오버했을 때 색상이 바뀌길 원하시면

아래 이미지처럼 색상만 변경하여 다시 별도의 이미지로 저장해주세요.


예시)

 

포토샵에서 대분류 이미지를 모두 작업 하셨으면

아래의 방법대로 업로드 해주세요.





< 카테고리 메뉴 이미지 업로드 하기 >


관리자페이지의 상품관리 > 상품분류관리 > 분류 관리에서

대분류 선택 후 오른쪽의 분류 꾸미기 에서 메뉴 이미지 항목을 이미지 직접등록 으로 선택하신 후

포토샵에서 작업하셨던 기본 이미지오버 이미지를 각각 등록 버튼을 클릭하여 업로드 하신 후

페이지 하단의 확인 버튼을 클릭해주세요.


대분류 모두 위와 같은 방법으로 각각 업로드해주시면 됩니다.




메뉴를 이미지로 업로드 하고난 후

메뉴간의 간격을 좀 더 넓히고 싶거나

메뉴 글자를 전체적으로 왼쪽 여백을 조절하고싶으시면 아래 설명대로 해주세요.



아래 작업을 하기 전에 반드시 디자인을 백업 해주세요.

고객님들께서 직접 소스를 수정 중에 실수가 발생했을 경우

백업한 시점으로 다시 복구가 가능하려면 수정 전에 반드시 백업을 해두셔야 합니다.

고객님의 실수로 인한 복구는 디자인 에이전시에서는 책임지지않으므로 반드시 백업해주세요.

디자인 백업 & 복구방법은 아래 설명 참조바랍니다.

http://byulmoa.com/board/free/read.html?no=4416&board_no=3




< 메뉴 세로 간격 & 왼쪽 여백 조절하기 >



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

편집창 하단 왼쪽의 화면명 검색에서 nav.css 를 검색한 후 /css/nav.css 에 체크 후

선택파일 열기 버튼을 클릭하면 nav.css 파일의 소스창이 열립니다.



아래는 nav.css 파일의 상단 부분의 소스입니다.

아래 설명을 참조하여 아래 소스를 수정해주시면 됩니다.

디자인에 따라 소스가 약간씩 차이가 있을 수 있습니다.


/* 대분류 */
#category-lnb { text-align:left; }
#category-lnb .d1-wrap li { z-index:1; }

/* 상품 카테고리 텍스트 */
#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 15px; text-decoration:none; letter-spacing:0.5px; }
/* 마우스 아웃 */
#category-lnb .d1-wrap li a:link { color: #555555; }
/* 마우스 오버 */
#category-lnb .d1-wrap li a:hover { color: #97c702;  }




- 메뉴 왼쪽 여백 변경하기 : 카테고리 글자 전체적으로 왼쪽 여백을 변경하고싶으시면

위의 초록색 부분의 15 라는 숫자만 원하시는 숫자로 수정해주세요.

숫자는 디자인마다 차이가 있을 수 있습니다.

위의 소스는 예시입니다.


숫자가 낮을수록 카테고리 텍스트가 전체적으로 왼쪽으로 이동하며

숫자가 높을수록 오른쪽으로 이동합니다.

다른 부분은 건드리지마시고 숫자만 수정해주세요.

수정 후 편집창 상단 왼쪽의 저장 버튼을 반드시 클릭해주세요.


- 텍스트 세로 간격 조절하기 : 각 카테고리 텍스트의 세로폭(간격)을 조절하고싶으시면

위의 소스에서 핑크색으로 된 5 라는 2개의 숫자를 수정해주시면 됩니다.

둘 다 동일한 숫자로 수정해주세요.

숫자는 디자인마다 차이가 있을 수 있습니다.

위의 소스는 예시입니다.


다른 부분은 건드리지마시고 숫자만 수정해주세요.

숫자가 높을수록 카테고리의 세로 간격이 넓어지게 됩니다.

수정 후 편집창 상단 왼쪽의 저장 버튼을 반드시 클릭해주세요.



-------------------------------------------------------------------------------------------






첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.