주메뉴 바로가기 본문 바로가기

쇼핑몰 창업&운영에 꼭 필요한 혜택

자주 묻는 질문

궁금하신 사항을 FAQ를 통해 해결해드립니다.

퍼스트몰 라이브 쇼핑

[퍼스트몰 라이브 쇼핑] 라이브쇼핑 오픈 베타 스킨패치는 어떻게 하나요?

  • 퍼스트몰
  • 일반몰, 입점몰 본사

퍼스트몰 라이브쇼핑 오픈 베타서비스 이용을 위해서는 스킨패치를 필수로 진행해주셔야 합니다.
(단, 21년 1월 28일 이후 업데이트 된 최신 스킨을 다운로드 한 경우, 별도 스킨 패치를 진행하지 않으셔도 됩니다.)

스킨 패치를 진행하기 전 먼저 현재 사용중인 스킨 종류를 반드시 확인 하신 후 진행하시기 바랍니다.
패치 진행은 FTP 전용 프로그램 (파일질라 등) 을 사용하셔서 진행해 주시면 됩니다.
FTP 접속 계정 정보는 MY퍼스트몰 에서 확인 가능합니다. FTP 접속 정보 확인 방법 >

STEP 1. 현재 사용중인 스킨을 확인해주세요.
- 전용스킨(PC), 전용스킨(Mobile), 반응형스킨 여부 확인 후 STEP 2 진행

STEP 2. 현재 사용중인 스킨에 해당하는 최신 패치 파일을 다운로드 하세요.
- 전용스킨 (PC) 패치 파일 다운로드
- 전용스킨 (Mobile) 패치 파일 다운로드
- 반응형스킨 패치 파일 다운로드

STEP 3. 다운로드 받은 파일에는 신규 추가된 파일이 있습니다.  압축 해제 후 사용중인 스킨 폴더에 업로드해주세요.
수정 파일은 아래 내용을 참고하여 해당 위치에 소스를 직접 입력 후 저장하세요.

수정 파일 수정 방법
관리자 > 디자인환경 > html 소스 에디터 메뉴 또는 FTP 프로그램으로 접속하신 후
아래 변경이 필요한 파일 경로로 접속하신 후, 해당 코드를 수정해 주세요.
변경된 코드는 주황색으로 표기되어 있습니다.

① 전용스킨 (PC)

  • 파일 경로 : [스킨폴더]/css/style.css 
        @charset "utf-8";
    @import url('//fonts.googleapis.com/earlyaccess/nanumgothic.css');
    @import url('../css/jqueryui/black-tie/jquery-ui-1.8.16.custom.css');
    @import url('../css/common.css');
    @import url('../css/layout.css');
    @import url('../css/contents.css');
    @import url('../css/board.css');
    @import url('../css/buttons.css');
    @import url('../css/broadcast.css');
    @import url('../css/user.css');
  • 파일 경로: [스킨폴더]/_modules/common/html_header.html (약 123 줄 부터) 
        <link rel="stylesheet" type="text/css" href="/data/font/font.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" /
    <link rel="stylesheet" href="/app/javascript/plugin/touchSlider/swiper.css" />    
    <link rel="stylesheet" type="text/css" href="/app/javascript/plugin/slick/slick.css">        
    <!--{ ? ISADMIN || writeditorjs }-->
    <link rel="stylesheet" type="text/css" href="/app/javascript/plugin/editor/css/editor.css" />
    <!--{ / }-->
    <!--{ ? config_system.favicon }-->
    <!-- 파비콘 -->
    {? _SERVER.HTTPS == 'on'}
    <link rel="shortcut icon" href="https://{_SERVER.HTTP_HOST}/{config_system.favicon}" />
    {:}
    <link rel="shortcut icon" href="//{_SERVER.HTTP_HOST}/{config_system.favicon}" />
    {/}
    <!--{ / }-->
    <!-- /CSS -->
    <!-- 자바스크립트 -->
    <script type="text/javascript" src="/app/javascript/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/app/javascript/jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.poshytip.min.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.activity-indicator-1.0.0.min.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.cookie.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.slides.min.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.bxslider.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/slick/slick.min.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.placeholder.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/custom-select-box.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.sprintf.js"></script>
  • 파일 경로: [스킨폴더]/goods/view.html (약 435 줄 부터) 
        <!-- 상품 스펙 -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td valign="top">
                <table width="100%" cellpadding="0" cellspacing="0" align="center" >
                <tr>
                    <td>
                        <div id="goods_thumbs">
                            <!--{? images && count(images) > 1 }-->
                            <div class="slide-wrap">
                                <div class="slides_wrap">
                                <!--{@ images }--><div class="main_tabs_contents slide {? .index_ == 0}active{/}" id="slide{.index_}" style="text-align:center;">
                                <a href="javascript:;" style="margin:auto;display:inline-block;width:100%;">
                                {? .view.image_type == 'video'}
                                <iframe  width="{goods.video_size_mobile0}" height="{goods.video_size_mobile1}" src="{.view.image}" frameborder="0" allowfullscreen  ></iframe>
                                {:}
                                <img src="{.view.image}" width="100%" onerror="this.src='../images/common/noimage.gif'" title="{images[1].large.label}" {? goods_view_image_alt}alt="{goods_view_image_alt}"{/}/>
                                {/}
                                </a>
                                </div><!--{/}-->
                                </div>
                            </div>
                            <div class="relative"><div id="goods_thumbs_paging" idx="0"></div></div>
                            <!--{:}-->
                            <a href="javascript:;">
                            {? images[1].view.image_type == 'video'}
                                <iframe  width="{goods.video_size_mobile0}" height="{goods.video_size_mobile1}" src="{images[1].view.image}" frameborder="0" allowfullscreen  ></iframe>
                            {:}
                                <img src="{images[1].view.image}" width="100%" onerror="this.src='../images/common/noimage.gif'" title="{images[1].large.label}" {? goods_view_image_alt}alt="{goods_view_image_alt}"{/}/>
                            {/}
                            </a>
                            <!--{/}-->
                        </div>
                    </td>
                </tr>
                </table>
                <!-- //상품 이미지 -->
            </td>
        </tr>
        <!-- 퍼스트몰 라이브 알림 -->
        <!--{? braodcastData }-->
        <tr>
            <td>
                <div class="cast_notice">
                    <!--{ ? braodcastData.status == 'live'}-->
                    <img class="status" src="../images/broadcast/i_live.png" alt="방송 중">
                    <p class="notice_text">{braodcastData.start_date} 현재 방송 중</p>
                    <a class="btn_live" href="/broadcast/player?no={braodcastData.bs_seq}" target="_blank"><img src="../images/broadcast/btn_live_go.png" alt="시청하기"></a>
                    <!--{ : }-->
                    <img class="status" src="../images/broadcast/reserve_live.png" alt="방송 예정 LIVE">
                    <a class="notice_text" href="/broadcast/player?no={braodcastData.bs_seq}" target="_blank">{braodcastData.start_date} 라이브 쇼핑으로 만나보세요.</a>
                    <!--{ / }-->
                </div>
            </td>
        </tr>
        <!--{ / }-->
        <!-- //퍼스트몰 라이브 알림 -->
        {? eventEnd}
        <tr>
            <td class="hide">
                <table class="event_datetime" width="100%" border="0" cellpadding="0" cellspacing="0">
                <col /><col /><col width="120" />
                <tr>
                    <td align="left" class="fx15 pdl10">
                        <strong class="black">{=number_format(goods.event.event_order_ea)}개</strong> 구매 중
                    </td>
                    <td align="right">
                        남은시간
                    </td>
                    <td>
                        <div class="event_datetime_box">
                        <span id="soloday{goods.goods_seq}"></span><span class="fx13 notbold">일</span> <span id="solohour{goods.goods_seq}"></span> : <span id="solomin{goods.goods_seq}"></span> : <span id="solosecond{goods.goods_seq}"></span>
                        </div>
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        <!-- //타임세일 -->
        {/}

② 전용스킨 (Mobile)

  • 파일 경로 : [스킨폴더]/css/style.css 
        @charset "utf-8";
    @import url('//fonts.googleapis.com/earlyaccess/nanumgothic.css');
    @import url('../css/jqueryui/black-tie/jquery-ui-1.8.16.custom.css');
    @import url('../css/common.css');
    @import url('../css/board.css');
    @import url('../css/buttons.css');
    @import url('../css/mobile_pagination.css');
    @import url('../css/quick_design.css');
    @import url('../css/broadcast.css');
    @import url('../css/user.css');
  • 파일 경로: [스킨폴더]/_modules/common/html_header.html (약 142 줄 부터) 
        <link rel="stylesheet" href="/app/javascript/plugin/touchSlider/swiper.css" />
    <link rel="stylesheet" type="text/css" href="/app/javascript/plugin/slick/slick.css">
    <!--{ ? config_system.androidicon || config_system.iphoneicon }-->
    <!-- 바로가기아이콘 -->
    <link rel="apple-touch-icon" href="http{? _SERVER.HTTPS=='on'}s{/}://{_SERVER.HTTP_HOST}{=config_system.iphoneicon}" />
    <link rel="shortcut icon" href="http{? _SERVER.HTTPS=='on'}s{/}://{_SERVER.HTTP_HOST}{=config_system.androidicon}" />
    <!--{ / }-->
    <!-- /CSS -->
    <!-- 자바스크립트 -->
    <script type="text/javascript" src="/app/javascript/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/app/javascript/jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.poshytip.min.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.activity-indicator-1.0.0.min.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.cookie.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.slides.min.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.bxslider.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/jquery.placeholder.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/custom-select-box.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/custom-mobile-pagination.js"></script>
    <!--{? (ISADMIN || writeditorjs) && !_GET.mobileAjaxCall }-->
    <script type="text/javascript" src="/app/javascript/plugin/editor/js/editor_loader.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/editor/js/daum_editor_loader.js?file_use={=manager.file_use}"></script>
    <!--{ / }-->
    <script type="text/javascript" src="/app/javascript/plugin/validate/jquery.validate.js"  charset="utf-8"></script>
    <script type="text/javascript" src="/app/javascript/js/dev-tools.js"></script>
    <script type="text/javascript" src="/app/javascript/js/design.js"></script>
    <script type="text/javascript" src="/data/js/language/L10n_{config_system.language}.js?dummy={=date('YmdHis')}"></script>
    <script type="text/javascript" src="/app/javascript/js/common.js"></script>
    <script type="text/javascript" src="/app/javascript/js/common-mobile.js"></script>
    <script type="text/javascript" src="/app/javascript/js/front-layout.js"></script>
    <script type="text/javascript" src="/app/javascript/js/base64.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/ezmark/js/jquery.ezmark.min.js"></script>
    <script type="text/javascript" src="../../common/script.js"></script>
    <script type="text/javascript" src="../../common/jquery.touchSlider.js"></script>
    <script type="text/javascript" src="../../common/jquery.event.drag-1.5.min.js"></script>
    <script type="text/javascript" src="/app/javascript/js/goods-display_mobile.js?dummy=20180406"></script>
    <link rel="stylesheet" type="text/css" href="/app/javascript/plugin/jquery_swipe/jquery_swipe.css" />
    <script type="text/javascript" src="/app/javascript/plugin/jquery_swipe/jquery.event.swipe.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/touchSlider/swiper.js"></script>
    <script type="text/javascript" src="/app/javascript/plugin/slick/slick.min.js"></script>
  • 파일 경로: [스킨폴더]/goods/view.html (약 510 줄 부터) 
        <!-- 상품 스펙 -->
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td valign="top">
                <table width="100%" cellpadding="0" cellspacing="0" align="center" >
                <tr>
                    <td>
                        <div id="goods_thumbs">
                            <!--{? images && count(images) > 1 }-->
                            <div class="slide-wrap">
                                <div class="slides_wrap">
                                <!--{@ images }--><div class="main_tabs_contents slide {? .index_ == 0}active{/}" id="slide{.index_}" style="text-align:center;">
                                <a href="javascript:;" style="margin:auto;display:inline-block;width:100%;">
                                {? .view.image_type == 'video'}
                                <iframe  width="{goods.video_size_mobile0}" height="{goods.video_size_mobile1}" src="{.view.image}" frameborder="0" allowfullscreen  ></iframe>
                                {:}
                                <img src="{.view.image}" width="100%" onerror="this.src='../images/common/noimage.gif'" title="{images[1].large.label}" {? goods_view_image_alt}alt="{goods_view_image_alt}"{/}/>
                                {/}
                                </a>
                                </div><!--{/}-->
                                </div>
                            </div>
                            <div class="relative"><div id="goods_thumbs_paging" idx="0"></div></div>
                            <!--{:}-->
                            <a href="javascript:;">
                            {? images[1].view.image_type == 'video'}
                                <iframe  width="{goods.video_size_mobile0}" height="{goods.video_size_mobile1}" src="{images[1].view.image}" frameborder="0" allowfullscreen  ></iframe>
                            {:}
                                <img src="{images[1].view.image}" width="100%" onerror="this.src='../images/common/noimage.gif'" title="{images[1].large.label}" {? goods_view_image_alt}alt="{goods_view_image_alt}"{/}/>
                            {/}
                            </a>
                            <!--{/}-->
                        </div>
                    </td>
                </tr>
                </table>
                <!-- //상품 이미지 -->
            </td>
        </tr>
        <!-- 퍼스트몰 라이브 알림 -->
        <!--{? braodcastData }-->
        <tr>
            <td>
                <div class="cast_notice">
                    <!--{ ? braodcastData.status == 'live'}-->
                    <img class="status" src="../images/broadcast/i_live.png" alt="방송 중">
                    <p class="notice_text">{braodcastData.start_date} 현재 방송 중</p>
                    <a class="btn_live" href="/broadcast/player?no={braodcastData.bs_seq}" target="_blank"><img src="../images/broadcast/btn_live_go.png" alt="시청하기"></a>
                    <!--{ : }-->
                    <img class="status" src="../images/broadcast/reserve_live.png" alt="방송 예정 LIVE">
                    <a class="notice_text" href="/broadcast/player?no={braodcastData.bs_seq}" target="_blank">{braodcastData.start_date} 라이브 쇼핑으로 만나보세요.</a>
                    <!--{ / }-->
                </div>
            </td>
        </tr>
        <!--{ / }-->
        <!-- //퍼스트몰 라이브 알림 -->
        {? eventEnd}
        <tr>
            <td class="hide">
                <table class="event_datetime" width="100%" border="0" cellpadding="0" cellspacing="0">
                <col /><col /><col width="120" />
                <tr>
                    <td align="left" class="fx15 pdl10">
                        <strong class="black">{=number_format(goods.event.event_order_ea)}개</strong> 구매 중
                    </td>
                    <td align="right">
                        남은시간
                    </td>
                    <td>
                        <div class="event_datetime_box">
                        <span id="soloday{goods.goods_seq}"></span><span class="fx13 notbold">일</span> <span id="solohour{goods.goods_seq}"></span> : <span id="solomin{goods.goods_seq}"></span> : <span id="solosecond{goods.goods_seq}"></span>
                        </div>
                    </td>
                </tr>
                </table>
            </td>
        </tr>
        <!-- //타임세일 -->
        {/}

③ 반응형스킨

  • 파일 경로 : [스킨폴더]/_modules/common/html_header.html(약 143줄 부터) 
        <link rel="stylesheet" type="text/css" href="../../css/lib.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/board.css" />
    <link rel="stylesheet" type="text/css" href="../../css/buttons.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mobile_pagination.css" />
    <link rel="stylesheet" type="text/css" href="/link/css?k=quickdesign&v={=date('YmdHis')}" /><!-- Quick Design CSS →
    <link rel="stylesheet" type="text/css" href="../../css/broadcast.css" />  
    <link rel="stylesheet" type="text/css" href="../../css/user.css" /><!-- ++++++++++++ 스킨 사용자/제작자 CSS ++++++++++++ -->
    <!--{ ? ISADMIN || writeditorjs }-->
    <link rel="stylesheet" type="text/css" href="/app/javascript/plugin/editor/css/editor.css" />
    <!--{ / }-->
  • 파일 경로: [스킨폴더]/goods/view.html (약 585줄 부터) 
        <!-- ~~~~~ 단독 이벤트 ~~~~~ -->
    {? eventEnd}
    <li class="spec_solo_event">
        <ul class="list">
            <li class="buy_num"><strong class="num">{=number_format(goods.event.event_order_ea)}</strong><span designElement="text">개 구매중</span></li>
            <li class="remain_time">
                <span class="title"></span>
                <div class="event_datetime_box">
                    <span class="num2" id="soloday{goods.goods_seq}">00</span><span class="day" designElement="text">일</span>
                    <span class="num2" id="solohour{goods.goods_seq}">00</span> :
                    <span class="num2" id="solomin{goods.goods_seq}">00</span> :
                    <span class="num2" id="solosecond{goods.goods_seq}">00</span>
                </div>
            </li>
        </ul>
    </li>
    {/}
    <!-- ~~~~~ //단독 이벤트 ~~~~~ -->
    
    <!-- ~~~~~ 퍼스트몰 라이브 알림 ~~~~~ -->
    <!--{? braodcastData }-->
    <li>
        <div class="cast_notice">
            <!--{ ? braodcastData.status == 'live'}-->
            <img class="status" src="../images/broadcast/i_live.png" alt="방송 중">
            <p class="notice_text">{braodcastData.start_date} 현재 방송 중</p>
            <a class="btn_resp no_border" href="/broadcast/player?no={braodcastData.bs_seq}" target="_blank"><img src="../images/broadcast/btn_live_go.png" alt="시청하기"></a>
            <!--{ : }-->
            <img class="status" src="../images/broadcast/reserve_live.png" alt="방송 예정 LIVE">
            <a href="/broadcast/player?no={braodcastData.bs_seq}" class="notice_text" target="_blank">{braodcastData.start_date} 라이브 쇼핑으로 만나보세요.</a>
            <!--{ / }-->
        </div>
    </li>
    <!--{ / }-->            
    <!-- ~~~~~ 퍼스트몰 라이브 알림 ~~~~~ -->
    
    <!-- ~~~~~ 가격, 할인율, 할인내역 ~~~~~ -->
    <li class="deatil_price_area">
        {? goods.sale_rate}
            { ? goods.org_price != 0 && goods.sale_price != 0 }
            <div class="deatil_sale_rate">
                <p class="inner">
                    <span class="num">{=number_format(goods.sale_rate)}</span>%
                </p>
            </div>
            {/}
        {/}
        <!--{? goods.string_price_use }-->
            <p class="sale_price">{goods.string_price}</p>
        <!--{ : }-->
            <!--{ ? goods.org_price > goods.sale_price }-->
            <p class="org_price">
                <span class="dst_th_size">{=get_currency_price(goods.org_price,2,'','<s><span class="num">_str_price_</span></s>')}</span>
            </p>
            <!--{ / }-->
            <p class="sale_price">
                {? goods.sale_price > 0 }
                    {=get_currency_price(goods.sale_price,2,'','<span class="num">_str_price_</span>','price_won')}
                {:}
                    {=get_currency_price(0,2,'','<span class="num">_str_price_</span>','price_won')}
                {/}
            </p>
        <!--{ / }-->
        <!--{? goods.sale_price_compare && goods.sale_price > 0  && !goods.string_price_use }-->
            {=goods.sale_price_compare}
        <!--{ / }-->
    
        <!--{ ? (array_sum(sales.sale_list) - sales.sale_list.basic) > 0 }-->
        <button type="button" class="btn_open_small btn_resp B" onclick="detail_contents_toggle(this,'priceDetail')"><span designElement="text">혜택보기</span></button>
        <div id="priceDetail" class="detail_option_list hide">
            <ul>
            <!--{ @ sales.sale_list }-->
                <!--{ ? .value_ > 0 }-->
                <li>
                    <span class="title">{sales.title_list[.key_]}</span>
                    <span class="detail">{=get_currency_price(.value_,2)}</span>
                </li>
                <!--{ / }-->
            <!--{ / }-->
            </ul>
        </div>
        <!--{ / }-->
    </li>
    <!-- ~~~~~ //가격, 할인율, 할인내역 ~~~~~ -->
목록

TOP

대표 번호 1544-3270

  1. 1쇼핑몰 창업 및 신규 상담 문의
  2. 2쇼핑몰 기능 및 이용 문의
  3. 3쇼핑몰 이전 문의
  4. 4마케팅 및 광고 문의
  5. 5SI 및 홈페이지 제작 문의

전화상담 가능 시간

  • 일반 상담 : 평일 10:00 ~ 17:00 (주말/공휴일 휴무)
    일반 상담 : 격주 금요일(2,4주) : 10:00 ~ 12:30
    일반 상담 : 점심 12:30 ~ 13:30
  • 장애 상담 : 24시간 가능

입점형 구매상담 및 차이나 호스팅, 컨설팅
02-6907-6817  psw@gabiacns.com

쇼핑몰 맞춤개발 및 구축/SI
1544-6437  sales@gabiacns.com

홈페이지 제작
02-6907-6885  mjh@gabiacns.com

상담 예약

모든 상담원이 통화 중인 경우, 9번을 눌러 상담을 예약해주세요.
통화가 끝나면 고객께 다시 연락드립니다.
(상담 중에는 서비스 품질 향상을 위해 통화 내용이 녹음됩니다.)