주 콘텐츠로 건너뛰기

메인, 목록, 상세 페이지 상품 이미지 변수 및 사이즈 조절 방법

상품 이미지 변수와 사이즈 조절 방법은 아래를 확인해 주세요.

자세히 알아보기

상품 이미지 변수의 모든 것

  1. 이미지 변수 정리

    쇼핑몰 관리자에서 등록한 개별 이미지가 어떤 이미지 변수로 노출되는지 아래 표에서 확인해 주세요. 각 페이지에 원하는 변수를 적용 시키면 그에 해당되는 이미지가 노출 되어요.

      대 이미지
    (상세 이미지)
    중 이미지
    (목록 이미지)
    축소 이미지
    (작은 목록 이미지)
    소 이미지
    (축소 이미지)
    메인 (index.html),
    분류 (list.html)
    {$image_big} {$image_medium} {$image_tiny} {$image_small}
    상세 (detail.html) {$big_img} {$medium_img} {$tiny_img} {$small_img}


  2. 메인(index.html), 상품 분류(list.html) 페이지 모듈

    해당 모듈 안에 이미지 변수가 들어가 있어야 상품 이미지가 노출되어요.

    • 메인 : product_listmain
    • 상품 분류 : product_listrecommend, product_listnew, product_listnormal


  3. 상품 상세(detail.html) 페이지 모듈

    해당 모듈 안에 이미지 변수가 들어가 있어야 상품 이미지가 노출되어요.

    • 상품 상세 : product_detail
    • 상품 상세 > 확대 이미지 : product_detail > product_addimage
    • 상품 상세 > 관련 상품 이미지 : product_relation > product_relationlist

 

이미지 사이즈 조절하기

  1. 스마트디자인 편집창에서 변경하는 방법

    등록한 이미지가 설정 사이즈 보다 작을 경우, 선명하게 보이지 않을 수 있어요. 이런 경우 스마트디자인 편집창을 열고 각 페이지의 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; * /



  2. 쇼핑몰 관리자에서 변경하는 방법
    [관리자] 상품 > 상품목록 에서 '상품 수정창 > 이미지 정보 > 이미지 등록'으로 이동 후 '이미지 사이즈 변경' 버튼을 클릭해 주세요. 원하는 항목의 이미지 사이즈 변경이 가능하며, 원래 값으로 되돌리고 싶을 땐 '초기값' 버튼을 누르면 되어요.

 

 

연관 콘텐츠

이 페이지가 도움이 되었나요?
현재 콘텐츠