테마 코드 편집
테마 코드를 편집하여 온라인 스토어를 세부적으로 변경할 수 있습니다. 테마를 구성하는 대다수 파일에는 Shopify의 템플릿 언어인 Liquid가 포함되어 있습니다. 테마 파일에는 HTML, CSS, JSON 및 JavaScript도 포함되어 있습니다. HTML 및 CSS 사용법을 알고 Liquid에 대해 기본적으로 이해하고 있는 경우에만 테마의 코드를 편집하십시오.
테마 사용자 지정 전 확인 사항
테마 사용자 지정을 준비하려면 다음 권장 작업을 완료하십시오.
- 테마를 복제하여 백업 복사본을 생성합니다. 복사본이 있으면 필요 시 손쉽게 변경 사항을 취소하거나 다시 시작할 수 있습니다.
- 사용 가능한 지원 수준을 파악해 둡니다.
- 이미지 업로드 요구 사항 및 모범 사례를 확인합니다.
테마 코드 편집
테마의 코드를 편집할 수 있습니다.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
... > 코드 편집을 클릭합니다.
iPhone
- Shopify 앱에서
를 탭합니다
. - 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- ... > 코드 편집을 클릭합니다.
Android
- Shopify 앱에서 를 탭합니다
.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- ... > 코드 편집을 클릭합니다.
코드 편집기의 왼쪽에는 테마 파일의 디렉토리가 표시되며 오른쪽에는 파일을 보고 편집할 수 있는 공간이 표시됩니다.
왼쪽 디렉토리에서 파일을 클릭하면 코드 편집기에서 해당 파일이 열립니다. 동시에 여러 파일을 열고 편집할 수 있습니다. 수정하는 모든 파일은 파일 이름 옆에 점이 표시됩니다.
따라서 변경을 한 파일을 추적할 수 있습니다.
이전 버전의 테마로 되돌리기
테마 파일을 변경한 후 되돌려야 하는 경우 .liquid 및 .json 파일을 변경하기 전의 시간 및 날짜로 개별적으로 되돌릴 수 있습니다.
자산 폴더에 있는 파일을 제외하고, 디렉터리 내 모든 폴더에 있는 테마 파일을 되돌릴 수 있습니다. theme.scss.liquid 및 theme.js 파일을 포함하여 자산 폴더에 있는 파일에는 이전에 편집된 버전이 저장되지 않습니다. 자산 폴더의 파일을 변경하는 경우 테마 지원팀에 문의하거나 Shopify 파트너를 고용해야 할 수도 있습니다.
단계:
데스크톱
Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
테마 파일 디렉터리에서 최근에 편집한
.liquid또는.json파일 중 하나를 클릭합니다.코드 편집기 상단에서 현재를 클릭합니다.
드롭다운 메뉴를 사용하여 이전 버전을 선택합니다. 날짜 스탬프를 선택하면 해당 코드가 저장된 버전으로 되돌아갑니다.
선택 사항: 스토어 미리 보기를 클릭하여 오류가 수정되었는지 확인합니다.
이전 버전으로 되돌리려면 저장을 클릭합니다.
iPhone
- Shopify 앱에서 를 탭합니다
.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 모든 테마 관리를 탭합니다.
- 편집할 테마를 찾아 ... 버튼을 탭하여 작업 메뉴를 연 다음 코드 편집을 탭합니다.
- 테마 파일 디렉터리에서 최근에 편집한
.liquid또는.json파일 중 하나를 탭합니다. - 코드 편집기 상단에서 현재를 탭합니다.
- 드롭다운 메뉴를 사용하여 이전 버전을 선택합니다. 날짜 스탬프를 선택하면 해당 코드가 저장된 버전으로 되돌아갑니다.
- 선택 사항: 스토어 미리 보기를 탭하여 오류가 수정되었는지 확인합니다.
- 이전 버전으로 되돌리려면 저장을 탭합니다.
Android
- Shopify 앱에서 를 탭합니다
.
- 판매 채널 섹션에서 온라인 스토어를 탭합니다.
- 테마 관리를 탭합니다.
- 편집할 테마를 찾아 ... 버튼을 탭하여 작업 메뉴를 연 다음 코드 편집을 탭합니다.
- 테마 파일 디렉터리에서 최근에 편집한
.liquid또는.json파일 중 하나를 탭합니다. - 코드 편집기 상단에서 현재를 탭합니다.
- 드롭다운 메뉴를 사용하여 이전 버전을 선택합니다. 날짜 스탬프를 선택하면 해당 코드가 저장된 버전으로 되돌아갑니다.
- 선택 사항: 스토어 미리 보기를 탭하여 오류가 수정되었는지 확인합니다.
- 이전 버전으로 되돌리려면 **✓**를 탭합니다.
Theme Check
코드 편집기에는 라이브 테마에서 오류를 발견하는 대신 코드를 작성하는 즉시 피드백을 제공하여 오류를 방지하는 데 도움을 주는 기능인 Theme Check가 포함되어 있습니다.
코드 편집기에서 Theme Check는 편집한 코드에서 다음 오류를 식별할 수 있습니다:
- 상점 속도를 느리게 할 수 있는 파서 차단 스크립트
- 번역 파일 간 불일치(예: 번역 키 누락, 로캘 파일에서 일치하지 않는 번역)
- 템플릿 누락
오류는 코드 아래에 빨간색 선으로 표시됩니다. 오류를 확인하려면 강조 표시된 선 위에 마우스를 올리십시오.
테마 코드 사용자 지정 튜토리얼
테마 코드 사용자 지정 튜토리얼에 따라 온라인 스토어를 변경할 수 있습니다. 튜토리얼은 수정하는 기능이나 페이지 유형을 기준으로 구성되어 있습니다.
사용자 지정 관련 지원
테마 변경 관련 지원이 필요한 경우 테마 개발자에게 문의할 수 있습니다.
테마 맞춤 설정에 도움이 되는 다른 리소스에 대해 자세히 알아보려면 테마 지원용 추가 리소스를 참조하세요.