🖥️MIME_PC 스킨 가이드

메뉴 미고정 (기본 설정) 스크롤을 이동 시, 메뉴가 화면과 함께 움직입니다. 메뉴 고정 스크롤 이동 시, 메뉴는 움직이지 않고 화면만 움직입니다. 쇼핑몰의 카테고리 메뉴 개수가 적을 경우, 메뉴 고정을 권장드립니다.

✔️ 메뉴 고정 방법

변경 위치 스타일시트 > goods > list.css 139줄 [변경 전] 139 .side_cont{position:absolute; top:0px; left:0px; width:200px; min-height:100%; z-index:150;} [변경 후] 139 .side_cont{position:fixed; top:0px; left:0px; width:200px; min-height:100%; z-index:150;}

아래 팝업 예시 이미지를 활용해 팝업을 등록하면, 아래와 같은 팝업이 메인화면에 노출됩니다. 메뉴 위치 관리자 > 디자인 > 팝업창 관리

[팝업 예시 이미지]

[팝업 등록 화면]

[팝업창 투명 설정 화면]

✔️ 팝업창 투명 설정

1. 팝업창으로 띄울 이미지를 'layer-close2.png'로 저장합니다.

2. ftp에 접속후 다운받은 이미지를 data/skin/front/스킨이름/img/btn/ 경로에 업로드합니다.

3. 아래 가이드 내용을 따라, CSS를 수정합니다. 변경 위치 css > common > layer > layer.css 96, 98, 99줄 [변경 전] 95 /* 시스템 팝업 시작 */

   96 .sys_pop{position:absolute; padding:20px 15px 10px; border:2px solid #727071; background:#fff;} 삭제 97 .sys_pop .box{position:relative; padding:38px 0 0;} 98 .sys_pop .box .close{display:block; position:absolute; top:6px; right:0; width:18px; height:18px; text-indent:-9999px; background:url('../../../img/btn/layer-close.png) no-repeat left top;} 변경 top:60px; right:55px; width:49px; height:49px 변경 layer-close2.png

   99 .sys_pop .box .view{border:1px solid #dbdbdb;} 삭제 [변경 후] 95 /* 시스템 팝업 시작 */

   96 .sys_pop{position:absolute; padding:20px 15px 10px;} 97 .sys_pop .box{position:relative; padding:38px 0 0;} 98 .sys_pop .box .close{display:block; position:absolute; top:60px; right:55px; width:49px; height:49px; text-indent:-9999px; background:url('../../../img/btn/layer-close2.png) no-repeat left top;}

   99 .sys_pop .box .view{}

디자인 스킨을 다운받고, 그 디자인 컨셉에 맞게 상품 세팅을 하려면, 가장 먼저 상품 이미지 사이즈 세팅이 필요합니다. ⚠️단, 상품이 이미 등록되어있는 경우 상품 이미지 사이즈 세팅을 다시 하면 모든 상품의 이미지 등록을 새로 진행해야 합니다.

⚠️상품 이미지 사이즈 설정 전, 각 상품 이미지 노출 위치 먼저 확인하시기 바랍니다. 상품이미지 사이즈 설정 매뉴얼 바로가기 >

✔️ 관리자 메뉴 위치 : 기본설정 > 상품 정책 > 상품 이미지 사이즈 설정

✔️ 사이즈 이미지 설정 예시

✔️DESIGN TIP 등록하고자 하는 상품 이미지가 배경이 흰색이고 상품 중심이라면 상품 이미지 테두리가 없는 것이 보기 좋습니다. 또한 상품 이미지 테두리가 없다면, 상품 정보의 정렬을 좌측 정렬에서 중앙 정렬로 바꾸는 것을 권장드립니다.

1. 이미지 테두리 없애기 진열 상품 이미지 border(테두리) 부분 전체를 삭제합니다.

   변경 위치 css > goods > list.css 31줄 31 .item_photo_box{display:inline-block !important; overflow:hidden; position:relative; text-align:center; border:1px solid #ebebeb; vertical-align:middle;} 삭제

2. 상품정보 중앙정렬로 바꾸기 변경 위치 css > goods > list.css 43줄 [변경 전] 43 .item_info_cont{display:table-cell(삭제); padding:20px 0 0 0; text-align:left(center로 수정); vertical-align:middle; font-size:12px;} [변경 후] 43 .item_info_cont{padding:20px 0 0 0; text-align:center; vertical-align:middle; font-size:12px;}

1️. 동영상 업로드하기

먼저, 동영상을 업로드 합니다. 샘플 사이트에서는 VIMEO 서비스를 사용했습니다. (https://vimeo.com/) ⚠️ 유튜브 동영상 사용시에도 방법은 동일합니다.

2. 동영상 복사하기

임베딩 소스를 복사합니다.

3. css 수정하기

아래 가이드를 참고해 index.html 파일내 18번 줄에 샘플 소스를 삭제하고, 위에서 복사한 임베딩 소스를 붙여넣습니다.

변경 위치 main > index.html 18줄 18 <iframe src="https://player.vimeo.com/video/248100452?autoplay=1&loop=1&color=e28686&title=0&byline=0&portrait=0" width="830" height="467" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

1. 동영상 삽입 소스 삭제 | 15~21줄 모두 삭제

삭제 위치 main > index.html 15~21줄

2. 동영상 영역 배경 삭제 (배경 이미지 스타일 주석처리)

변경 위치 main > index.html 12줄 [변경 전] 12 .main_sec2{background:url('../../img/common/bg_main_sec2.png') center top no-repeat; margin-top:80px;}

[변경 후] 12 .main_sec2{/*background:url('../../img/common/bg_main_sec2.png') center top no-repeat; margin-top:80px;*/}