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

유용한 웹 팁

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

게시판 상세
제목 쇼핑몰에 배너 이미지 추가하기
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2021-09-27
  • 추천 추천하기
  • 조회수 97


< 쇼핑몰에 배너 이미지 추가하기 >

 


1) 쇼핑몰 좌측영역 에 배너를 추가하는 방법입니다. 


사용중이신 디자인에서 상품 카테고리 영역이 좌측에 있을 경우에 해당합니다.

좌측 영역에서 상품 카테고리 메뉴, 커뮤니티 메뉴 아래에 

고객센터 배너, 입금계좌 배너 등이 있는데 그 부분에 

배너를 추가할 수 있는 공간이 있을 경우 원하시는 위치에 추가 가능합니다.




- 이미지 작업하기 : 추가할 이미지를 포토샵이나 기타 이미지 편집 프로그램에서 jpg로 작업해주세요.

이미지 크기는 좌측 영역에 있는 다른 이미지들과 가로길이를 반드시 동일하게 해주시고

세로길이는 원하시는대로 해주세요. 

이미지 길이를 알고싶으시면 쇼핑몰 이미지에 마우스를 대고 다른 이름으로 그림 저장 하셔서

확인 바랍니다.



- 이미지 업로드 하기 : 관리자 페이지 최상단 우측의 FTP > 파일업로더에 접속하셔서

 /web/upload/byulmoa숫자/images/ 경로에 업로드 해주세요. 

(숫자는 고객님께서 구매하신 디자인 넘버를 말합니다. 예를들어 별모아 30번 디자인을 구매하셨을 경우

byulmoa30 폴더 안의 images폴더에 이미지를 업로드 해주셔야 합니다. 

디자인 넘버를 모르시면 디자인 디자인관리 > 보관함에서 디자인명을 보시면 나와있습니다.)


 

- 이미지 소스 삽입하기 : 스마트디자인 편집창에 이미지 소스를 추가해주셔야 합니다. 

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

편집창 좌측 하단의 화면명 검색창에 snbL.html 을 검색하여 /layout/basic/snbL.html 에 체크 후 선택파일열기 버튼을 클릭하면

해당 파일이 열리고 아래와 같은 소스가 보입니다. (편집창에 소스가 안보이실 경우에는 편집창 최하단에 작은 아이콘 3개가 있는데 가장 오른쪽 아이콘을 클릭해주세요.)

아래 굵은 부분의 소스를 추가해 붙여넣어주시면 됩니다. 

반드시 소스 가장 아래의 </ul> 안에 넣어주셔야 합니다.

 

 

 <!-- 고객상담, 입금계좌, 블로그, 택배회사 배너 -->

 <ul>

 <!--@css(/apps/bannermanage/skin1/skin1.css)-->

 <li class="snbL_banner"><a href="/" target="_self"><img src="/web/upload/byulmoa30/images/banner_customer.jpg" border="0" alt="" /></a></li>

 <li class="snbL_banner"><a href="/" target="_self"><img src="/web/upload/byulmoa30/images/banner_online.jpg" border="0" alt="" /></a></li>

 <li class="snbL_banner"><a href="http://blog.naver.com" target="_blank"><img src="/web/upload/byulmoa30/images/banner_blog.jpg" border="0" alt="" /></a></li>

 <li class="snbL_banner"><a href="https://www.cjlogistics.com/ko/main" target="_blank"><img src="/web/upload/byulmoa30/images/banner_delivery.jpg" border="0" alt="" /></a></li>

 <li class="snbL_banner"><a href="링크주소" target="_self"><img src="/web/upload/byulmoa숫자/images/이미지파일명.jpg" border="0" alt="" /></a></li>

</ul>

 

 

소스를 붙여넣으신 후 파란 부분을 수정해주시면 됩니다. 

- 링크주소는 쇼핑몰 주소창에 페이지 주소들이 표시되므로 그대로 복사하여 붙여넣어주시면 됩니다.

- 쇼핑몰 내의 페이지로 링크걸 경우 수정하지않으셔도 되며 만약 타 사이트를 링크 걸 경우에는 

   현재창이 아닌 새 창으로 링크 걸어야하므로 target="_self" 에서 _self 를 _blank 로 수정해주세요.

- 숫자는 고객님께서 구매하신 별모아 디자인 넘버로 수정해주세요. 디자인관리 > 디자인 보관함의 디자인명에 넘버가 있습니다.

- 업로드하신 이미지 파일명으로 수정해주세요. 파일명은 영어나 숫자이어야 하며, 한글은 이미지가 정상적으로 노출되지않습니다.


 


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


 

2) 쇼핑몰 우측 고정 탭 영역에 배너를 추가하는 방법입니다.


쇼핑몰에서 우측의 적립금 배너, 최근 본 상품 등 고정 영역이 있습니다.

적립금 배너 바로 아래에 배너를 추가할 수 있는 공간이 있을 경우 추가 가능합니다.




- 이미지 작업하기 : 추가할 이미지를 포토샵이나 기타 이미지 편집 프로그램에서 jpg로 작업해주세요.

이미지 크기는 좌측 영역에 있는 다른 이미지들과 가로길이를 반드시 동일하게 해주시고

세로길이는 원하시는대로 해주세요.

이미지 길이를 알고싶으시면 쇼핑몰 이미지에 마우스를 대고 다른 이름으로 그림 저장 하셔서

확인 바랍니다.




- 이미지 업로드 하기 : 관리자 페이지 최상단 우측의 FTP > 파일업로더에 접속하셔서

 /web/upload/byulmoa숫자/images/ 경로에 업로드 해주세요. 

(숫자는 고객님께서 구매하신 디자인 넘버를 말합니다. 예를들어 별모아 30번 디자인을 구매하셨을 경우

byulmoa30 폴더 안의 images폴더에 이미지를 업로드 해주셔야 합니다. 

디자인 넘버를 모르시면 디자인 디자인관리 > 보관함에서 디자인명을 보시면 나와있습니다.)


 

- 이미지 소스 삽입하기 : 스마트디자인 편집창에 이미지 소스를 추가해주셔야 합니다. 

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

편집창 좌측 하단의 화면명 검색창에 right_tab.html 를 검색하신 후 

/shopinfo/right_tab.html 에 체크 후 선택파일열기 버튼을 클릭하면

해당 파일이 열리고 아래와 같은 소스가 보입니다. (편집창에 소스가 안보이실 경우에는 편집창 최하단에 작은 아이콘 3개가 있는데 가장 오른쪽 아이콘을 클릭해주세요.) 

아래 굵은 부분의 소스를 추가해 붙여넣어주시면 됩니다. 

반드시 소스 가장 아래의 </ul> 안에 넣어주셔야 합니다.


 

<!-- 회원가입시 적립금 배너 -->

 <ul>

 <!--@css(/apps/bannermanage/skin1/skin1.css)-->

 <li class="quickR"><a href="/member/join.html" target="_self"><img src="/web/upload/byulmoa30/images/quickR.jpg" border="0" alt="" /></a></li>

  <li class="snbL_banner"><a href="링크주소" target="_self"><img src="/web/upload/byulmoa30/images/이미지파일명.jpg" border="0" alt="" /></a></li>

</ul>

 

 

소스를 붙여넣으신 후 파란 부분을 수정해주시면 됩니다. 

- 링크주소는 쇼핑몰 주소창에 페이지 주소들이 표시되므로 그대로 복사하여 붙여넣어주시면 됩니다.

- 쇼핑몰 내의 페이지로 링크걸 경우 수정하지않으셔도 되며 만약 타 사이트를 링크 걸 경우에는 

   현재창이 아닌 새 창으로 링크 걸어야하므로 target="_self" 에서 _self 를 _blank 로 수정해주세요.

- 숫자는 고객님께서 구매하신 별모아 디자인 넘버로 수정해주세요. 디자인관리 > 디자인 보관함의 디자인명에 넘버가 있습니다.

- 업로드하신 이미지 파일명으로 수정해주세요. 파일명은 영어나 숫자이어야 하며, 한글은 이미지가 정상적으로 노출되지않습니다.


 


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


3) 그 외에 기타 영역에 배너를 더 추가하고싶으시면 위의 설명들을 보시고 응용하셔서

얼마든지 더 추가 가능합니다.



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

비밀번호 :

/ byte

비밀번호 : 확인 취소

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

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

/ byte

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

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