상단 로고

상품상세페이지 상단 좌측의 상품 이미지 크기를 크게 수정하고싶으시면

detail.css 파일에서 수정해주시면 됩니다.

아래 소스에서 빨간부분처럼 숫자를 수정해줍니다.

/* imgArea */

.xans-product-detail .imgArea { float:left; width:402px; margin:0 0 0 -446px; }

.xans-product-detail .imgArea .keyImg { width:402px; margin:0 auto; }

.xans-product-detail .imgArea .keyImg .thumbnail { display:inline-block; position:relative; max-width:100%; }

.xans-product-detail .imgArea .keyImg .prdIcon { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; }

.xans-product-detail .imgArea .keyImg img { max-width:400px; border:1px solid #ececec; cursor:pointer; }

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

상품상세페이지 상단의 상품 이미지 영역과 상품정보 영역을 동시에 좌우위치 조절하시려면

detail.css 파일의 2행에서 아래 빨간 부분의 숫자를 수정해주시면 됩니다.

.xans-product-detail .detailArea { padding:0 0 0 540px; }

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

상품상세페이지 상단 우측의 상품정보 영역의 좌우 위치를 수정하는 방법입니다.

detail.css 파일에서  아래 소스처럼 margin: 0 0 0 10px; 를 추가합니다.

.xans-product-detail .infoArea { width:400px; margin: 0 0 0 10px;  }

그리고 detail.css 파일에서 아래 파란색 숫자 25px 을 수정하여 

상품상세페이지 하단 고정 구매하기 영역의 왼쪽 여백을 조절 가능하며

440px 도 함께 수정된 숫자에 맞게 수정해주셔야 합니다.

/* 상단 상품정보 고정하기 */

.top_info_fix  {

    padding:10px 0 0 25px;

    position:fixed;

    right:20px;

    bottom:57px;

    width:440px;

           height:768px;

         overflow:auto;

         z-index:9999;

         border:1px solid #797979;

       background:#fff;

       visibility:hidden;

     }

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

그리고 상품 이미지 바로 아래의 확대보기 버튼 클릭시 확대보기 창의 상품 이미지 크기를 크게 수정하시려면

이미지 확대보기 (상품상세) 페이지에서 이미지 크기를 500px 이상 크게 보이도록 수정합니다.

(카페24 기본 소스는 작게 보이도록 되어있습니다.)

아래 소스처럼 style="min-width:500px; margin-left:-170px;" 를 추가해줍니다.

그리고 <span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span>

소스를 삭제해줍니다. (모서리 이미지 꾸미기 아이콘 삭제)

<!-- //공급사 바로가기버튼 영역 -->

                    <div class="thumbnail"><img src="{$big_img}" class="{$big_img_class}" alt="" onclick="self.close();" style="min-width:500px; margin-left:-170px;" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></div>

                </div>

그리고 <!--@css(/css/module/product/zoomPackage2.css)--> 파일에서 

아래 소스처럼 이전prev , 다음next 버튼 소스에 display:none; 를 각각 추가하여 불필요한 버튼이 보이지않도록 설정해줍니다.

.xans-product-zoom .imgArea .keyImg > .prev { display:none; position:absolute; left:0; top:50%; margin:-22px 0 0; }

.xans-product-zoom .imgArea .keyImg > .next { display:none; position:absolute; right:0; top:50%; margin:-22px 0 0; }

그리고 아래 소스에서 overflow:auto; 를 삭제합니다. (크롬에서 확대보기 창 이중 스크롤바 방지)

.xans-product-zoompackage { overflow:auto; height:693px; }