테마 코드 편집

주의

테마 코드를 변경한 내용이 테마 업데이트와 호환되지 않는 경우 업데이트된 사본에서 모든 코드 변경 사항이 제거됩니다. Shopify 앱 또는 테마 편집기를 사용하여 필요한 내용을 변경할 수 없는 경우에만 테마 코드를 편집해야 합니다.

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

테마를 구매한 후에만 테마 코드를 편집할 수 있습니다. 여기에는 테마 편집기에서 AI 코드 생성기를 사용하는 것이 포함됩니다. 유료 테마의 체험 버전을 사용 중인 경우 코드를 변경하려면 먼저 구매해야 합니다.

비즈니스 성장시키기

사용자 지정 기능이나 코드를 추가하고 싶지만 HTML, CSS, JavaScript를 사용한 웹사이트 개발 경험이 없는 경우에는 Shopify 파트너 고용을 고려해 보십시오.

주의

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

• 테마를 복제하여 백업 사본을 생성하십시오. 이렇게 하면 필요할 때 변경 사항을 취소하고 다시 시작하기가 쉽습니다.
• 이용 가능한 지원 수준이 어느 정도인지 확실히 파악하십시오.
• 이미지 업로드의 요구 사항 및 모범 사례에 대해 알아보십시오.

코드 편집기에는 테마 파일 디렉터리와 파일을 표시하고 편집할 수 있는 공간이 표시됩니다. 디렉터리에서 파일을 클릭하면 코드 편집기에서 열립니다. 동시에 여러 파일을 열고 편집할 수 있습니다. 동시에 여러 파일을 열고 검토할 수도 있습니다.

테마 코드 편집

코드 편집기를 사용하여 테마 파일을 수정할 수 있습니다.

단계:

데스크톱

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. > 코드 편집을 클릭합니다.

모바일

1. Shopify app에서 아이콘을 탭합니다.

2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

3. 테마 관리를 탭합니다.

4. > 코드 편집을 탭합니다.

변경 사항 저장

파일을 편집하면 탭 이름 옆에 점이 표시되어 저장되지 않은 변경 사항이 있음을 나타냅니다. 저장 버튼을 클릭하여 변경 사항을 저장합니다. Mac의 경우 ⌘ + S, Windows의 경우 Ctrl + S를 입력하여 변경 사항을 저장할 수도 있습니다.

테마 코드 서식 지정

코드 들여쓰기를 수정하려면 Mac의 경우 ⌘ + Shift + P, Windows의 경우 Ctrl + Shift + P를 사용하여 명령 팔레트를 열고 format을 입력한 다음 문서 서식 지정을 선택합니다.

단계:

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. > 코드 편집을 클릭합니다.

3. 서식을 지정할 파일을 엽니다.

4. Mac의 경우 ⌘ + P, Windows의 경우 Ctrl + P를 입력합니다.

5. 명령 팔레트에서 format을 입력한 다음 키보드에서 Enter 키를 누릅니다.

6. 파일을 저장합니다.

파일 변경 사항 추적

수정된 테마 파일을 이전 버전으로 복원하려면 해당 파일의 타임라인 보기를 사용하십시오.

타임라인 보기는 한 번에 하나의 기존 파일만 복원합니다. 전체 테마를 복원하지 않으며 삭제된 테마 파일은 복구할 수 없습니다. 타임라인 기록은 제한되어 있으므로 이전 버전을 사용하지 못할 수 있습니다.

복원하면 유지하려는 변경 사항을 포함하여 전체 파일 내용이 교체됩니다. 파일을 복원하기 전에 변경 사항을 유지하려는 경우 현재 파일 내용을 안전한 곳에 복사하십시오.

단계:

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. > 코드 편집을 클릭합니다.

3. 검토하거나 복원할 기존 파일을 엽니다.

4. 선택 사항: 현재 변경 사항을 유지하려는 경우 복원하기 전에 현재 파일 내용을 안전한 곳에 복사합니다.

5. 타임라인 보기에서 타임라인의 항목을 클릭하여 차이점을 비교합니다.

6. 전체 파일 내용을 선택한 이전 버전으로 교체하려면 타임라인 항목을 마우스 오른쪽 버튼으로 클릭한 다음 내용 복원을 선택합니다.

7. 복원을 클릭합니다.

테마 확인

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

코드 편집기에서 Theme Check는 편집된 코드의 다음과 같은 오류를 식별할 수 있습니다.

• 스토어프론트 속도를 저하시킬 수 있는 파서 차단 스크립트
• 누락된 번역 키 또는 로캘 파일에서 일치하지 않는 번역과 같은 번역 파일 간의 불일치
• 누락된 템플릿

오류는 코드 아래에 빨간색 줄로 표시됩니다. 오류를 보려면 강조 표시된 줄 위로 마우스를 가져가세요.

코드 편집기에서 검색 및 바꾸기

다음 중 한 가지 방법으로 코드 편집기 내에서 검색할 수 있습니다.

• 특정 파일의 코드 검색.
• 테마의 모든 파일에서 코드 검색.

특정 파일의 코드를 바꾸거나 모든 테마 파일에서 여러 인스턴스를 바꿀 수도 있습니다. 이름으로 파일을 검색하여 파일을 열 수도 있습니다.

파일 내에서 검색

특정 파일에서 코드를 검색하고 코드를 바꿀 수 있습니다. 화살표 키를 사용하여 각 코드 인스턴스를 검토하세요.

코드를 검색한 후 파일의 코드를 바꿀 수 있습니다.

단계:

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. > 코드 편집을 클릭합니다.

3. 검색하려는 파일을 엽니다.

4. Mac에서는 ⌘ + F를, Windows에서는 Ctrl + F를 입력합니다.

5. 검색 필드에 검색어를 입력합니다.

6. 선택 사항: 코드를 바꾸려면 다음 작업을 완료하십시오.

• 검색 모달에서 아이콘을 클릭합니다.
• 바꾸기 필드에 바꿀 코드를 입력합니다. 대/소문자 유지를 클릭하여 바꿀 코드의 대/소문자를 기존 인스턴스와 일치시킬 수 있습니다.
• 바꾸기 아이콘을 클릭하여 한 번에 하나의 인스턴스를 바꾸거나 모두 바꾸기 아이콘을 클릭하여 한 번에 모든 인스턴스를 바꿉니다.

모든 파일에서 검색

왼쪽 사이드바에서 검색 버튼을 클릭하여 모든 테마 파일에서 검색합니다. 검색 결과에는 검색어의 모든 인스턴스와 해당 인스턴스가 나타나는 파일이 표시됩니다.

단계:

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. > 코드 편집을 클릭합니다.

3. 아이콘을 클릭하여 검색 패널을 엽니다.

4. 검색 필드에 검색어를 입력합니다.

5. 선택 사항: 코드를 바꾸려면 다음 작업을 완료하십시오.

• 검색 모달에서 아이콘을 클릭합니다.
• 바꾸기 필드에 바꿀 코드를 입력합니다.
• 한 번에 하나의 인스턴스를 바꾸거나 한 번에 모든 인스턴스를 바꿉니다.

고급 검색 옵션

검색 결과의 범위를 좁히려면 다음 검색 옵션 중 하나 이상을 사용하십시오.

• 대/소문자 일치는 대/소문자가 일치하는 검색어를 반환합니다. 예를 들어, product를 입력하면 검색 결과에서 “product” 또는 “Product”의 모든 인스턴스가 강조 표시됩니다. 대/소문자 일치를 선택하면 product의 인스턴스만 강조 표시됩니다.
• 전체 단어 일치는 정확한 단어와 일치하는 검색어를 반환하고 부분 일치는 제외합니다. 예를 들어 cart를 입력하면 검색 결과에서 “carton”이 아닌 “cart”의 인스턴스가 강조 표시됩니다.
• 정규식 사용은 정규식(regex)과 일치하는 검색 결과를 반환합니다. regex는 텍스트에서 일치 패턴을 지정하는 문자열입니다.

주의

regex 사용은 고급 맞춤 설정 기술입니다. regex101 또는 RegExr과 같은 타사 도구를 사용하여 regex 문자열을 만드는 데 대한 지침을 얻을 수 있습니다.

검색 패널에서 검색 결과에 포함하거나 제외할 파일 및 폴더를 선택할 수도 있습니다.

를 클릭하여 고급 메뉴를 엽니다. 포함할 파일 또는 제외할 파일 필드에 파일 또는 폴더 경로를 입력할 수 있습니다. 둘 이상의 파일 또는 폴더를 추가하려면 공백과 쉼표로 구분합니다. 예를 들어, sections 폴더에서 파일을 검색하려면 포함할 파일 필드에 ./sections를 입력합니다.

파일 디렉터리 보기에서 특정 폴더 내에서 검색할 수도 있습니다. 폴더를 마우스 오른쪽 버튼으로 클릭한 다음 드롭다운 메뉴에서 폴더에서 찾기...를 선택합니다.

테마 파일 관리

테마 코드에서 파일을 관리할 수 있습니다. 파일을 삭제하거나, 새 파일을 추가하거나, 파일 이름을 변경할 수 있으며, 이전 버전을 사용할 수 있는 경우 타임라인 보기에서 수정된 기존 코드 파일을 복원할 수 있습니다. assets 폴더의 이미지, CSS, JavaScript, 글꼴과 같은 자산 파일에는 타임라인 기록이 없습니다.

테마 파일 열기

테마 파일을 열려면 폴더를 클릭한 다음 탐색기에서 파일 이름을 클릭합니다. 이름이나 확장자로 파일을 검색한 다음 파일을 열 수도 있습니다.

단계:

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. > 코드 편집을 클릭합니다.

3. Mac의 경우 ⌘ + P, Windows의 경우 Ctrl + P를 입력합니다.

4. 검색 창에 파일 이름을 입력하고 파일을 선택하거나 최근에 연 항목 목록에서 파일을 선택합니다.

새 테마 파일 추가

파일을 추가하려면 폴더를 선택하고 새 파일 아이콘을 클릭한 다음 파일 이름과 파일 확장자를 입력합니다.

파일 이름에는 A-Z, 0-9 문자를 포함할 수 있으며 공백 문자는 포함할 수 없습니다. 단어는 대시 또는 밑줄로 구분합니다. 파일 확장자는 마침표(.)와 확장자 유형으로 정의됩니다. 예: .liquid 또는 .css.

단계:

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. > 코드 편집을 클릭합니다.

3. 새 파일을 추가할 폴더를 클릭합니다.

4. 폴더 이름을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 새 파일...을 선택합니다.

5. 파일의 새 이름을 입력합니다.

6. 키보드에서 Enter 키를 누르십시오.

새 자산 업로드

아이콘 또는 이미지 파일과 같은 새 자산을 코드 편집기의 assets 폴더에 업로드할 수 있습니다.

단계:

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. > 코드 편집을 클릭합니다.

3. assets 폴더를 마우스 오른쪽 버튼으로 클릭합니다.

4. 업로드...를 클릭합니다.

5. 업로드할 파일을 선택합니다.

6. 열기를 클릭합니다.

테마 파일 이름 바꾸기

파일을 마우스 오른쪽 버튼으로 클릭하여 이름을 바꿀 수 있습니다. 파일 확장자는 편집하거나 제거하지 마십시오. 파일 확장자는 마침표(.)와 확장자 유형으로 정의됩니다. 예: .liquid 또는 .css. 파일 이름에는 A-Z, 0-9 문자를 사용할 수 있으며 공백은 포함할 수 없습니다. 단어는 대시나 밑줄로 구분하십시오. 파일 이름이 유효하지 않으면 새 파일 이름이 저장되지 않습니다.

단계:

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. > 코드 편집을 클릭합니다.

3. 파일을 마우스 오른쪽 버튼으로 클릭한 다음 드롭다운 메뉴에서 이름 바꾸기...를 선택하십시오.

4. 파일의 새 이름을 입력합니다.

5. 키보드에서 Enter 키를 누르십시오.

테마 파일 삭제하기

주의

테마 파일을 삭제하면 테마가 손상될 수 있습니다. 파일을 삭제하기 전에 테마를 복제해야 합니다.

테마에 있는 모든 파일을 삭제할 수 있습니다. 삭제된 테마 파일은 복구할 수 없습니다.

단계:

1. Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.

2. > 코드 편집을 클릭합니다.

3. 파일을 마우스 오른쪽 버튼으로 클릭한 다음 드롭다운 메뉴에서 영구 삭제를 선택하십시오.

4. 삭제를 클릭하십시오.