상품 이미지 변수와 사이즈 조절 방법은 아래를 확인해 주세요.
자세히 알아보기
상품 이미지 변수의 모든 것
- 이미지 변수 정리
쇼핑몰 관리자에서 등록한 개별 이미지가 어떤 이미지 변수로 노출되는지 아래 표에서 확인해 주세요. 각 페이지에 원하는 변수를 적용 시키면 그에 해당되는 이미지가 노출 되어요.
대 이미지
(상세 이미지)중 이미지
(목록 이미지)축소 이미지
(작은 목록 이미지)소 이미지
(축소 이미지)메인 (index.html),
분류 (list.html){$image_big} {$image_medium} {$image_tiny} {$image_small} 상세 (detail.html) {$big_img} {$medium_img} {$tiny_img} {$small_img} - 메인(index.html), 상품 분류(list.html) 페이지 모듈
해당 모듈 안에 이미지 변수가 들어가 있어야 상품 이미지가 노출되어요.
- 메인 : product_listmain
- 상품 분류 : product_listrecommend, product_listnew, product_listnormal
- 상품 상세(detail.html) 페이지 모듈
해당 모듈 안에 이미지 변수가 들어가 있어야 상품 이미지가 노출되어요.
- 상품 상세 : product_detail
- 상품 상세 > 확대 이미지 : product_detail > product_addimage
- 상품 상세 > 관련 상품 이미지 : product_relation > product_relationlist
이미지 사이즈 조절하기
- 스마트디자인 편집창에서 변경하는 방법
등록한 이미지가 설정 사이즈 보다 작을 경우, 선명하게 보이지 않을 수 있어요. 이런 경우 스마트디자인 편집창을 열고 각 페이지의 CSS 파일에서 이미지 크기 관련 CSS를 수정해 주세요. width의 숫자를 수정하여 이미지 사이즈를 조절할 수 있어요.
- 메인(index.html), 상품 분류(list.html)
예시 (/css/modult/product/listmain_1.css)
.xans-product-1 ul.column4 li.item { width:25%; } /* 100%를 기준으로 한 라인에 진열되는 상품이미지의 갯수 (20%는 5개씩, 25%는 4개씩, 33.3%는 3개씩 나열)*/.xans-product-1 ul.column4 li.item .box { width:240px; } /* 썸네일 이미지를 감싸고 있는 박스의 가로 넓이 */.xans-product-1 ul.column4 li.item .thumb { max-width:238px; } /* 썸네일 이미지의 최대 가로 넓이 */.xans-product-1 ul.column5 li.item { width:20%; }.xans-product-1 ul.column5 li.item .box { width:189px; }.xans-product-1 ul.column5 li.item .thumb { max-width:187px; } - 상품 상세(detail.html)
예시 (/css/module/product/detail.css)
.xans-product-detail .imgArea .keyImg { width:346px; } /* 썸네일 이미지를 감싸고 있는 박스의 가로 넓이 */.xans-product-detail .imgArea .keyImg img { max-width:344px; } /* 썸네일 이미지의 최대 가로 넓이 */ - 상품 상세 영역에 큰 이미지 등록 시, 영역보다 크게 나올 경우
예시 (/css/module/product/additional.css)
#prdDetail img { max-width:100% !important; height:auto !important; } /* 상세영역 이미지 넓이,높이 */
- listmain 으로 시작하는 CSS가 없을 경우
스마트디자인 편집창에서 레이아웃(layout) > 기본 레이아웃(basic) > CSS > ec-base-product.css 파일을 열어 아래 부분에 파란색 코드를 추가해 주세요.
.ec-base-product .prdList .thumbnail a img { width:넓이px; height:높이px; max-width:100%; border:1px solid #ececec; box-sizing:border-box; }
/ * 예시) width:200px; height:300px; * /
- 메인(index.html), 상품 분류(list.html)
- 쇼핑몰 관리자에서 변경하는 방법
에서 '상품 수정창 > 이미지 정보 > 이미지 등록'으로 이동 후 '이미지 사이즈 변경' 버튼을 클릭해 주세요. 원하는 항목의 이미지 사이즈 변경이 가능하며, 원래 값으로 되돌리고 싶을 땐 '초기값' 버튼을 누르면 되어요.