본문 바로가기

현재 위치
  1. HOME
  2. 쇼핑몰 TIP

쇼핑몰 TIP

온라인 쇼핑몰 제작부터 운영, 마케팅까지! 유용한 정보를 제공합니다.

카테고리 상세
번호 문의유형 제목
1171 자체 제작 쿠폰 이미지 등록하는 방법 조회수 8084
  • 작성일 2017-06-30 10:25:49
  • 추천 추천하기
  • 조회수 8084


원하는 쿠폰 이미지 등록하기




01

자체 제작 쿠폰 이미지 등록




카페24에서는 디자인을 하지 못하는 운영자도 쉽게 쿠폰 발행을 할 수 있도록

쿠폰 배경과 버튼을 각각 조합해 사용하는 기능을 제공하고 있는데요!







하지만!


직접 제작한 쿠폰 배너 이미지를 사용하고 싶다면?



쿠폰 정보와 다운로드 버튼을 숨기고

자체 제작한 배너 형식의 이미지 1개만 나오도록 하는 방법을 알려드릴게요!






1. 카페24 쇼핑몰 관리자로 접속



1) '프로모션 > 쿠폰관리 > 쿠폰 기본설정 > 진열 및 기본 디자인 설정'으로 이동합니다.


2) 쿠폰 다운로드 이미지/쿠폰 배경이미지 항목에 쿠폰 이미지를 직접 등록해주세요.






3) 상품 상세페이지에 들어가면 쿠폰 정보와 이미지 두 개가 동시에 표시됩니다.






2. 스마트디자인 편집창으로 접속



1) 상품상세(detail.html) 페이지를 열어 아래와 같이 파란색 코드를 추가해주세요.


<!-- 쿠폰 다운로드 -->
<div module="coupon_productdetail">
    <!--
        $coupon_down_result_url = /coupon/coupon_down_result.html
    -->
    <!--@css(/css/module/coupon/productDetail.css)-->
    <div class="title">
        <h3><span>쿠폰 다운로드</span></h3>
        <p class="button"><a href="#none" id="btn_all_coupondown"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_coupon_down.gif" alt="전체쿠폰다운받기" /></a></p>
    </div>
    <div class="couponSkinArea">
        <!--
            진열 방식에따라 아래의 ul class 변경
            1열 : ul class="grid1"
            2열 : ul class="grid2"
            3열 : ul class="grid3"
        -->
        <ul class="grid3">
            <li>
                <div class="coupon {$background_class}" style="background-image:url('{$background_url}')">
                    <div class="detail displaynone" {$call_coupon_detail}>
                        <strong class="title" style="color:#483b1b; font-family:Arial; font-size:11px;">{$coupon_name|cut:13,...}</strong>
                        <p class="discount" style="color:#d07b01; font-family:Dotum;"><span style="font-family:Verdana;">{$coupon_content}</span></p>
                        <p class="period" style="color:#685219; font-family:Dotum;">{$coupon_period}</p>
                    </div>
                    <div class="button"><a href="{$coupon_issue_url}"><img src="{$download_url}" alt="다운받기" /></a></div>
                </div>
            </li>
            <li>
                <div class="coupon {$background_class}" style="background-image:url('{$background_url}')">
                    <div class="detail displaynone" {$call_coupon_detail}>
                        <strong class="title" style="color:#483b1b; font-family:Arial; font-size:11px;">{$coupon_name|cut:13,...}</strong>
                        <p class="discount" style="color:#d07b01; font-family:Dotum;"><span style="font-family:Verdana;">{$coupon_content}</span></p>
                        <p class="period" style="color:#685219; font-family:Dotum;">{$coupon_period}</p>
                    </div>
                    <div class="button"><a href="{$coupon_issue_url}"><img src="{$download_url}" alt="다운받기" /></a></div>
                </div>
            </li>
        </ul>
    </div>
</div>

<!-- //쿠폰 다운로드 -->





2) 쿠폰존(coupon>coupon_zone.html) 페이지를 열어 아래와 같이 파란색 코드를 추가해주세요.


<div class="couponSkinArea">
    <ul class="grid2">
        <li>
            <div class="coupon {$background_class}" style="background-image:url('{$background_url}')">
                <div class="detail displaynone" {$call_coupon_detail}>
                    <strong class="title" style="color:#483b1b; font-family:Arial; font-size:11px;">{$coupon_name|cut:13,...}</strong>
                    <p class="discount" style="color:#d07b01; font-family:Dotum;"><span style="font-family:Verdana;">{$coupon_content}</span></p>
                    <p class="period" style="color:#685219; font-family:Dotum;">{$coupon_period}</p>
                </div>
                <div class="button"><a href="{$coupon_issue_url}"><img src="{$download_url}" alt="다운받기" /></a></div>
            </div>
        </li>
        <li>
            <div class="coupon {$background_class}" style="background-image:url('{$background_url}')">
                <div class="detail displaynone" {$call_coupon_detail}>
                    <strong class="title" style="color:#483b1b; font-family:Arial; font-size:11px;">{$coupon_name|cut:13,...}</strong>
                    <p class="discount" style="color:#d07b01; font-family:Dotum;"><span style="font-family:Verdana;">{$coupon_content}</span></p>
                    <p class="period" style="color:#685219; font-family:Dotum;">{$coupon_period}</p>
                </div>
                <div class="button"><a href="{$coupon_issue_url}"><img src="{$download_url}" alt="다운받기" /></a></div>
            </div>
        </li>
    </ul>
</div>




3) 모바일도 동일하게 상품상세(detail.html) 페이지를 열어 아래와 같이 파란색 코드를 추가합니다.


<div module="coupon_productdetail" class="toggle eToggle">
    <div class="title">
        <h2>쿠폰 다운로드</h2>
    </div>
    <ul class="contents">
        <li>
            <div class="coupon {$background_class}" style="background-image:url('{$background_url}')">
                <div class="detail displaynone" {$call_coupon_detail}>
                    <strong class="title" style="color:#483b1b; font-family:Arial; font-size:11px;">{$coupon_name|cut:13,...}</strong>
                    <p class="discount" style="color:#d07b01; font-family:Dotum;"><span style="font-family:Verdana;">{$coupon_content}</span></p>
                    <p class="period" style="color:#685219; font-family:Dotum;">{$coupon_period}</p>
                </div>
                <div class="button"><a href="{$coupon_issue_url}"><img src="{$download_url}" alt="다운받기"></a></div>
            </div>
        </li>
        <li>
            <div class="coupon {$background_class}" style="background-image:url('{$background_url}')">
                <div class="detail displaynone" {$call_coupon_detail}>
                    <strong class="title" style="color:#483b1b; font-family:Arial; font-size:11px;">{$coupon_name|cut:13,...}</strong>
                    <p class="discount" style="color:#d07b01; font-family:Dotum;"><span style="font-family:Verdana;">{$coupon_content}</span></p>
                    <p class="period" style="color:#685219; font-family:Dotum;">{$coupon_period}</p>
                </div>
                <div class="button"><a href="{$coupon_issue_url}"><img src="{$download_url}" alt="다운받기"></a></div>
            </div>
        </li>
    </ul>
</div>






02

적용 화면





자체 제작한 쿠폰이 노출 되고 있는 것을 확인해보세요!