테마 코드 편집

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

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

테마를 사용자 지정하기 전에 다음 작업을 수행하는 것이 좋습니다.

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

테마 코드 편집

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

단계:

  1. 작업 > 코드 편집을 클릭합니다.

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

코드 편집기 페이지

확장 아이콘을 클릭하면 코드 편집기가 전체 화면에 표시되도록 확장할 있습니다.

확장 아이콘

축소 아이콘을 클릭하면 페이지를 원래 표시되었던 상태로 되돌릴 수 있습니다.

축소 아이콘

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

수정된 파일 옆에 자주색 점이 표시된 테마 파일 디렉토리

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

저장을 클릭한 후 파일에 대한 변경 사항을 되돌리려면 해당 파일을 열고 이전 버전을 클릭합니다. 그러면 드롭다운 메뉴에 파일을 저장했던 각 날짜와 시간이 표시됩니다. 되돌릴 버전을 선택하고 저장을 클릭합니다.

이전 버전 드롭다운 메뉴

코드 편집기를 전체 화면으로 확장한 상태에서 페이지 하단의 버튼을 클릭하면 편집기 색상 배합을 밝게어둡게 간에 전환할 수 있습니다.

어두운 색상 배합이 적용된 상태로 표시된 코드 편집기

어둡게 표시한 편집기 사용 시의 이점에 대해 알아보려면 Shopify 파트너 블로그에서 어두운 테마의 이점: 어둡게 표시한 사용자 인터페이스를 참조하십시오.

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

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

사용자 지정 관련 지원

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

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

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

무료 체험