아이디저장


더보기 >










[공지] 미션 도전하기 전에 꼭 읽어보세요.
[공지] 초급미션이 A코스,B코스로 분리되었습니다.

미션 A코스 [중급25단] 쇼핑몰 상품분류별 다른 디자인 만들기 및 가상분류
2011-11-19 12:00:59
아람스쿨 조회수 1545

드디어 오늘이 쇼핑몰의 마지막 미션이랍니다!

이전 미션까지 쇼핑몰의 세부화면디자인에 대해서 살펴보았습니다. 이전에도 언급해듯이 쇼핑몰관련 페이지는 모든 페이지를 반드시 사용할 필요는 없답니다. 필요에 따라서 페이지를 추가하거나 사용하지 않아도 됩니다.

대부분의 쇼핑몰에서는 상단, 왼쪽, 하단이 메인화면과 세부화면에서 동일한 형태로 나타납니다. 쇼핑몰을 이쁘고 알차게 꾸미고 싶다면 이번시간에 진행하는 미션을 충분히 습득하시길 바랍니다.

이번 미션은 쇼핑몰에서 각 카테고리의 디자인을 다르게 설정하는 방법과 가상분류에 대해서 살펴보겠습니다.

 

 

 

 

 

 

 


 

 

우선 각 카테고리의 디자인을 다르게 설정하는 방법에 대해서 알아보도록 하겠습니다.

각 카테고리의 디자인을 변경하기 위해서는 카테고리의 내용을 수정할 수 있는 [쇼핑몰관리 상품분류관리 분류1 관리]으로 이동합니다.

잡화 카테고리의 상단과 하단 디자인을 변경해보도록 하겠습니다. 해당카테고리의 수정버튼을 클립합니다.


※ 대분류 카테고리의 디자인을 변경할 경우, 하위카테고리는 자동으로 대분류의 디자인을 그대로 따라갑니다.


 

 

새로운 디자인을 삽입하기 위해서 상품목록 디자인 설정에서 "상단/하단 HTML수정"의 체크를 해제하세요.
 

 

디자인 이미지가 없는 관계로 아래와 같이 상단 HTML과 하단 HTML에 입력하고 수정버튼을 눌러주세요.

※ 여기서는 간략히 텍스트로 입력했지만 나중에 이미지로 이쁘게 디자인해서 HTML코드로 삽입하시기 바랍니다.


 

 

홈페이지에서 잡화 카테고리를 클립해봅시다.


 

 

동일한 방법으로 화장품 카테고리도 디자인도 변경해 봅시다.

  ① [쇼핑몰관리 상품분류관리 분류1 관리]으로 이동해서 화장품 카테고리의 수정버튼을 클릭합니다.

  ② 상단 HTML과 하단 HTML에 아래와 같이 삽입합니다.


 

 

③ 홈페이지에서 화장품 카테고리를 클릭해보세요.


 


이와 같이 설정하면, 각 카테고리마다 서로 다른 디자인이 적용된 멋진 홈페이지를 볼 수 있을 것입니다.

 

 

 

 

 

 

 

 

 

 


 

 

여기서  "상단디자인과 하단디자인을 다른 위치에 넣고 싶어요~" 라고 질문하시는 분들 있을겁니다.

 

지금부터 상단디자인과 하단디자인의 위치를 변경해봅시다.

앞에서 작업한 디자인은 모두 쇼핑몰의 상품목록에 나타나는 부분입니다. 따라서 [디자인관리 고급 디자인 관리 세부 화면 디자인]을 이동한 후 [쇼핑몰]상품관련의 상품목록::분류기준1을 선택합니다.

소스전체를 천천히 보고, 상단디자인과 하단디자인이 삽입되는 부분을 찾아봅시다.

 

아래와 같이 상단디자인은 {CATE_TOP_DESIGN}이고, 하단디자인은 {CATE_BOTTOM_DESIGN}입니다. 이 부분을 본인 바꾸고자 하는 위치로 이동시키면 됩니다.



  <!--아래 코드는 카테고리 관리에서 입력한 상단디자인html을 출력 합니다.-->
  {CATE_TOP_DESIGN}
  ...
 
  <!--아래 코드는 카테고리 관리에서 입력한 하단디자인html을 출력 합니다.-->
  {CATE_BOTTOM_DESIGN}
 

 

상품목록에서 카테고리 출력부분의 아래쪽으로 상단디자인이 나타나도록 아래와 같이 {CATE_TOP_DESIGN}의 위치를 수정합니다.

 

 

 

 

아래와 같이 상단디자인의 위치가 변경된 것을 확인할 수 있습니다.


 

 

 

 

 

 

 

 

 

 


 

 

지금부터 가상분류에 대해서 알아보도록 하겠습니다.

가상분류란 말그대로 가상의 분류입니다. 진짜가 아니란 거죠. 그러면, 가상분류는 뭐할때 쓰나요? 라고 하실 겁니다.

가상분류는 현재 분류되어 있는 상품들을 모아서 새로운 분류를 만드는데 사용합니다. 예를 들어, "X세대 스타일"이란 가상 분류를 만들었다고 합시다. 그러면, 여기에는 신발, 모자, 벨트, 화장품, 의류 등의 각 카테고리에서 가상분류에 해당하는 상품들을 묶어 새로운 분류로 만들 수 있답니다. 따라서 가상분류에는 새로운 상품을 등록할 필요가 없습니다.

백문이 불여일타!!  한번 만들어봅시다~~

 

가상분류도 하나의 카테고리이므로 [쇼핑몰관리 상품분류관리 분류1 관리]로 이동합니다.

대분류생성을 클릭하고 아래와 같이 텍스트분류명으로 "X세대 스타일"으로 을 입력하고, 가상분류에 체크하고 등록합니다.

 

 

 

"(가상)X세대 스타일"이라는 새로운 가상분류가 만들어졌습니다.


 

 

생성된 가상분류에 상품을 추가해보겠습니다.

[쇼핑몰관리 상품분류관리 분류1 가상분류]로 이동하고, 가상분류관리를 생성된 "X세대 스타일"로 선택합니다. 

 

 

화면의 상단에서 가상분류에 추가될 상품의 카테고리를 선택하고 검색버튼을 클릭합니다.

 

 
검색결과로 나타나는 상품목록 중에서 가상분류에 필요한 상품을 선택한 후 선택추가버튼을 클릭합니다.
 
 
 
동일한 방법으로 각 카테고리에서 가상분류에 필요한 상품들을 추가합니다.
 
 
 
 
홈페이지에서 상단메뉴의 쇼핑몰을 클릭하고 왼쪽메뉴의 "X세대 스타일"을 클릭하여 확인합니다.
 
 
 


가상분류는 상품등록없이 기존의 상품을 이용해서 이벤트상품, 기획상품, 할인상품,.. 등을 만들 수 있습니다.

 

쇼핑몰 미션이 모두 끝났네요.. 짝짝짝~~~ 박수....

 

 

 

 

 

 

 

 

 

 

 

 

 

수고하셨습니다. ^^

 

 

 

완성화면 : http://uhkr40.aramschool.co.kr/shop_goods/goods_list.htm?list_type=&category=06000000

 

 

 

 

 

위 미션 수행 후 덧글에 소감 한마디 남겨주세요~~~~ ^0^

 

 

댓글 83개