테마 확장
Shopify 테마는 다양한 설정 및 사용자 지정 옵션을 제공합니다. 그러나 테마를 추가로 사용자 지정하고 싶을 수 있습니다. 예를 들어 스토어에 제품 리뷰를 표시하려는 경우 앱을 설치하여 제품 리뷰를 표시할 수 있습니다. 테마 기능을 확장하려는 경우 사용자 지정 코드나 앱을 사용하여 확장할 수 있습니다.
이 페이지의 정보
사용자 지정 HTML 또는 Liquid 추가
일부 테마는 설정이 포함된 템플릿, 섹션, 블록에서 렌더링 가능한 HTML 또는 Liquid 코드의 코드 조각을 추가할 수 있는 설정을 제공합니다. 이러한 설정을 통해 테마 코드를 직접 편집하지 않고 온라인 스토어에 사용자 지정 코드를 안전하게 추가할 수 있으므로 테마가 업데이트에 적합한지 확인이 가능합니다.
다음 작업에 이러한 설정을 사용할 수 있습니다.
- 사용자 지정 Liquid 섹션을 사용하여 비즈니스에 적절한 Liquid 변수를 삽입합니다. 예를 들어 제품 페이지에 배송 정책을 포함할 수 있습니다.
- 사용자 지정 Liquid 섹션을 사용하여 앱을 테마와 통합하는 데 필요한 코드를 추가합니다.
테마에 사용자 지정 HTML 또는 Liquid 옵션이 있는지 알아보려면 해당 테마의 설명서를 참조하십시오.
Liquid 설정은 제한된 Liquid 개체 및 태그에만 액세스할 수 있습니다. Liquid 설정에서 사용할 수 있는 개체 및 태그에 대해 자세히 알아보려면 Shopify.dev에서 Liquid 설정 문서를 참조하십시오.
사용자 지정 CSS 추가
CSS(캐스케이딩 스타일 시트)는 테마에서 요소가 표시되는 방식을 변경하고 한 번에 여러 페이지의 모양을 제어할 수 있습니다. 사용자 지정 CSS 기능을 이용하여 테마에 기본으로 제공되는 설정 이외의 테마를 사용자 지정할 수 있습니다. 전체 테마 또는 테마 내 템플릿의 특정 섹션에 사용자 지정 CSS를 추가할 수 있습니다.
CSS를 사용자 지정하려면 CSS 및 HTML에 대해 어느 정도 알고 있어야 합니다. 테마 사용자 지정 전에 먼저 사용 가능한 지원 수준을 알아두는 것이 좋습니다.
앱 설치
앱을 설치하여 테마에 기능과 통합을 추가할 수 있습니다. Shopify App Store에서 앱을 찾을 수 있습니다.
온라인 스토어 앱은 다음과 같은 방식으로 테마와 통합할 수 있습니다.
앱 블록: 앱 블록을 사용하면 테마에서 사용할 위치에 앱 기능을 정확히 추가할 수 있습니다. 앱 블록은 테마 편집기를 통해 추가, 제거 및 사용자 지정이 가능합니다.
앱 임베드: 앱 임베드는 테마에서 오버레이로 표시 또는 플로팅되거나 고객에게 표시되지 않고 온라인 스토어에 코드를 추가하는 앱 제공 요소입니다. 테마 편집기를 통해 앱 임베드를 활성화, 비활성화 및 사용자 지정할 수 있습니다.
테마 코드를 변경: 일부 앱은 테마 코드에 직접 코드를 삽입하여 테마에 기능을 추가합니다. 앱 설정을 사용하거나 테마 편집기를 사용하여 앱을 사용자 지정할 수 있습니다.
테마 코드 편집
테마 코드를 편집하여 온라인 스토어를 세부적으로 변경할 수 있습니다. 테마 파일에는 HTML, CSS, JSON 및 JavaScript와 함께 Shopify의 템플릿 언어인 Liquid가 포함되어 있습니다. HTML 및 CSS 사용법을 알고 Liquid에 대해 기본적으로 이해하고 있는 경우에만 테마의 코드를 편집하십시오.
Shopify 무료 테마를 사용하는 경우 Shopify 지원팀에서 테마 코드를 사용자 지정하는 데 도움을 줄 수 있습니다. 제공되는 사용자 지정 목록은 테마 문서를 참조하십시오. 테마 관련 지원에 대해 자세히 알아보십시오.
다음과 같은 방식으로 테마 코드를 편집할 수 있습니다.
- Shopify Admin에서 직접 코드를 편집합니다.
- Shopify CLI 및 Shopify GitHub 통합과 같은 개발 도구를 사용하여 로컬에서 테마를 편집합니다.