코드를 사용하여 Shopify 테마 파일을 직접 편집하는 방법

코드로 이동하여 Shopify 테마를 변경하려는 경우에도 그렇게 할 수 있습니다. 이렇게 하려면 Shopify 코드 편집기로 이동해야 합니다.

Shopify 코드 편집기

왼쪽 상단 모서리에 있는 세 개의 점 아이콘을 클릭 하고 드롭다운 메뉴에서 코드 편집 을 선택하면 테마 편집기에서 바로 코드 편집기로 이동할 수 있습니다 .

 

또는 Shopify 대시보드에 있는 경우 테마로 이동하고 작업 을 클릭 한 다음 드롭다운 메뉴에서 코드 편집 을 선택할 수 있습니다.

 

 

또는 대시보드에서 코드 편집기로 직접 이동합니다.

어느 쪽이든, 코드 편집기에서 자신을 찾을 수 있습니다. 7개의 폴더가 있습니다.

• Layout
• Templates
• Sections
• Snippets
• Assets
• Config
• Locales

여기에는 스토어에 콘텐츠가 표시되는 방식을 결정하는 다양한 테마 파일이 있습니다.

테마 파일은 기능에 따라 7개의 폴더로 나뉩니다.

테마 파일을 클릭하면 편집기에 새 탭으로 팝업됩니다. 이렇게 하면 편집할 때 파일 간에 쉽게 앞뒤로 이동할 수 있습니다.

테마 파일 사이를 빠르게 이동

Shopify 테마 파일은 위에서 언급한 폴더로 분할됩니다.

그것들은 테마 아키텍처의 다른 부분을 나타냅니다. 일부는 테마의 레이아웃과 기능을 제어하고, 일부는 구성 데이터를 저장하고, 일부는 다른 테마 파일에서 사용할 자산을 제공합니다.

Shopify 레이아웃

이 폴더에는 테마의 마스터 템플릿 인 theme.liquid 파일이 포함되어 있습니다 . Shopify에서 생성하거나 편집하는 모든 템플릿은 theme.liquid 파일 내에서 렌더링됩니다.

머리글, 바닥글 및 탐색 메뉴와 같이 테마의 반복되는 요소를 호스팅합니다.

Shopify 템플릿

템플릿 폴더에는 상점에 대한 모든 페이지 템플릿이 포함되어 있어 각 페이지에 표시되는 내용을 제어합니다. 테마에 따라 미리 생성된 템플릿 선택이 달라집니다.

상점에 대한 새 페이지를 만들 때 이러한 템플릿 중 하나를 선택하여 모양과 느낌을 정의할 수 있습니다. 

각 템플릿 파일은 하나 이상의 섹션, 스니펫 및 HTML로 구성됩니다. 

이 404 페이지와 마찬가지로 특정 템플릿에는 몇 개의 섹션과 최소한의 코드만 있습니다. 제품 페이지 템플릿과 같은 다른 페이지는 훨씬 더 길고 유동 코드의 여러 섹션을 포함합니다.

코드가 짧은  짧고 달콤한 404.liquid 파일

 

코드가 긴 product.liquid 테마 파일

Debut 와 같은 이전 테마 는 템플릿용으로 Liquid 파일만 사용하지만 Online Store 2.0 테마는 JSON 파일에 더 많이 의존하고 있습니다.

JSON 템플릿은 코드를 포함하지 않지만 섹션의 래퍼로 작동합니다. Online Store 2.0은 섹션을 기반으로 하므로 이러한 템플릿 파일에 더 적합합니다.

Shopify 섹션

Shopify 섹션페이지 템플릿의 개별 사용자 정의 가능한 구성 요소입니다. 

앞에서 설명한 것처럼 테마 편집기에서 화면 왼쪽을 따라 섹션을 찾을 수 있으며 원하는 레이아웃을 만들기 위해 이동, 추가 또는 사용자 정의할 수 있습니다. 

이전 섹션2016년 Shopify에 추가됨, 사용자 정의를 더 쉽게 만듭니다. 2021년에 새로운 테마는 Online Store 2.0을 사용하여 모든 페이지 템플릿의 섹션을 잠금 해제했습니다.

 

이 폴더에는 테마의 페이지 템플릿에 추가할 수 있는 모든 섹션이 있습니다.

예를 들어 연락처 양식과 같은 특정 섹션 테마 파일을 편집하면 해당 섹션이 사용된 전체 사이트에 변경 사항이 표시됩니다.

페이지 템플릿에 포함하는 모든 섹션은 나중에 Shopify 테마 편집기 내에서 쉽게 추가하고 사용자 지정할 수 있습니다.

새 섹션 테마 파일을 만들 수도 있습니다.

상점 사용자 정의에 대한 완전한 제어를 선호하는 사람들에게는 이것이 새로운 랜딩 페이지 템플릿을 만드는 가장 좋은 방법입니다. 코드를 편집하여 원하는 섹션을 추가할 수 있습니다. 

템플릿이 완료되면 나중에 Shopify 스토어의 새 페이지를 생성할 때 해당 템플릿을 사용할 수 있습니다.

Shopify의 파트너 교육 및 개발자 옹호자인 Liam Griffin은 다음을 보여주는 철저한 가이드를 작성했습니다.사용자 정의 섹션을 사용하여 페이지 템플릿을 만드는 방법.

Shopify 스니펫

snippets 폴더에는 테마 전체에서 사용할 수 있는 재사용 가능한 코드 조각이 있는 Liquid 파일이 포함되어 있습니다.

스니펫 이름을 호출하여 다른 테마 파일에서 렌더링할 수 있습니다. 이렇게 하면 스니펫이 트리거되어 같은 것을 계속해서 코딩하는 시간을 절약할 수 있습니다.

스니펫 코드 자체를 변경하면 해당 스니펫을 참조하는 모든 템플릿/페이지에 변경 사항이 적용됩니다. 

스니펫을 사용하면 향후 업데이트를 훨씬 더 쉽게 관리할 수 있습니다.