테마 코드 편집

이 페이지는 Apr 20, 2024에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/online-store/themes/theme-structure/extend/edit-theme-code에서 확인하십시오.

테마 코드를 편집하여 온라인 스토어를 세부적으로 변경할 수 있습니다. 테마를 구성하는 대다수 파일에는 Shopify의 템플릿 언어인 Liquid가 포함되어 있습니다. 테마 파일에는 HTML, CSS, JSON 및 JavaScript도 포함되어 있습니다. HTML 및 CSS 사용법을 알고 Liquid에 대해 기본적으로 이해하고 있는 경우에만 테마의 코드를 편집하십시오.

이 페이지의 정보

테마 사용자 지정 전 확인 사항

테마 사용자 지정을 준비하려면 다음 권장 작업을 완료하십시오.

  • 테마를 복제하여 백업 복사본을 생성합니다. 복사본이 있으면 필요 시 손쉽게 변경 사항을 취소하거나 다시 시작할 수 있습니다.
  • 사용 가능한 지원 수준을 파악해 둡니다.
  • 이미지 업로드 요구 사항 및 모범 사례를 확인합니다.

테마 코드 편집

테마의 코드를 편집할 수 있습니다.

단계:

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. ... > 코드 편집을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. ... > 코드 편집을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. ... > 코드 편집을 클릭합니다.

코드 편집기의 왼쪽에는 테마 파일의 디렉토리가 표시되며 오른쪽에는 파일을 보고 편집할 수 있는 공간이 표시됩니다.

왼쪽 디렉토리에서 파일을 클릭하면 코드 편집기에서 해당 파일이 열립니다. 동시에 여러 파일을 열고 편집할 수 있습니다. 수정하는 모든 파일은 파일 이름 옆에 점이 표시됩니다.

수정된 파일 옆에 점이 표시된 테마 파일 디렉터리

따라서 변경을 한 파일을 추적할 수 있습니다.

이전 버전의 테마로 되돌리기

테마 파일을 변경한 후 되돌려야 하는 경우 .liquid 파일을 변경하기 전의 시간 및 날짜로 개별적으로 되돌릴 수 있습니다.

단계:

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  3. 템플릿 머리글에서 최근에 편집한 .liquid 파일 중 하나를 클릭합니다.
  4. .liquid 파일 이름에서 현재 버전을 클릭합니다.
  5. 드롭다운 메뉴를 클릭하여 이전 버전을 선택합니다. 날짜 스탬프를 클릭하면 해당 코드가 저장된 버전으로 되돌아갑니다.
  6. 선택 사항: 스토어 미리 보기를 클릭하여 오류가 수정되었는지 확인합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 템플릿 머리글에서 최근에 편집한 .liquid 파일 중 하나를 클릭합니다.
  6. .liquid 파일 이름에서 현재 버전을 클릭합니다.
  7. 드롭다운 메뉴를 클릭하여 이전 버전을 선택합니다. 날짜 스탬프를 클릭하면 해당 코드가 저장된 버전으로 되돌아갑니다.
  8. 선택 사항: 스토어 미리 보기를 클릭하여 오류가 수정되었는지 확인합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 템플릿 머리글에서 최근에 편집한 .liquid 파일 중 하나를 클릭합니다.
  6. .liquid 파일 이름에서 현재 버전을 클릭합니다.
  7. 드롭다운 메뉴를 클릭하여 이전 버전을 선택합니다. 날짜 스탬프를 클릭하면 해당 코드가 저장된 버전으로 되돌아갑니다.
  8. 선택 사항: 스토어 미리 보기를 클릭하여 오류가 수정되었는지 확인합니다.

Theme Check

코드 편집기에는 라이브 테마에서 오류를 발견하는 대신 코드를 작성하는 즉시 피드백을 제공하여 오류를 방지하는 데 도움을 주는 기능인 Theme Check가 포함되어 있습니다.

코드 편집기에서 Theme Check는 편집한 코드에서 다음 오류를 식별할 수 있습니다:

  • 상점 속도를 느리게 할 수 있는 파서 차단 스크립트
  • 번역 파일 간 불일치(예: 번역 키 누락, 로캘 파일에서 일치하지 않는 번역)
  • 템플릿 누락

오류는 코드 아래에 빨간색 선으로 표시됩니다. 오류를 확인하려면 강조 표시된 선 위에 마우스를 올리십시오.

Theme Check에서 코드 오류를 감지하는 예

테마 코드 사용자 지정 튜토리얼

테마 코드 사용자 지정 튜토리얼에 따라 온라인 스토어를 변경할 수 있습니다. 튜토리얼은 수정하는 기능이나 페이지 유형을 기준으로 구성되어 있습니다.

테마 사용자 지정 튜토리얼은 사용하는 테마 아키텍처 버전으로 나누어집니다. 테마 아키텍처 버전을 식별하는 방법을 알아보십시오.

사용자 지정 관련 지원

테마 변경 관련 지원이 필요한 경우 테마 개발자에게 문의할 수 있습니다.

테마 사용자 지정과 관련하여 사용 가능한 다른 리소스는 테마 지원용 추가 리소스를 참조하십시오.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험