본문 바로가기

현재 위치
  1. HOME
  2. 쇼핑몰 TIP

쇼핑몰 TIP

온라인 쇼핑몰 제작부터 운영, 마케팅까지! 유용한 정보를 제공합니다.

카테고리 상세
번호 문의유형 제목
1346 상품목록 이미지에 테두리 추가하기 조회수 4374
  • 작성일 2017-08-24 14:25:44
  • 추천 추천하기
  • 조회수 4374


깔끔한 이미지를 위한 한 끗 차이!



상품 목록에 노출되는 수 많은 이미지들을

조금이라도 더 깔끔하게 하는 방법,

없을까요?


특히 쇼핑몰 배경과 사진 배경이

같은 색이라면?


어디까지가 상품 이미지 영역인지

구분이 되지 않을 겁니다.


이를 위해

간단한 디자인 소스 수정으로

상품 목록 이미지에 테두리를 추가해보겠습니다.




01

상품 목록 이미지에 테두리 추가하기



1. 쇼핑몰 관리자 '디자인관리'에서 '쇼핑몰 디자인 수정' 버튼을 클릭합니다.





2. 디자인소스 수정하기


1) 스마트디자인 편집창에서 '전체화면보기(탭) > 레이아웃 > 기본 레이아웃 > css > ec-base-product.css'를 엽니다.

2) 소스 창 가장 밑 부분에 코드를 아래와 같이 추가하고, '저장' 버튼을 클릭합니다.



▼ 추가할 코드

 .ec-base-product .thumbnail .prdImg a img { border:1px solid lightgrey; } /* lightgrey 대신 원하는 컬러값으로 변경 가능 */


 


상품 목록 이미지에 테두리가 추가된 모습입니다.