Shopify 스토어에 사용자 지정 섹션 추가하는 주요 단계

목차

  1. 소개
  2. Shopify 섹션이란 무엇인가요?
  3. 첫 번째 Shopify 섹션 만들기
  4. 결론: 섹션 통합하기

소개

Shopify 스토어에 사용자 정의 섹션을 만들면 개인 맞춤형 및 브랜드에 맞는 사용자 경험을 얻을 수 있습니다. 프로모션 배너, 추천 제품, 정보성 짧은 글 및 대화형 콘텐츠를 삽입하기 위해 Shopify에서 섹션을 만드는 방법을 알면 사이트의 기능과 매력을 근본적으로 향상시킬 수 있습니다. 이 게시물에서는 이러한 맞춤형 구성 요소를 만들기 위한 주요 단계에 대해 설명하므로 상점을 완벽하게 개선할 수 있습니다.

맞춤형 섹션의 중요성은 제공하는 향상된 제어기능에 있습니다. 상점의 고객 경로와 전환율에 상당한 영향을 미칠 수 있습니다. 이 탐구를 마칠 때쯤이면 섹션을 실행하고 독창적인 Shopify 상점을 만들 수 있는 실용적인 지식을 얻게 될 것입니다.

Shopify 섹션이란 무엇인가요?

Shopify 섹션은 Shopify 테마 내에 존재하는 모듈화되고 사용자 정의 가능한 요소로, 온라인 상점의 모양과 느낌을 조정할 수 있게 해줍니다. 이러한 섹션은 특히 다양한 콘텐츠와 기능을 포함하고 있어 원하는 대로 편집, 재배치 또는 제거할 수 있습니다.

Shopify의 온라인 스토어 2.0의 도입으로 섹션을 전체적으로 활용할 수 있으며, 이전의 제한된 사용법에서 전환 점을 나타냅니다.

첫 번째 Shopify 섹션 만들기

Shopify 스토어에 사용자 정의 섹션을 추가하는 절차를 알아보겠습니다. Shopify 템플릿 시스템의 최적화된 기능과 잠재적인 복잡성을 따라야합니다.

단계 1: Shopify 템플릿 이해하기

섹션 생성에 앞서 Shopify 템플릿 시스템의 작동 방식을 이해해야합니다. Shopify의 모든 페이지는 실제 콘텐츠가 없는 구조를 정의하는 .json 템플릿 파일을 사용하여 작성됩니다. 여기서 섹션을 활용합니다.

단계 2: 섹션 작성하기

섹션은 Liquid 템플릿 언어를 사용하여 만들며 테마 코드의 /sections 디렉토리에 모아집니다. 섹션을 만들려면 다음 단계를 따르세요:

      1. Shopify 관리자에서 온라인 상점 > 테마 > 코드 편집으로 이동합니다.
      2. /sections 디렉토리로 이동하고 새 섹션 추가 프롬프트를 사용하세요.
      3. 섹션에 적절한 이름을 지정하고 섹션 만들기를 선택하세요 (예: welcome-banner).

섹션의 구성 요소는 HTML/Liquid 콘텐츠, CSS 및 JavaScript로 구성됩니다. {% schema %} 안에는 맞춤 설정이 상세히 설명되어 있습니다.

단계 3: JSON 템플릿으로 구조화

새 섹션을 JSON 템플릿과 통합하여 동적 렌더링을 활성화하세요. 다음 단계를 따라 섹션을 .json 템플릿 파일에 할당하세요:

      1. 테마 코드 편집기에서 /templates 디렉토리에 액세스합니다.
      2. 원하는 템플릿 파일 (예: product.json)을 편집하세요.
      3. "sections" 개체에 항목을 추가하여 섹션을 기록하세요.

단계 4: 콘텐츠로 채우기

구조가 마련된 상태에서 섹션에 풍부한 콘텐츠를 추가하여 섹션을 활성화하세요. {% schema %}에서 생성된 사용자 정의 설정을 통해 테마 편집기를 통해 상인과 고객 경험을 최적화할 수 있습니다.

단계 5: 포괄적인 사용자 정의 옵션 맞춤 설정하기

상점의 성장과 미학은 사용자 정의의 핵심입니다. 상인에게 조절 가능한 설정을 다양하게 제공하세요:

      1. {% schema %} 내에서 텍스트, 이미지 옵션 선택기 또는 색상 설정과 같은 다양한 필드 유형을 활용하세요.
      2. 사용자 정의 전에 일반적인 외관을 결정하는 사전 기본값을 설정하세요.

단계 6: 테마 편집기에 포함할 사전 추가하기

Shopify 테마 편집기의 "섹션 추가" 메뉴에서 섹션에 액세스할 수 있게 사전을 섹션 스키마에 추가하세요:

liquid "presets": [ { "name": "내 맞춤 섹션", "category": "콘텐츠" } ]

단계 7: 페이지 간 사용 가능성 보장하기

섹션이 다양한 페이지 유형에서 작동하는 것뿐 아니라 발전하는 것을 보장하세요. Liquid의 기본적인 적응성을 활용하기 위해 전역 변수를 사용하여 동적 콘텐츠를 활용하세요.

단계 8: 참여 및 상호 작용 개선하기

슬라이더, 탭 또는 축소 가능한 콘텐츠와 같은 복잡한 기능을 섹션에 통합함으로써 전반적인 사용자 경험을 향상시키고 가독성과 기억에 영향을 미치는 것을 키웁니다.

결론: 섹션 통합하기

새 섹션을 상점에 통합하면 설계된 기본 팔레트에서 맞춤형을 볼 수 있으며, 지침에 따라 올바르게 수행되었다면 실시간 상점 안에 매끄럽게 표시될 것입니다.

FAQ: 1. 체크아웃 페이지도 사용자 정의하기 위해 섹션을 사용할 수 있나요? - Shopify는 보안 측면을 고려하여 체크아웃 페이지에 대한 사용자 정의 범위를 제한적으로 제공합니다.

      1. 섹션이 반응형 및 모바일 친화적인지 어떻게 확인할 수 있나요?
      2. 섹션 스타일 시트 내에 CSS 미디어 쿼리를 사용하고 다양한 기기 크기에서 섹션을 테스트하세요.

      3. 내 사용자 정의 섹션에서 Shopify 앱을 사용할 수 있을까요?

      4. 네, 섹션은 Shopify 앱이 제공하는 위젯과 같은 앱 블록을 통합하여 테마 코드에 직접 개입하지 않고도 기능을 다양화할 수 있습니다.

Shopify에서 맞춤 제작된 섹션 개발은 기능 구현 이상의 의미를 지니는 것입니다. 이는 상점 앞마다 진보한 브랜딩을 선사하는 여정의 시작입니다. 맞춤 제작 섹션의 힘을 받아 고유한 장점을 두드러지게 나타내며 고객의 Shopify 경험을 가장 빛나는 수준으로 이끌어보세요.