📱MIME_Mobile 스킨 가이드
Last updated
Last updated
ℹ️MIME Mobile 스킨은 햄버거 버튼(메뉴 버튼) 클릭 시, 딤드 처리된 어두운 배경의 메뉴 스타일을 제공합니다. 이 스타일을 흰색 배경으로 변경을 원하시면, 아래 가이드를 참조해 수정하시기 바랍니다.
먼저 딤드처리된 전체 배경 컬러를 변경합니다.
변경 위치 css > gd_layout.css 67줄
67 #wrap nav .bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(33, 33, 33, 0.9); z-index:1001;}
→ background:rgba(256, 256, 256, 0.9)으로 변경
배경이 흰색으로 바뀌어서 원래 흰색이던 텍스트가 보이지 않게 되므로 텍스트 컬러를 변경합니다.
⚠️컬러 속성을 빼면, 디폴트 컬러값인 블랙 컬러가 됩니다. 다른 컬러로 변경을 원할 시, 컬러 코드값을 변경합니다.
변경 위치 css > proc > proc.css 7줄
7 .category_side > li a {position:relative; display:block; padding:12px 0 12px 0; font-size:18px; color:#ffffff;} 삭제
변경 위치 css > gd_layout.css 144, 117, 125줄
144 .nav_community_box .comm_tit {padding:10px 0 5px 0; margin:0 10px 0 10px; font-size:18px; color:#ffffff; font-weight:bold;} 삭제
117 .nav_community_box .board_cate li a {display:block; padding:5px 0; font-size:16px; color:#ffffff;} 삭제
125 .nav_tabmenu_box .brand_tit {display:block; padding:0 0 12px 0; font-size:18px; color:#ffffff; font-weight:bold;} 삭제
ℹ️Mobile 스킨의 상품 상세 페이지 하단에는 장바구니와 바로구매 버튼이 고정으로 위치합니다. 이 버튼의 스타일을 바꾸고 싶다면 아래 가이드를 참조해 수정하시기 바랍니다.
✔️ 아래 코드에서 원하는 컬러 코드값으로 변경해주세요. background : 배경 컬러 border : 테두리( 1px: 테두리 두께를 설정, solid : 실선을 뜻함 ) color : 텍스트 컬러
변경 위치 css > gd_button.css 166~168줄
✔️ 장바구니 버튼 수정하기
166 /* 장바구니 */.detail_cart_btn {display:block; width:100%; padding:12px 0 12px 0; font-size:16px; text-align:center; background:#465874; border:1px solid #465874; color:#ffffff; font-weight:bold; box-sizing:border-box;}
✔️ 구매불가 버튼 수정하기
167 /* 구매불가 */.detail_prd_no_btn {display:block; width:100%; padding:10px 0 10px 0; font-size:16px; text-align:center; background:#dcdcdc; border:1px solid #dcdcdc; color:#a5a5a5; font-weight:bold; box-sizing:border-box;}
⚠️구매불가 버튼은, 상품을 품절처리했을때 상세페이지에서 보이는 버튼입니다.
✔️ 바로구매 버튼 수정하기
168 /* 바로구매 */.detail_order_btn {display:block; width:100%; padding:12px 0 12px 0; font-size:16px; text-align:center; background:#323438; border:1px solid #323438; color:#ffffff; font-weight:bold; box-sizing:border-box;}
✔️ 상품 이미지 사이즈 세팅하기
디자인 스킨을 다운받고, 그 디자인 컨셉에 맞게 상품 세팅을 하려면,
가장 먼저 상품 이미지 사이즈 세팅이 필요합니다.
관리자 메뉴 위치 기본설정 > 상품 정책 > 상품 이미지 사이즈 설정
⚠️단, 상품이 이미 등록되어있는 경우
상품 이미지 사이즈 세팅을 다시 하면 모든 상품의 이미지 등록을 새로 진행해야 합니다.
⚠️상품 이미지 사이즈 설정 전, 각 상품 이미지 노출 위치 먼저 확인하시기 바랍니다. 상품이미지 사이즈 설정 매뉴얼 바로가기 >
✔️ 상품 진열 세팅하기
테마 등록 화면에서 아래 이미지를 참조해 팅을 진행합니다.
관리자 메뉴 위치 관리자 > 상품 > 상품 노출형태관리 > 테마관리 - [테마등록] 버튼 클릭
① 테마명은 알아보기 쉬운 이름으로 입력합니다.
샘플샵에서는 메인 진열용 운동화 상품 이미지 썸네일의 가로 사이즈가 168px 이므로 '모바일메인 168' 로 입력합니다.
② 앞서 등록한 상품 이미지 사이즈 설정 중에서 '심플(168)'을 선택합니다. ⚠️만약, 심플(168)이 없다면 상품이미지 사이즈 설정을 먼저 진행해야합니다.
③ 상품 노출 개수를 설정합니다. 마임 샘플샵에서는 2x8 로 설정합니다. 여기서 숫자 2는 온전히 보이는 상품의 개수를 의미합니다.
2x8 의 숫자 8은 가로로 나열된 총 상품 개수를 의미합니다.
샘플샵에서는 총 6개의 운동화를 롤링시켜서 보여주려고 합니다. (추가가 될수도 있으니 넉넉하게 8 이라고 입력합니다)
④ '상품 이동형' 디스플레이 유형을 선택합니다.
운동화 상품 맞춤형 테마가 셋팅이 되었으면, 진열설정에서 등록한 테마를 선택하고 상품을 진열합니다.
관리자 메뉴 위치 관리자 > 상품 > 상품 진열 관리 > 메인페이지 상품진열
ℹ️ 기본스킨에는 기본적으로 상품 이미지에 테두리가 있습니다. 이 테두리를 없애고자 한다면, 아래 가이드를 참조해 css 파일을 수정하시기 바랍니다.
✔️DESIGN TIP 등록하고자 하는 상품 이미지가 배경이 흰색이고 상품 중심이라면 상품 이미지 테두리가 없는 것이 보기 좋습니다.
진열 상품 이미지 border(테두리) 부분 전체를 삭제합니다.
변경 위치 css > goods > ist > list 01.css 10줄
10 goods_prd_item2 .goods_prd_img .img_box .img img {width:100%; border:1px solid #e5e5e5; box-sizing:border-box;}
삭제
⚠️ 모바일샵에서 여러가지 타입의 진열타입을 사용한다면, 해당 css 를 각각 수정해야합니다. list_01.css : 갤러리형 list_02.css : 상품 리스트형 list_04.css : 상품이동형 list_06.css : 스크롤형 list_07.css : 탭+상품이동형 list_09.css : 심플이미지형 list_11.css : 장바구니형
