테마 코드 편집

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

사용자 지정 기능이나 코드를 추가하고 싶은데 HTML, CSS, JavaScript로 웹사이트 개발 경험이 없는 경우 성장 과정을 통해 Shopify Expert를 고용해 볼 수 있습니다.

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

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

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

테마 코드 편집

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

단계:

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

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

코드 편집기 페이지

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

확장 아이콘

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

축소 아이콘

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

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

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

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

이전 버전 드롭다운 메뉴

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

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

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

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

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

사용자 지정 관련 지원

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

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

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

무료 체험