컨텐츠 바로가기


스마트디자인 팁 상세
제목 [스마트디자인] 쿠폰 이미지를 자유롭게 등록하는 방법
작성자 대표 관리자 (ip:) 작성일 2016-10-04 09:59:00 조회수 4688

쿠폰 이미지를 자유롭게 등록하는 방법



카페24에서는 디자인을 하지 못하는 운영자도, 쿠폰 발행을 쉽게 할 수 있도록
쿠폰 배경과 버튼을 각각 조합해서 사용하는 기능을 제공하고 있습니다.



 

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


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

자체 제작한 배너 형식의 이미지 1개만 나오도록 하는 방법에 대해 안내하겠습니다.



1. 카페24 어드민으로 접속합니다.


1) 프로모션 > 쿠폰관리 > 쿠폰 기본설정 > 진열 및 기본 디자인 설정에 들어갑니다.

2) 쿠폰 다운로드 이미지 / 쿠폰 배경이미지 항목에 쿠폰 이미지를 직접 등록합니다.


 


상품 상세 페이지에 들어가니, 쿠폰 정보와 이미지 두 개가 동시에 노출되고 있습니다.






 



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>


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------



 


자체 제작한 쿠폰이 잘 노출 되고 있는 것을 확인할 수 있습니다.



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