이 상품은 해외배송이 가능한 상품입니다
[ 23 ENGINE ] 카테고리 등록, 수정, 관리하기 | |
카테고리의 여백을 조절하거나, 글자에 색을 주거나, 혹은 수동으로 카테고리를 등록하는 방법을 안내합니다. |
|
사용후기 | 0 |
수량 |
|
|
|
|
수량 |
---|
할인가가 적용된 최종 결제예정금액은 주문 시 확인할 수 있습니다.
우선 스마트디자인 편집창을 열어주세요~
이 기능은 html,css를 기본적으로 수정해야 하므로 커스텀 작업에 해당합니다.
1. 카테고리 글자크기, 여백 설정하기
/_sp/css/customize.css 파일을 열어주세요.
왜 이 파일에 모든 코드를 넣냐면, 나중에 어느 부분을 수정했는지 쉽게 알 수 있도록 모아둔다고 보시면 됩니다.
여러분들은 스킨을 제작하는 입장이 아니라, 입맛에 맞게 하나씩 수정해서 사용하는 부분이므로 override 형태로 css를 덮어서 쓰시길 바랍니다.
물론 이 방식은 코드의 속도를 저하시키지만 여러분이 작성하는 코드 몇줄로 사용자들이 체감할 수 있는 경우는 없다고 단언합니다.
자 이제 코드를 작성할 준비가 되었으니, 카테고리의 폭을 설정해보도록 하겠습니다.
엔진의 카테고리는 센터정렬이므로, 좌우 폭을 설정해서 원하는 모습으로 설정하실 수 있겠습니다.
아래의 코드를 넣어서 수정해보시길 바랍니다.
#sp-category-1-normal > ul > li > a {
font-size: 13px; /* 글자크기 */
line-height: 48px; /* 카테고리의 높이 */
padding: 0 23px; /* 카테고리의 좌우 폭 : 위아래는 0, 좌우로는 23px씩 폭을 두라는 의미 */
letter-spacing: 0.05em; /* 카테고리의 자간을 넓게, 혹은 좁게 설정합니다. */
}
css 코드가 어렵게 보일 수 있겠지만,
사실 이 언어만 알아도 거의 대부분의 원하는 모습을 만들어낼 수 있습니다. ( 언어의 장벽도 굉장히 낮은편이구요 )
카테고리를 전체적으로 위처럼 수정했다면, 개별적으로도 한번 수정해보겠습니다.
2. 특정 카테고리의 스타일 변경하기
예를들어 이벤트나, 혹은 밀고 있는 카테고리가 있다면 아래와 같은 코드를 넣어서 특정 카테고리의 스타일을 변경하세요.
#sp-category-1-normal > ul > li[data-no="24"] > a {
color:#ff3300;
}
이 코드는 24번 카테고리에 해당하는 글자를 #ff3300 의 색상을 넣어라라는 의미입니다.
24번은 카테고리 번호입니다. 각 카테고리 번호는 아래의 이미지에서 확인하시길 바랍니다.
카테고리 번호를 이해하셨다면, 이제 원하는 모습으로 카테고리에 두께를 주거나 색상을 줄 수 있습니다.
간혹 어떤 분들께서는 카테고리에 [ <font color="red">DRESS</font> ] 이렇게 하시는 분이 있으신데요,
카테고리에 태그를 주는건 코드상으로 아주 좋지 않은 방법입니다. 가급적 이 방법은 사용하지 마시길 바랍니다.
3. 수동 카테고리 추가하기
브랜드소개, 게시판 등 카테고리가 아닌 링크를 카테고리 자리에 넣을 수 있습니다.
html을 편집하기 위해 아래의 경로로 파일을 열어주시길 바랍니다.
카테고리 스타일에 category-1 이라는건 앞으로 저희가 -2도 만들겠다는 의미로 보시면 되겠습니다 ^^
이 코드를 여시면 아래와 같은 카테고리 코드가 있습니다. 약 33번째 줄 입니다.
<!--카테고리-->
<!--@css(/_sp/apps/module/category/category.css)-->
<!--@js(/_sp/apps/module/category/category.js)-->
<div id="sp-category-1-normal" getcategory module="Layout_category">
<ul>
<li class="nohave" mom category data-no="BRAND" direction="left"><a href="/product/brand.html">BRAND</a></li>
<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li class="nohave" mom category data-no="{$cate_no}" direction="left"><a href="/product/list.html{$param}">{$name_or_img_tag}</a></li>
<li class="nohave" mom category data-no="TIMESALE" direction="left"><a href="/product/timesale.html">TIMESALE</a></li>
<li class="nohave" mom category data-no="REVIEW" direction="left"><a href="링크">REVIEW</a></li>
</ul>
</div>
붉은색 코드를 넣으면 타임세일 우측으로 수동 링크가 REVIEW 라는 이름으로 들어가게 됩니다.
만약 카테고리가 뎁스가 있는 경우라면 아래와 같은 마크업 구조로 추가 하시길 바랍니다.
2단계
<li mom="" category="" data-no="42" direction="left" class="nohave">
<a href="링크">대분류</a>
<div class="sp-sub-category">
<ul class="sp-sub-category-1">
<li data-no=""><a href="링크">중분류</a></li>
<li data-no=""><a href="링크">중분류</a></li>
</ul>
</div>
</li>
3단계
<li mom="" category="" data-no="42" direction="left" class="nohave">
<a href="링크">대분류</a>
<div class="sp-sub-category">
<ul class="sp-sub-category-1">
<li data-no="">
<a href="링크">중분류</a>
<ul class="sp-sub-category-2">
<li data-no=""><a href="링크">소분류</a></li>
<li data-no=""><a href="링크" class="sp-more">소분류</a></li>
</ul>
</li>
<li data-no=""><a href="링크">중분류</a></li>
</ul>
</div>
</li>
4단계
<li mom="" category="" data-no="42" direction="left" class="nohave">
<a href="링크">대분류</a>
<div class="sp-sub-category">
<ul class="sp-sub-category-1">
<li data-no="">
<a href="링크">중분류</a>
<ul class="sp-sub-category-2">
<li data-no=""><a href="링크">소분류</a></li>
<li data-no="">
<a href="링크" class="sp-more">소분류</a>
<ul class="sp-sub-category-3">
<li data-no=""><a href="링크">상세분류</a></li>
<li data-no=""><a href="링크">상세분류</a></li>
</ul>
</li>
</ul>
</li>
<li data-no=""><a href="링크">중분류</a></li>
</ul>
</div>
</li>
복잡해보이지만 실제로 복사해서 넣으시면 그렇게 어렵지 않으실거예요~
조금만 깊게, 관심있게 봐주시면 쉽게 이해하실 수 있습니다.
* 메인 카테고리에 노출되는 항목 설정하기
이 질문을 하시는 분들이 많으신데요, 관리자에서 쉽게 설정 가능하니 아래 이미지를 참고하시길 바랍니다.
시즌별로 어떤점이 차이가 있고 무엇을 사야하나요? 2018-10-26 |
상품이미지를 세로로 길게 하고 싶은데 가능한가요, 2018-10-26 |
구디자인을 사용해도 제작이 가능한가요? 2018-10-26 |
쇼핑몰 이외의 사이트도 개발하나요? 2018-10-21 |
세금계산서 발행이 가능한가요? 2018-10-21 |
앱도 함께 제작을 하시나요 ? 2018-10-21 |
회원 등급에 따른 혜택을 설명해주세요. 2018-10-21 |
디자인 유지보수는 어떻게 진행되나요 ? 2018-10-21 |
구매전 꼭!! 읽어주시길 바랍니다. 2016-04-11 |
이미지 편집, 상세 디자인 작업도 진행하나요? 2016-02-24 |
상품 등록도 해주시나요? 2016-02-24 |
원본 파일이 제공되나요? 2016-02-24 |
특정 부분만 디자인 할수도 있나요? 2016-02-24 |
입맛에 맞게 처음부터 주문 제작을 하고 싶어요. 2016-02-24 |
왜 게시판이랑 메일로만 업무를 진행하나요? 2016-02-24 |
작업완료 상태인데, 디자인이 적용이 안된 것 같아요. 2016-02-24 |
샘플디자인이랑 적용된 디자인이 다른 것 같아요. 2016-02-24 |
카페24 외에 다른 호스팅을 사용중인데 구매가 가능한가요? 2016-02-24 |
다른 업체디자인을 구매했는데, 수정이 가능한가요? 2016-02-24 |
단순복사를 구매할 경우, 수정은 어떻게 해야 하나요? 2016-02-24 |
VIP 자료실은 어떻게 이용할 수 있나요 ? 2016-02-24 |