주 콘텐츠로 건너뛰기

모바일 쇼핑몰 상품 페이지 디자인 관련 자주 묻는 질문

콘텐츠 목차

ㆍ모바일 쇼핑몰 메인 화면의 한 줄에 진열되는 상품 개수와 총 진열 상품 개수를 변경할 수 있나요?

ㆍ모바일 상품 상세페이지에 노출되는 적립금 단위를 설정한 단위로 노출하고 싶어요.

ㆍ모바일쇼핑몰 상세페이지에 상품 이미지 대신 회색 이미지가 나오는데 어떻게 해야 할까요?

ㆍ모바일 Lazy Loading 또는 더보기 기능 적용하기

모바일 쇼핑몰 메인 화면의 한 줄에 진열되는 상품 개수와 총 진열 상품 개수를 변경할 수 있나요?

메인화면 상품 진열 설정 방법

  1. [관리자] 디자인 > 디자인 보관함으로 이동해 주세요.
  2. '모바일(탭)' 을 클릭한 뒤, 디자인 보관함 목록에 있는 모바일 쇼핑몰 디자인 중에서 수정할 스킨 디자인의 '편집' 버튼을 클릭해 주세요.
  3. 스마트디자인 편집창에서 변경할 상품 진열 영역을 선택하고 '편집' 버튼을 클릭해 주세요.
  4. 편집창의 '꾸미기(탭)' 을 클릭한 뒤, 변경할 진열 형태를 선택하고 '적용' 버튼을 클릭해 주세요.
  5. '쇼핑몰 미리보기' 화면에서 변경된 내용을 확인해 보세요.

상품 진열 개수 설정 방법

  1. [관리자] 디자인 > 디자인 보관함으로 이동해 주세요.
  2. '모바일(탭)' 을 클릭한 뒤, 디자인 보관함 목록에 있는 모바일 쇼핑몰 디자인 중에서 수정할 스킨 디자인의 '편집' 버튼을 클릭해 주세요.
  3. 스마트디자인 편집창에서 변경할 상품 진열 영역을 선택해 주세요.
  4. HTML 소스 중 빨간색으로 표시된 '$COUNT='에서 숫자 부분에 진열할 총 상품 개수를 숫자로 입력해 주세요.
    [예시] 진열할 총 상품 개수가 3개일 경우 : $COUNT=3
  5. 수정을 완료한 뒤, 스마트디자인 편집창 위에 있는 '저장' 버튼을 클릭해 주세요.

모바일 상품 상세페이지에 노출되는 적립금 단위를 설정한 단위로 노출하고 싶어요.

모바일 상품 상세 페이지 적립금 단위명 변경 방법

  1. [관리자] 디자인 > 디자인 보관함 으로 이동 후, '모바일(탭)' 을 선택하여 수정이 필요한 디자인의 '편집' 버튼을 클릭해 주세요.
  2. 스마트디자인 편집창의 왼쪽 아래 검색창에 'product/detail.html'을 검색하여 해당 페이지를 열어주세요.
  3. ▼ 아래와 같이 빨간색 소스를 삭제파란색 소스를 추가해 주신 후 저장을 눌러주세요.

    ##중간 생략##
    <tr class="mileage {$mileage_display|display}">
    <th scope="row">{$mileage_name}</th>
    <td>
    {$mileage_list}
    <p class="{$txt_mileage_display|display}"><span id="span_mileage_text">{$txt_mileage_value}</span><span class="{$txt_mileage_percent_display|display}">({$txt_mileage_percent}%)</span></p>
    <p class="{$cash_mileage_display|display}"><img src="{$cash_mileage_icon}" alt="무통장 결제시 적립금"><span class="{$cash_mileage_value_display|display}"> {$cash_mileage_value|numberformat} 원</span> <span class="{$cash_mileage_percent_display|display}">{$cash_mileage_percent}%</span></p>
    <p class="{$card_mileage_display|display}"><img src="{$card_mileage_icon}" alt="카드 결제시 적립금"><span class="{$card_mileage_value_display|display}"> {$card_mileage_value|numberformat} 원</span> <span class="{$card_mileage_percent_display|display}">{$card_mileage_percent}%</span></p>
    <p class="{$tcash_mileage_display|display}"><img src="{$tcash_mileage_icon}" alt="실시간 계좌이체시 적립금"><span class="{$tcash_mileage_value_display|display}"> {$tcash_mileage_value|numberformat} 원</span> <span class="{$tcash_mileage_percent_display|display}">{$tcash_mileage_percent}%</span></p>
    <p class="{$mileage_mileage_display|display}"><img src="{$mileage_mileage_icon}" alt="적립금 결제시 적립금"><span class="{$mileage_mileage_value_display|display}"> {$mileage_mileage_value|numberformat} 원</span> <span class="{$mileage_mileage_percent_display|display}">{$mileage_mileage_percent}%</span></p>
    <p class="{$cell_mileage_display|display}"><img src="{$cell_mileage_icon}" alt="휴대폰 결제시 적립금"><span class="{$cell_mileage_value_display|display}"> {$cell_mileage_value|numberformat} 원</span> <span class="{$cell_mileage_percent_display|display}">{$cell_mileage_percent}%</span></p>
    <p class="{$deposit_mileage_display|display}"><img src="{$deposit_mileage_icon}" alt="예치금 결제시 적립금"><span class="{$deposit_mileage_value_display|display}"> {$deposit_mileage_value|numberformat} 원</span> <span class="{$deposit_mileage_percent_display|display}">{$deposit_mileage_percent}%</span></p>
    <p class="{$escrow_mileage_display|display}"><img src="{$escrow_mileage_icon}" alt="에스크로 결제시 적립금"><span class="{$escrow_mileage_value_display|display}"> {$escrow_mileage_value|numberformat} 원</span> <span class="{$escrow_mileage_percent_display|display}">{$escrow_mileage_percent}%</span></p>
    <p class="{$vcash_mileage_display|display}"><img src="{$vcash_mileage_icon}" alt="가상계좌 결제시 적립금"><span class="{$vcash_mileage_value_display|display}"> {$vcash_mileage_value|numberformat} 원</span> <span class="{$vcash_mileage_percent_display|display}">{$vcash_mileage_percent}%</span></p>
    <p class="{$icash_mileage_display|display}"><img src="{$icash_mileage_icon}" alt="가상계좌 결제시 적립금"><span class="{$icash_mileage_value_display|display}"> {$icash_mileage_value|numberformat} 원</span> <span class="{$icash_mileage_percent_display|display}">{$icash_mileage_percent}%</span></p>
    <p class="{$kpay_mileage_display|display}"><img src="{$kpay_mileage_icon}" alt="케이페이 결제시 적립금"><span class="{$kpay_mileage_value_display|display}"> {$kpay_mileage_value|numberformat} 원</span> <span class="{$kpay_mileage_percent_display|display}">{$kpay_mileage_percent}%</span></p>
    <p class="{$paynow_mileage_display|display}"><img src="{$paynow_mileage_icon}" alt="페이나우 결제시 적립금"><span class="{$paynow_mileage_value_display|display}"> {$paynow_mileage_value|numberformat} 원</span> <span class="{$paynow_mileage_percent_display|display}">{$paynow_mileage_percent}%</span></p>
    <p class="{$payco_mileage_display|display}"><img src="{$payco_mileage_icon}" alt="페이코 결제시 적립금"><span class="{$payco_mileage_value_display|display}"> {$payco_mileage_value|numberformat} 원</span> <span class="{$payco_mileage_percent_display|display}">{$payco_mileage_percent}%</span></p>
    <p class="{$kakaopay_mileage_display|display}"><img src="{$kakaopay_mileage_icon}" alt="카카오페이 결제시 적립금"><span class="{$kakaopay_mileage_value_display|display}"> {$kakaopay_mileage_value|numberformat} 원</span> <span class="{$kakaopay_mileage_percent_display|display}">{$kakaopay_mileage_percent}%</span></p>
    </td>
    </tr>
    ##중간 생략##

 

 

 

 

 

 

모바일쇼핑몰 상세페이지에 상품 이미지 대신 회색 이미지가 나오는데 어떻게 해야 할까요?

이미지 로딩 속도 개선 설정을 사용하는 경우, 이미지 파일 용량 크기가 너무 크면 회색 이미지가 오래 노출돼요.

이미지 로딩 속도 개선 설정 방법 (이미지 Lazyload 기능)

이미지 로딩 속도 개선 설정은 처음부터 모든 이미지를 로드하지 않고, 스크롤을 할 때마다 동적으로 이미지를 로드하여 '최초 로딩 시간을 단축해주는 기능' 이기에 이미지의 개수가 많고 각 이미지의 파일 사이즈가 작은 경우에 효과적이에요.
  1. [관리자] 쇼핑몰 설정 > 사이트 설정 > 쇼핑몰 환경 설정 으로 이동해 주세요.
  2. 모바일(탭) > 기본설정 > 사용설정 화면 내 '상품 상세 이미지 로딩 속도 개선' 항목에서 '사용함' 을 선택한 후, '저장' 버튼을 클릭해 주세요.

이미지 로딩 속도 개선 설정을 사용하면 회색 이미지가 나오는 이유

이미지 로딩 속도 개선 설정을 사용하면 화면 아래쪽의 이미지들은 트래픽이 거의 발생하지 않는 매우 작은 이미지로 대신 로드되며, 스크롤이 해당 이미지의 위치에 도달하면 회색 이미지가 원본 이미지로 바뀌는 방식이에요.

'상세 페이지열기 > 회색 이미지 > 스크롤 > 원본이미지 다운로드 > 원본이미지 보임' 의 단계를 거치는 과정에서 원본이미지가 다운로드 되는 동안 회색 이미지가 노출되는데요. 이 과정에서 이미지의 파일 사이즈가 클 수록 회색 이미지가 노출되는 시간이 길어지게 돼요.

회색 이미지의 노출 시간을 줄이는 방법

이미지 파일의 용량이 크면 그만큼 쇼핑몰 이용자의 모바일 데이터가 소진되므로 회색 이미지의 노출 시간을 줄이려면 이미지의 파일 사이즈를 줄여야 해요.
만약 이미지를 더 이상 줄이기 어렵다면 이미지를 여러장으로 나누어 개당 이미지의 용량만 줄이는 것도 방법이에요.
이미지 최적화 방법은 [스마트디자인 서포트] 쇼핑몰 운영 노하우 > 스마트디자인 시작 > 이미지최적화 > '이미지 용량 최적화' 에서 확인해 주세요.

모바일 Lazy Loading 또는 더보기 기능 적용하기

모바일 쇼핑몰의 이미지 로딩을 구현하는 방법은 두 가지가 있어요. 상품 상세 이미지 로딩을 Lazy Lading 또는 [더보기] 형태로 구현하는 방법을 알아보도록 해요.
2개 기능은 동시 사용할 수 없으며 각 쇼핑몰에 맞게 운영해주세요.

 

Lazy Loading 이란?
사용자 화면에 보이는 이미지만 로딩하고 다른 이미지들은 사용자가 스크롤하면서 이미지에 가까워지면 로딩되는 방식입니다.

1. 설정하기

2. 불필요한 소스 삭제하기

상품상세 화면에서 <div module="product_additional">의 모듈을 찾아 그 안에 아래 소스가 있다면 제거해 주세요.

<!--@js(/js/module/product/additional.js)-->
<!--@js(/js/module/product/additional_animation.js)-->

.... 중간생략 ....

<div class="btnMore" id="btnMore">
<a href="#none">
더보기<span class="icoMore"></span>
</a>
</div>

 

[더보기] 방식 사용하기

1. 설정하기

Lazy Loading 과 [더보기]는 함께 사용할 수 없기 때문에 쇼핑몰 관리자에서 '모바일 쇼핑몰 > 모바일 환경설정 > 기본설정(탭) > 사용설정 > 상품 상세 이미지 로딩 속도 개선' 설정을 "사용안함 "으로 변경해 주세요.
사용자 화면에 보이는 이미지만 로딩하고 다른 이미지들은 사용자가 스크롤하면서 이미지에 가까워지면 로딩되는 방식이에요.

2. HTML 소스 추가하기

상품 상세 화면에서 <div module="product_additional ">의 모듈을 찾아 더보기 모듈 적용 후 아래 소스와 같이 수정해 주세요.

<!-- 더보기모듈 적용전 소스 -->
<div module="product_additional ">
<!--@css(/css/module/product/additional.css)-->
<!--@css(/css/module/product/additional_animation.css)-->

<div id="prdDetail ">
<div class="button" id="prdDetailBtn">
<a href="/product/zoom.html?product_no={$product_no}" class="btnNormal ">원본보기 <span class="ico "></span></a>
</div>
<div id="prdDetailContent">{$product_detail}</div>
</div>
<!-- //더보기모듈 적용전 소스 -->

<!-- 더보기모듈 적용후 소스 -->
<div id="prdDetail" module="product_additional">
<!--@css(/css/module/product/additional.css)-->
<!--@js(/js/module/product/additional.js)-->
<!--@js(/js/module/product/additional_animation.js)-->
<div class="button" id="prdDetailBtn">
<a href="/product/zoom.html?product_no={$product_no}" class="btnNormal">원본보기 <span class="ico"></span></a>
</div>
<div id="prdDetailContent" class="prdDetailView">{$product_detail}</div>
<div class="btnMore" id="btnMore">
<a href="#none">
더보기<span class="icoMore"></span>
</a>
</div>
</div>
<!-- //더보기모듈 적용후 소스 -->

 

3. 자바 스크립트 소스 추가하기

위 html을 적용한 후, 해당 javascript 파일에 아무 내용이 없다면 해당 소스는 정상 작동하지 않아요.
하단 소스를 각각 추가해 주세요.

<!--@js(/js/module/product/additional.js)-->

/**

* 모바일 상품상세 더보기

* @package app/Shop

* @subpackage Front/Disp/Product

* @since 2014. 5. 12.

* @version 1.0

*/

 

 

$(function() {

var $DetailMore = {

/*

* current module name

*/

sModule : 'xans-product-additional',

 

/*

* active div

*/

iActive : 0,

 

/**

* module

*/

$module : null,

 

/**

* detail

*/

$detail : null,

 

/**

* more

*/

$more : null,

 

/**

* real height

*/

realHeight : 0,

 

/**

* fake height

*/

fakeHeight : 0,

 

/**

* init

*/

init : function() {

// validate

if (this.validate === false) return;

 

// set object

this.setObject();

 

// set detail height

this.setDetailHeight();

 

// set more

this.setMore();

},

 

 

 

/**

* set event

*/

setMore : function() {

 

if (this.realHeight <= this.fakeHeight) {

this.$more.remove();

} else {

this.$more.unbind().bind('click', function() { if (this.validate === false) return; $DetailMore.load(); });

}

},

 

/**

* set detail height

*/

setDetailHeight : function() {

this.$detail.css({'max-height' : parseInt($(window).height()*4) + 'px', overflow : 'hidden'});

this.fakeHeight = this.$detail.height();

},

 

/**

* validate

*/

validate : function() {

 

if (mobileWeb === false) return false;

},

 

/**

* set object

*/

setObject : function(){

 

try {

// current module class

var sActiveProduct = this.iActive > 0 ? '.' + this.sModule + '-' + this.iActive : '.' + this.sModule;

// set module

this.$module = $(sActiveProduct);

 

// set detail

this.$detail = this.$module.find('div.prdDetailView');

 

// set more

this.$more = this.$module.find('div.moreBtn');

 

// set real height

this.realHeight = this.$detail.height();

} catch(e) { console.log(e); }

},

 

/**

* load detail

*/

load : function() {

this.$detail.css({'max-height' : 'none'});

this.$more.remove();

}

};

 

$DetailMore.init();

});

 

<!--@js(/js/module/product/additional_animation.js)-->

$(function(){
var sModule = '#prdDetail', $pop = $(sModule).find('img');

// set pop image
$pop.each(function(i){ $(this).data('index', i).css('z-index', '100'); });

$pop.click(function(){
var _index = $(this).data('index');
$pop.each(function(i){
if (i != _index) {
$(this).css("z-index", "100").removeClass();
} else {
$(this).css("z-index", "9999");
$(this).removeClass().delay(1).queue(function (a) {
$(this).addClass("animate pop");
a();
$(this).dequeue();
});
}
});
});
});

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