테마 코드 편집

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

테마 코드를 편집하면 자동 업그레이드 대상에서 제외될 수 있습니다. HTML 또는 Liquid 설정이나 Shopify 앱을 사용하여 필요한 항목을 변경할 수 없는 경우에만 테마 코드를 편집해야 합니다.

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

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

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

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

테마 코드 편집

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

단계:

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

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

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

확장 아이콘

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

축소 아이콘

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

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

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

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

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

  1. 템플릿 머리글 아래에서 최근에 편집한 .liquid 파일 중 하나를 클릭합니다.

    liquid 파일 열기

  2. .liquid 파일 이름 옆에 있는 이전 버전을 클릭합니다.

    이전 버전

  3. 드롭다운 메뉴를 클릭하여 이전 버전을 선택합니다. 날짜 스탬프를 클릭하면 해당 코드가 저장된 버전으로 되돌아갑니다.

    되돌리기 예시

  4. 선택 사항: 미리 보기를 클릭하고 오류가 수정되었는지 확인합니다.

다크 모드

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

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

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

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

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

사용자 지정 관련 지원

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

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

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

무료 체험