몰리뉴얼 디자인 수정 가이드

직접 수정이 어려우신가요? 구글 폼으로 수정을 요청하실 수 있습니다.

→ 수정 요청 구글 폼 바로가기

카페24 PRO에서 제공하는 스킨 5종의 경우 반응형 스킨으로 PC / 모바일 코드가 각각있어 각 스킨 및 영역별로 권장 이미지 사이즈가 다릅니다. 아래 사이즈 기준에 맞춰 이미지를 준비해 주세요.

영역별 위치 설명

권장 사이즈와 다른 비율의 이미지를 사용할 경우, 잘림 또는 여백이 발생할 수 있습니다.

이미지 링크(src)를 변경하기 전, 파일업로더를 통해 이미지를 먼저 업로드해 주세요.

1. 카페24 관리자 페이지 접속

2. 디자인(PC/모바일) 메뉴 이동

3. 파일업로더 클릭 → 새로운 팝업창이 열립니다.

1. 상단 이미지 업로드 영역에 이미지 파일 등록

2. Start Upload 버튼 클릭

3. 업로드 완료 후 ROOT 하단에 등록된 이미지 목록 확인

• 이미지 목록에서 주소복사 필드의 복사 버튼 클릭

• 복사된 URL이 이미지 링크(src)로 사용됩니다.

1. 스마트 디자인 편집창에서 수정하고 싶은 위치로 이동

2. src="" 따옴표 안에 복사한 이미지 링크 붙여넣기

3. 저장 후 PC / 모바일 화면 각각 확인

이미지를 업로드하지 않고 로컬 경로를 입력할 경우 정상 노출되지 않습니다.

아래 경로에서 HTML을 직접 수정할 수 있습니다.

1. 카페24 관리자 어드민 접속

2. 디자인(PC/모바일) 메뉴 이동

3. 디자인 편집 버튼 클릭

4. 디자인 편집창에서 쇼핑몰 메인 화면으로 이동

5. 수정하고 싶은 영역에 마우스를 올리면(마우스 오버) 영역이 표시됩니다.

6. 해당 영역을 클릭하면 수정 가능한 편집 화면으로 이동합니다.

카테고리 영역은 기본적으로 카페24 관리자 > 상품분류에 등록된 카테고리가 자동으로 노출됩니다.

다만, 상품분류 외에 고객센터, 스토어 안내, 이벤트 페이지 등 별도의 메뉴를 추가하고 싶은 경우에는 디자인 편집창에서 HTML을 직접 수정하여 메뉴를 추가할 수 있습니다.

1. 카페24 관리자 어드민 접속

2. 디자인(PC/모바일) 메뉴 이동

3. 디자인 편집 클릭

4. 쇼핑몰 메인 화면에서 카테고리 영역 클릭 (header.html)

아래와 같은 구조로 카테고리 메뉴가 구성되어 있습니다.

• 고객센터 메뉴 이후에 <li></li> 태그를 추가하여 사용하시면 됩니다.

• 메뉴 텍스트는 <a></a> 태그로 감싸 주세요.

• 연결할 링크는 <a href="링크URL">메뉴명</a> 형태로 입력합니다.

로고는 디자인 편집창에서 별도로 관리되는 영역으로, 아래 두 가지 방법 중 하나로 변경할 수 있습니다.

1. 카페24 관리자 어드민 접속

2. 디자인(PC/모바일) 메뉴 이동

3. 디자인 편집 클릭

4. 디자인 편집창에서 로고 영역 클릭

5. 레이아웃 – 상단로고 팝업 노출

6. 속성 버튼 클릭

7. 이미지 파일 선택 후 업로드

이 방법은 로고 이미지를 간편하게 교체하고 싶은 경우에 적합합니다.

파일업로더를 통해 이미지를 업로드한 후,

이미지 링크(URL)를 사용하여 로고를 변경할 수도 있습니다.

1. 디자인(PC/모바일) > 파일업로더에서 로고 이미지 업로드

2. 업로드된 이미지의 주소복사 버튼 클릭

3. 디자인 편집창에서 로고 영역 클릭

4. 레이아웃 – 상단로고 > HTML 진입

5. 이미지 설정 영역에서 src="" 따옴표 안에 복사한 이미지 링크 붙여넣기

6. 저장 후 정상 노출 여부 확인

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 메인 페이지 상단의 띠배너 영역 클릭

3. HTML 코드에서 문구 직접 수정

4. 링크 변경 시 href="" 안의 URL만 교체

5. PC와 모바일 양쪽 모두 동일하게 수정

6. 저장 버튼 클릭

• 문구 텍스트 변경

• 링크 URL 변경

• 배경색/폰트 색상 변경은 커스터마이징 영역

상품상세 페이지 안에 구매하기 버튼 문구를 변경하고 싶을 때 활용해보세요.

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 상품 상세 페이지로 이동

3. 해당 버튼 영역 클릭하여 HTML 편집 진입 (detail.html)

4. 코드 내에서 변경할 문구를 검색 (예: "BUY IT NOW")

5. 원하는 텍스트로 변경 (예: "구매하기")

6. 모듈명이 module="product_action" 로 된 영역 모두 동일하게 수정

7. 저장 버튼 클릭

SNS, 블로그, 외부 이벤트 페이지 등으로 연결하는 링크를 추가하거나 변경하는 방법이에요.

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 수정할 링크가 있는 영역 클릭

3. HTML 코드에서 href="" 따옴표 안의 URL을 원하는 주소로 변경

4. 새 탭에서 열리게 하려면 target="_blank" 속성 추가

5. 저장 버튼 클릭

1. 디자인 편집에서 하단 SNS 아이콘 영역 클릭

2. 각 SNS 아이콘의 href=""에 해당 SNS 계정 URL 입력

3. 사용하지 않는 SNS는 해당 <li> 태그를 주석 처리하거나 삭제

외부 링크 연결 시 반드시 https://로 시작하는 전체 URL을 입력하세요.

(예: https://www.instagram.com/계정명)

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 메인, 상품분류 → 상품이 노출되는 영역 html 페이지 클릭

3. <div class="thumbnail"> 영역 위치 찾기

4. id="{$image_big_id}" → id="{$image_medium_id}

5. src="{$image_big}" →src="{$image_medium}"

6. 해당 부분 모두 변경 (2개 존재)

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 메인, 상품분류, 상품검색결과, 상품상세 페이지에 포함되어 있는 css 파일 접근

3. 썸네일 영역 코드에 aspect-ratio : 1; 로 되어 있는 부분을 주석처리

1. [관리자] > 디자인(PC/모바일) > 디자인 편집 진입

2. 메인 페이지에서 메인진열 섹션을 클릭하여 HTML 편집 화면 진입

3. 코드에서 module="product_listmain_00" 부분을 찾습니다

4. 숫자 부분(1)을 원하는 메인진열 번호로 변경합니다

   • 예: module="product_listmain_2" → 메인진열 2번의 상품이 노출

   • 예: module="product_listmain_5" → 메인진열 5번의 상품이 노출

5. 저장 버튼 클릭

메인진열 번호는 어떻게 확인하나요?

[관리자] > 상품 > 상품 진열 > 메인진열 > [메인분류 관리] 버튼 클릭 > 모듈코드에서 확인할 수 있어요.

직접 수정이 어렵거나 지원 범위 내 작업을 요청하시려면 아래 채널을 이용해 주세요.

커스텀 요청건은 작업 범위에 해당되지 않습니다.

커스텀 디자인 작업이 필요한 경우,

카페24 디자인센터 → 디자인 유지보수 섹션에 등록된 에이전시를 활용하시는 방법을 안내드립니다.