주 콘텐츠로 건너뛰기

모바일 쇼핑몰 메인 상품 디자인 변경 방법

모바일 쇼핑몰 메인화면에 노출되는 상품을 SNS처럼 디자인 할 수 있는 디자인 모듈 적용 방법을 확인할 수 있어요.

자세히 알아보기

 

스마트디자인 편집창의 '편집' 기능으로 변경하기

스마트디자인 편집창에서 메인상품 모듈 '편집' 버튼을 클릭한 후 원하는 디자인 형태를 선택하여 적용해 보세요.
017.png

디자인 소스로 편집하기

아래 안내되는 소스의 [seq]로 표시된 곳에는 모바일 쇼핑몰에 진열할 메인 분류의 모듈코드 번호를 입력해 주세요.
※ 메인 분류의 모듈 코드번호는[관리자] 상품 > 상품 진열 > 메인 진열 에 '메인 분류 관리'에서 확인할 수 있어요.

  1. 1번 형태 상품 디자인
    • 화면 위치 : 메인화면(index.html)
      아래와 같이 파란색 소스를 추가해 주세요.

      ## 상단 생략 ##

      <div class="mPrdList typeThumb" module="product_listmain_[seq]">
          <!--@css(/css/module/product/listmain_[seq].css)-->
          <!--@js(/js/module/product/main_block.js)-->  
          <!--
              $count = 6
              $only_html = yes
              $moreview = yes
          -->
          <h2>{$category_title_text}</h2>
          <ul class="grid">
              <li class="big">
                  <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
              </li>
              <li class="item">
                  <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
              </li>
              <li class="item">
                  <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
              </li>
              <li class="item">
                  <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
              </li>
              <li class="item">
                  <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
              </li>
              <li class="item">
                  <div class="thumbnail"><a href="/product/detail.html{$param}"><img src="{$image_medium}" alt=""></a></div>
              </li>
          </ul>
      </div>

      ## 하단 생략 ##

    • 화면 위치 : CSS > 모듈(module) > 상품(product) > listmain_[seq].css
      아래와 같이 파란색 소스를 추가해 주세요.
      .xans-product-listmain-[seq] { padding:0; background-color:#fff; }
      .xans-product-listmain-[seq] h2 { max-height:43px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:43px; padding:0 42px 0 14px; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_title_close.gif") no-repeat right 14px top 50%; background-size:13px 8px; cursor:pointer; }
      .xans-product-listmain-[seq]img { max-width:100%; }
      .xans-product-listmain-[seq]li { vertical-align:top; }
      .xans-product-listmain-[seq] > ul > li > ul { display:table; table-layout:fixed; width:100%; padding:0 7px; font-size:0; line-height:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
      .xans-product-listmain-[seq] > ul > li > ul > li { position:relative; display:inline-block; margin:0 0 14px; vertical-align:top; font-size:12px; line-height:1.4; }
       /* swipe 기능을 사용하지않는경우 */
      .xans-product-listmain-[seq]> ul[class*="grid"] { display:table; table-layout:fixed; width:100%; box-sizing:border-box; padding:0 11px; font-size:0; line-height:0; }
      .xans-product-listmain-[seq] > ul[class*="grid"] > li { position:relative; display:inline-block; vertical-align:top; font-size:12px; line-height:1.4; }
       
      .xans-product-listmain-[seq]ul { display:inline-table; width:100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:0; line-height:0; }
      .xans-product-listmain-[seq] ul:after { content:""; display:block; clear:both; }
      .xans-product-listmain-[seq] li { float:left; width:33.33%; padding:0 4px 6px 3px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
      .xans-product-listmain-[seq] li.big { width:66.66%; padding:0 4px 4px 3px; }
      .xans-product-listmain-[seq] li.big .thumbnail { min-height:188px; }
      .xans-product-listmain-[seq].thumbnail { overflow:hidden; border:1px solid #ededed; min-height:80px; }
      .xans-product-listmain-[seq] .thumbnail img { width:100%; }
    • js > 모듈(module) > 상품(product) > main_block.js
      아래와 같이 파란색 소스를 추가해 주세요.
      // 상품이미지 높이 값
      $(document).ready(function() {
          resizeContent();
      });
      $(window).resize(function() {
          resizeContent();
      });
      function resizeContent() {
          var bigHeight = $('.big > .thumbnail').height();
          $('.item > .thumbnail').css({'height':(bigHeight/2)-4+'px'});
      };
  2. 2번 형태 상품 디자인
    • 화면 위치 : 메인화면(index.html)
      아래와 같이 파란색 소스를 추가해 주세요.

      ## 상단 생략 ##

      <div class="typeGallery" module="product_listmain_[seq]">
          <!--@css(/css/module/product/listmain_[seq].css)-->
          <!--@js(/js/module/product/main_gallery.js)-->
          <!--
              $count = 4
              $moreview = yes
          -->
          <ul class="grid2">
              <li>
                  <div class="thumbnail"><a href="#none"><img src="{$image_medium}" alt="{$seo_alt_tag}"></a></div>
                  <div class="information" data-url="/product/detail.html{$param}">
                      <a href="#none">
                          <p class="name {$product_name_display|display}">{$product_name}</p>
                          <p class="price {$product_price_display|display}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></p>
                      </a>
                  </div>
              </li>
              <li>
                  <div class="thumbnail"><a href="#none"><img src="{$image_medium}" alt="{$seo_alt_tag}"></a></div>
                  <div class="information" data-url="/product/detail.html{$param}">
                      <a href="#none">
                          <p class="name {$product_name_display|display}">{$product_name}</p>
                          <p class="price {$product_price_display|display}">{$disp_product_price} <span class="{$product_price_ref_display|display}">{$txt_product_price_ref}</span></p>
                      </a>
                  </div>
              </li>
          </ul>
      </div>

      ## 하단 생략 ##

    • 화면 위치 : CSS > 모듈(module) > 상품(product) > listmain_[seq].css
      아래와 같이 파란색 소스를 추가해 주세요.
      .xans-product-listmain-[seq] { padding:0; background-color:#fff; }
      .xans-product-listmain-[seq] h2 { max-height:43px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:43px; padding:0 42px 0 14px; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/bg_title_close.gif") no-repeat right 14px top 50%; background-size:13px 8px; cursor:pointer; }
       
      /* 타입 : 갤러리 */
      .xans-product-listmain-[seq] { margin:0; }
      .xans-product-listmain-[seq] ul { display:table; table-layout:fixed; padding:0 14px 0 12px; font-size:0; line-height:0; }
      .xans-product-listmain-[seq] img { max-width:100%; }
      .xans-product-listmain-[seq] li { position:relative; display:inline-block; margin:0 0 2px; padding:0; vertical-align:top; overflow:hidden; font-size:13px; line-height:1.2em; }
      .xans-product-listmain-[seq] .thumbnail { margin:0; padding:0 2px; }
      .xans-product-listmain-[seq] .thumbnail img { width:100%; border:1px solid #ededed; }
      .xans-product-listmain-[seq] .information,
      .xans-product-listmain-[seq] .information a,
      .xans-product-listmain-[seq] .information:before { width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
      .xans-product-listmain-[seq] .information { position:absolute; left:0; bottom:-40px; height:40px; padding:0 1px 0 3px; }
      .xans-product-listmain-[seq] .information:before { display:block; content:""; height:100%; background:#000; opacity:0.6; -moz-opacity:0.6; -webkit-opacity:0.6; }
      .xans-product-listmain-[seq] .information:after { display:block; content:""; position:absolute; top:0; right:12px; width:20px; height:100%;
          background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_arrow_white.png") 0 center no-repeat; background-size:20px 20px;
          -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); transform: rotate(270deg); }
      .xans-product-listmain-[seq] .information a { display:block; position:absolute; top:0; height:100%; overflow:hidden; padding:5px 38px 5px 5px; color:#fff; }
      .xans-product-listmain-[seq] .information a p { height:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .xans-product-listmain-[seq] .information a .price { margin:4px 0 0; font-weight:bold; }
      .xans-product-listmain-[seq] .information a .price span { display:none; }
       
      .xans-product-listmain-[seq] .grid1 li { width:100%; }
      .xans-product-listmain-[seq] .grid1 li .name { font-size:15px; }
      .xans-product-listmain-[seq] .grid2 li { width:50%; }
      .xans-product-listmain-[seq] .grid2 li .name { font-size:13px; }
      .xans-product-listmain-[seq] .grid3 li { width:33.333%; }
      .xans-product-listmain-[seq] .grid3 li .name { font-size:11px; }
      .xans-product-listmain-[seq] .grid4 li { width:25%; }
      .xans-product-listmain-[seq] .grid4 li .name { font-size:11px; }
    • js > 모듈(module) > 상품(product) > main_block.js
      아래와 같이 파란색 소스를 추가해 주세요.
      $(document).ready(function(){ 
          // 갤러리 탭 이벤트
          var galleryTab = function() {
              var sModule = 'xans-product-listmain';
              var $gallery = $('.' + sModule);
              var $galleryList = $gallery.children('ul');
              $galleryList.delegate('li > div.information', 'click', function(e) {
                  var $information = $(this);
                  var height = $information.height();
                  $information.css({bottom: '-' + height + 'px', opacity: '0'});
                  e.stopPropagation();
                  document.location.replace($(this).data('url'));
              });
              $gallery.delegate('li > div.thumbnail', 'click', function(e) {
                  e.stopPropagation();
                  var $information = $(this).parent().find('div.information');
                  var height = $information.height();
                  if (typeof($information.attr('status')) === 'undefined' || $information.attr('status') == 'hide') {
                      $information.animate({
                          opacity: 1,
                          bottom: 1,
                      }, 300, function() {
                          $information.attr('status', 'show');
                      });
                  } else {
                      $information.animate({
                          opacity: 0,
                          bottom: '-' + height + 'px',
                      }, 300, function() {
                          $information.attr('status', 'hide');
                      });
                  }
              });
          };
          galleryTab();
      });
이 페이지가 도움이 되었나요?
현재 콘텐츠