👚

스킨

현재 이용 중인 스킨을 편집하고, 새로운 스킨을 다운로드하여 스킨을 변경하는 등 내 쇼핑몰의 화면을 자유롭게 꾸며 보세요.

디자인 스토어를 통해 새로운 스킨을 무료로 다운로드할 수 있습니다.

관리자 > 디자인 > 디자인 > 디자인스토어에 접근해 주세요.

제공되고 있는 무료 스킨을 확인하고 스킨 썸네일에 마우스를 올려 [미리보기]를 눌러 주세요.

미리보기 화면 상단의 [노트북 ⏷]을 누르면 이용 기기에 따라 달라지는 화면을 볼 수 있어요.

보고 있는 스킨이 마음에 든다면 다시 디자인 스토어로 돌아가 스킨 아래 [무료 다운로드] 또는 [커스텀 신청]을 눌러 주세요.

무료 다운로드 : 기본 형태의 스킨을 쇼핑몰에 추가합니다. 추가한 스킨은 관리자 > 디자인 > 디자인 > 스킨의 스킨 보관함에 저장됩니다.

커스텀 신청 : 위사에서 스킨을 세팅해 드립니다. 신청 페이지 아래에서 수정 지원 범위를 확인해 주세요.

관리자 > 디자인 > 디자인 > 스킨에서는 현재 쇼핑몰에서 사용하고 있는 스킨과 스킨 보관함에 저장되어 있는 스킨을 확인할 수 있습니다.

편집할 스킨을 찾아 [디자인 편집]을 눌러 주세요. 스킨의 디자인 편집창에 진입할 수 있습니다.

디자인 편집창 구조

디자인 편집창은 왼쪽 사이드바, 가운데 분할화면, 오른쪽 사이드바로 구성되어 있습니다.

왼쪽 사이드바

왼쪽 사이드바에서는 편집할 스킨과 편집할 페이지를 선택할 수 있습니다.

페이지	설명
상단 공통 페이지	쇼핑몰의 모든 페이지에서 동일하게 유지되는 상단 영역을 편집합니다. 일반적으로 로고, 검색창, 장바구니, 네비게이션 메뉴, 로그인/회원가입 버튼 영역 등이 포함됩니다.
하단 공통 페이지	쇼핑몰의 모든 페이지에서 동일하게 유지되는 하단 영역을 편집합니다. 일반적으로 회사 정보, 고객센터, 이용약관, SNS 링크, 은행 정보 영역 등이 포함됩니다.
공통 스타일시트	쇼핑몰 전체에 적용되는 색상, 폰트, 레이아웃 등을 선언하는 스타일 시트(CSS)를 편집합니다. 각 페이지에서 반복적으로 사용되는 디자인 요소를 한 번에 수정할 수 있습니다.
공통 스크립트	쇼핑몰 전반에서 사용되는 Javascript 코드를 관리합니다.
페이지	메인페이지, 상품 상세페이지, 상품 리스트 페이지, 마이페이지, 회원가입 페이지 등 쇼핑몰의 페이지별 디자인을 편집합니다.

가운데 분할화면

편집창 가운데는 HTML 에디터와 미리보기로 분할되어 있습니다.

HTML 에디터에서 편집한 내용이 미리보기 화면에 실시간으로 반영됩니다.

미리보기를 통해 편집한 내용에 문제가 없는지 점검하고 오른쪽 위 [저장]을 눌러 실제 쇼핑몰에 반영할 수 있습니다.

반응형 스킨이라면, 화면 위 []를 눌러 PC 화면과 MO 화면을 전환하며 확인할 수도 있습니다.

오른쪽 사이드바

오른쪽 사이드바에서는 스킨 편집 시 사용할 수 있는 요소를 확인하고, 편집 내용을 복구할 수 있습니다.

아이콘	메뉴명	설명
	디자인 코드	디자인 코드란, 쇼핑몰의 스킨을 구성할 때 사용할 수 있는 치환 코드입니다. 일반적으로 {{$코드명}}의 형태로 제공되며, 이를 스킨에 삽입하면 설정에 따라 인스타그램 피드, 상품 목록, 카테고리 목록, 게시물 목록 등 다양한 화면이 나타납니다. HTML 에디터에 삽입할 수 있는 디자인 코드를 확인하고 추가하거나 수정할 수 있습니다.
	이미지 관리	스킨에서 사용할 이미지 요소를 추가하거나 삭제할 수 있습니다. 이미지를 올릴 폴더를 선택한 후 [클릭 또는 파일 드래그로 해당 폴더에 이미지 업로드]를 눌러 이미지를 업로드해 주세요. 그 후 HTML 에디터에 커서를 놓고, 이미지를 올리면 본문에 이미지 소스가 삽입됩니다. 이미지는 관리자 > 디자인 > 디자인 > 이미지에서 동일하게 관리할 수 있습니다.
	데이터 복구	스킨 디자인을 수정할 때 백업 파일을 생성합니다. 백업 파일은 최대 5개까지 보관됩니다. [복구] 버튼을 누르면 생성된 백업 파일을 적용할 수 있습니다. 복구 시에는 복구 철회가 불가능하니 유의해 주세요.
	설정	가운데 HTML 에디터의 테마를 선택할 수 있습니다.

디자인 편집하기

스킨 디자인 편집 절차에 대한 안내입니다.

관리자 > 디자인 > 디자인 > 스킨에 접근해 주세요.

편집할 스킨을 찾아 [디자인 편집]을 눌러 편집창에 진입해 주세요.

왼쪽 사이드바에서 편집할 페이지를 찾아 눌러 주세요.

가운데 HTML 에디터를 통해 디자인을 편집해 주세요.

편집할 내용이 {{$코드명}} 형대로 구성되어 있다면, 오른쪽 사이드바에서 []를 눌러 디자인 코드를 편집해 주세요.

가운데 미리보기 화면을 통해 변경 사항을 확인해 주세요.

오른쪽 위 [저장]을 눌러 주세요.

관리자 > 디자인 > 디자인 > 스킨에 접근하여 스킨 보관함을 확인해 주세요.

•

스킨명을 누르면 스킨이 적용된 쇼핑몰 화면을 미리볼 수 있습니다. 

•

스킨 버전명 오른쪽 [최신버전 업데이트 > ]를 누르면 스킨을 최신화할 수 있습니다.

단, 최신버전 업데이트 시 스킨이 기본 상태로 되돌아가며 별도로 수정하신 내용이 있다면 모두 없어지니 반드시 유의해 주세요.

•

스킨을 쇼핑몰에 실제로 적용하고 싶다면 스킨 오른쪽 [사용 스킨 설정]을 눌러 주세요.

쇼핑몰의 사용 스킨이 변경됩니다.

인트로 페이지를 설정하면 쇼핑몰에 접근하였을 때 메인 페이지 대신 인트로 페이지가 노출됩니다.

쇼핑몰 도메인이 example.ccom 이라고 가정하였을 때, 인트로 페이지 활성화 여부에 따른 메인 페이지와 인트로 페이지의 URL은 아래와 같습니다.

인트로 페이지는 다양한 용도로 사용할 수 있습니다.

사이트 점검 시 고객님의 쇼핑몰 진입을 막기 위해 점검 안내 문구가 기재된 인트로 페이지를 띄운다던가, 브랜드 소개 페이지를 작성하고 페이지 클릭 시 메인페이지로 진입되도록 설정할 수도 있습니다.

이처럼 인트로 페이지는 그 필요에 따라 자유롭게 디자인할 수 있으며 쇼핑몰 운영 상황에 맞춰 활성화하거나 비활성화할 수 있습니다.

관리자 > 디자인 > 디자인 > 스킨에 접근해 주세요.

인트로 페이지를 설정할 스킨을 찾아 [⋯]을 눌러 스킨 설정을 선택해 주세요.

스킨 설정 창에서 인트로 페이지 사용 여부를 선택해 주세요.

사용함 : 직접 디자인한 인트로 페이지를 사용합니다. 관리자 > 디자인 > 디자인 > 스킨에 접근하여 [디자인 편집]을 누른 후 왼쪽 사이드바에서 메인페이지 > 인트로페이지를 찾아 페이지 내용을 꾸며 주세요.

사용 안 함 : 인트로 페이지를 사용하지 않습니다.

회원전용(로그인페이지) : 쇼핑몰에 로그인하지 않은 회원은 ‘로그인’ 페이지만 확인할 수 있습니다. 로그인을 완료하여야 쇼핑몰 메인페이지를 볼 수 있습니다.

오른쪽 위 [저장]을 눌러 주세요.