Help Center
카페24 소식
[모바일쇼핑몰] 상품진열 디자인 개선 ① 메인페이지
2013-01-24
안녕하세요, 카페24 운영도우미 입니다.
모바일쇼핑몰의 가로 넓이가 모바일 기기 별로 맞춰질 수 있도록
고정으로 잡았던 부분을 %로 계산하여 가변넓이가 적용되었습니다.
아래의 메인페이지 html 파일 및 관련링크의 HTML, CSS 파일을 모두 수정하시면
정상적으로 적용되오니 각 안내페이지를 확인하시어 작업해주시기 바랍니다.
HTML 파일만 업데이트하시면 디자인이 틀어질 수 있으므로 반드시 CSS와 함께 업데이트 해주세요.
☞ CSS 수정 바로가기
자세한 내용은 아래를 참조해 주세요.
[HTML 수정 - ① 메인페이지]
아래와 같이 메인페이지 - HTML 수정사항을 적용해주시기 바랍니다.
수정파일 : index.html [샘플보기]
1) 수정 전
<section class="mPrdMain typeRecom" module="product_listmain_1">
<!--
$count = 3
-->
<h2>추천상품</h2>
<div class="inner" id="listmain_1">
<ul>
<li>
<a href="/product/detail.html{$param}">
<span class="prdImg"><img src="{$image_medium}" alt="" width="190" height="190"></span>
<span class="prdName">{$product_name|cut:16}</span>
<span class="price"><strong>{$price_unit_head}{$product_price}</strong><em>{$price_unit_tail}</em></span>
</a>
</li>
<li>
<a href="/product/detail.html{$param}">
<span class="prdImg"><img src="{$image_medium}" alt="" width="190" height="190"></span>
<span class="prdName">{$product_name|cut:16}</span>
<span class="price"><strong>{$price_unit_head}{$product_price}</strong><em>{$price_unit_tail}</em></span>
</a>
</li>
</ul>
</div>
</section>
<section class="mPrdMain typeNew" module="product_listmain_2">
<!--
$count = 3
-->
<h2>신상품</h2>
<div class="inner" id="listmain_2">
<ul>
<li>
<a href="/product/detail.html{$param}">
<span class="prdImg"><img src="{$image_medium}" alt="" width="190" height="190"></span>
<span class="prdName">{$product_name|cut:16}</span>
<span class="price"><strong>{$price_unit_head}{$product_price}</strong><em>{$price_unit_tail}</em></span>
</a>
</li>
<li>
<a href="/product/detail.html{$param}">
<span class="prdImg"><img src="{$image_medium}" alt="" width="190" height="190"></span>
<span class="prdName">{$product_name|cut:16}</span>
<span class="price"><strong>{$price_unit_head}{$product_price}</strong><em>{$price_unit_tail}</em></span>
</a>
</li>
</ul>
</div>
</section>
<section class="mPrdMain" module="product_listmain_3">
<!--
$count = 3
-->
<h2>일반상품</h2>
<div class="inner" id="listmain_3">
<ul>
<li>
<a href="/product/detail.html{$param}">
<span class="prdImg"><img src="{$image_medium}" alt="" width="190" height="190"></span>
<span class="prdName">{$product_name|cut:16}</span>
<span class="price"><strong>{$price_unit_head}{$product_price}</strong><em>{$price_unit_tail}</em></span>
</a>
</li>
<li>
<a href="/product/detail.html{$param}">
<span class="prdImg"><img src="{$image_medium}" alt="" width="190" height="190"></span>
<span class="prdName">{$product_name|cut:16}</span>
<span class="price"><strong>{$price_unit_head}{$product_price}</strong><em>{$price_unit_tail}</em></span>
</a>
</li>
</ul>
</div>
</section>
2) 수정 후
<div class="mPrdList typeThumb" module="product_listmain_1">
<!--
$count = 3
-->
<h2>추천상품</h2>
<ul class="grid3">
<li>
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" /></a></div>
<p class="name"><a href="/product/detail.html{$param}">{$product_name|cut:16}</a></p>
<p class="price">{$price_unit_head}{$product_price}<span>{$price_unit_tail}</span></p>
</li>
<li>
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" /></a></div>
<p class="name"><a href="/product/detail.html{$param}">{$product_name|cut:16}</a></p>
<p class="price">{$price_unit_head}{$product_price}<span>{$price_unit_tail}</span></p>
</li>
</ul>
</div>
<div class="mPrdList typeThumb" module="product_listmain_2">
<!--
$count = 3
-->
<h2>신상품</h2>
<ul class="grid3">
<li>
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" /></a></div>
<p class="name"><a href="/product/detail.html{$param}">{$product_name|cut:16}</a></p>
<p class="price">{$price_unit_head}{$product_price}<span>{$price_unit_tail}</span></p>
</li>
<li>
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" /></a></div>
<p class="name"><a href="/product/detail.html{$param}">{$product_name|cut:16}</a></p>
<p class="price">{$price_unit_head}{$product_price}<span>{$price_unit_tail}</span></p>
</li>
</ul>
</div>
<div class="mPrdList typeThumb" module="product_listmain_3">
<!--
$count = 3
-->
<h2>일반상품</h2>
<ul class="grid3">
<li>
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" /></a></div>
<p class="name"><a href="/product/detail.html{$param}">{$product_name|cut:16}</a></p>
<p class="price">{$price_unit_head}{$product_price}<span>{$price_unit_tail}</span></p>
</li>
<li>
<div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt="" /></a></div>
<p class="name"><a href="/product/detail.html{$param}">{$product_name|cut:16}</a></p>
<p class="price">{$price_unit_head}{$product_price}<span>{$price_unit_tail}</span></p>
</li>
</ul>
</div>
[관련링크 - HTML 수정]
아래의 모든 페이지들이 변경 되었으니 해당 페이지별 수정내용을 적용해주세요.
각 페이지 별로 편집창에서 [ 최신소스 ] 기능을 이용하여 업데이트 받으셔도 됩니다.
① 메인페이지
② 카테고리 리스트 - [바로가기]
③ 카테고리 리스트(썸네일형) - [바로가기]
④ 검색 - [바로가기]
⑤ 최근 본 상품 - [바로가기]
⑥ 관심상품 - [바로가기]
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]