컨텐츠 바로가기


스마트디자인 팁 상세
제목 [해외몰현지화 TIP] 상품상세페이지에 중국 대표 SNS 공유버튼 추가하기!
작성자 대표 관리자 (ip:) 작성일 2015-05-18 17:32:29 조회수 1566

[ 해외쇼핑몰에 최적화된 운영을 위한 스마트디자인 활용방법 ]


중국에서 인기있는 SNS 공유버튼을 추가하는 방법을 안내드립니다.




 




1. PC 쇼핑몰에 추가하기


HTML 설정 안내에 따라, 상품상세페이지에 디자인 소스를 추가해주세요.


※ 중국어(간체) 스킨용 소스입니다.


1) 소스 추가 위치: PC 쇼핑몰 디자인편집창 > 상품상세(detail.html)





▼ 아래와 같이 파란색 소스를 추가 합니다.

##상단 생략##


<table border="1" summary="">

                <caption>SNS 商品促销</caption>

                <tbody>

                    <tr class="{$sns_display|display}">

                        <th scope="row">SNS 商品促销</th>

                        <td class="social">{$facebook_icon} {$twitter_icon}

                        <ul module="product_customsns"><li>{$customsns_icon}</li></ul>

                        <!-- JiaThis Button BEGIN -->

                        <div class="jiathis_style_24x24" style="display:inline-block;">

                            <a class="jiathis_button_tqq"></a>

                            <a class="jiathis_button_weixin"></a>

                            <a class="jiathis_button_renren"></a>

                        </div>

                        <script type="text/javascript">var jiathis_config = {data_track_clickback:'true'};

                        </script>

                        <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1963844"

                        charset="utf-8"></script>

                        <!-- JiaThis Button END -->

                       </td>

                       </tr>

                </tbody>

            </table>            


##하단 생략##




2. 모바일 쇼핑몰에 추가하기



HTML 설정 안내에 따라, 모바일 쇼핑몰 상품상세페이지에 디자인 소스를 추가해주세요.

※ 중국어(간체) 스킨용 소스입니다.


1) 소스 추가 위치: 모바일 쇼핑몰 디자인편집창 > 상품상세(detail.html)


▼ 아래와 같이 파란색 소스를 추가합니다.

##상단 생략##


<div class="snsLink {$sns_display|display}">

        {$facebook_icon} {$twitter_icon}

        <span module="product_customsns">{$customsns_icon}</span>

         <!-- JiaThis Button BEGIN -->

                       <div class="jiathis_style_24x24" style="display:inline-block;">

                            <a class="jiathis_button_tqq"></a>

                            <a class="jiathis_button_weixin"></a>

                            <a class="jiathis_button_renren"></a>

                        </div>

                        <script type="text/javascript">var jiathis_config = {data_track_clickback:'true'};

                        </script>

                        <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1963844"

                         charset="utf-8"></script>

             <!-- JiaThis Button END -->

    </div>

</div>


##하단 생략##



2) 소스 수정 위치: 디자인편집창 > 상품상세 CSS(detail.css)


▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가합니다.

##상단 생략##


/* sns */

 

.snsLink { padding:0 15px 20px; font-size:0; text-align:center; }

 

.snsLink img { margin:0 6px; font-size:12px }

 


.snsLink { padding:0 15px 20px; font-size:0; text-align:center; }

 

.snsLink img { width:24px; height:24px; margin:0 6px; font-size:12px; vertical-align:top; }

 

.snsLink .jiathis_style_24x24 a span { margin:0 3px; }


##하단 생략##

첨부파일
목록 관리자게시 삭제 수정