Shopify 플러그인에 대한 고급 제품 및 컬렉션 표시 맞춤 설정

이러한 고급 설정을 사용하면 WordPress에서 스토어프론트를 맞춤 설정하고, 비즈니스 브랜드를 개인화하고, 고객의 구매 환경을 개선할 수 있습니다.

Shopify 플러그인 및 Shopify 스토어프론트 구성 요소

Shopify 플러그인은 Shopify Storefront 웹 구성 요소로 빌드됩니다. 다음 구성 요소가 Shopify 스토어프론트의 기본 구성 요소로 사용됩니다.

• 제품 카드 구성 요소: 이 구성 요소는 개별 제품 정보를 표시하며, 일반적으로 제품 등록 정보 또는 컬렉션 페이지에 표시됩니다. 여기에는 제품 이미지, 제목, 가격, 카트에 추가 버튼과 같은 요소가 포함되는 경우가 많습니다.
• 제품 빠른 보기 모달 구성 요소: 이 구성 요소는 기존 콘텐츠 위에 제품 세부 정보, 카트에 추가 버튼, 전체 제품 세부 정보 보기 링크가 포함된 모달을 표시합니다.
• 제품 세부 정보 페이지 구성 요소: 이 구성 요소는 전체 제품 세부 정보와 함께 단일 제품을 표시합니다. 각 제품 세부 정보 페이지 구성 요소에는 고유한 URL이 있습니다.
• 컬렉션 구성 요소: 이 구성 요소는 생성한 제품 컬렉션을 표시합니다.

Shopify 제품 및 컬렉션 표시 맞춤 설정

플러그인의 기본 Shopify 스토어프론트 구성 요소에는 원활한 쇼핑 환경을 만드는 데 도움이 되는 도구가 있습니다. 또한 특정 브랜드 ID 및 디자인 요구 사항에 맞게 이러한 구성 요소의 표시를 자유롭게 맞춤 설정할 수 있습니다.

이러한 맞춤 설정을 수행하려면 WordPress 테마 파일 및 디렉터리를 수정할 수 있는 액세스 권한이 있어야 합니다. 이 프로세스에는 활성 WordPress 테마의 디렉터리 내에 전용 폴더를 만드는 작업이 포함됩니다.

단계:

1. Shopify 폴더 생성: 먼저 활성 테마의 디렉터리 내에 Shopify라는 새 폴더를 생성합니다. 이 폴더는 사용자 지정 구성 요소 재정의를 위한 중앙 위치 역할을 합니다.
2. 개별 구성 요소 재정의: 특정 구성 요소를 수정하려면 새로 생성된 Shopify 폴더 내에 지정된 이름의 PHP 파일을 추가합니다. 플러그인이 사용자 지정 버전을 인식하고 적용하려면 이러한 재정의 파일의 이름 지정 규칙이 중요합니다.
   • 제품 카드 구성 요소를 재정의하려면 Shopify 폴더 내에 product-card.php라는 PHP 파일을 생성합니다.
   • 제품 빠른 보기 모달 구성 요소를 재정의하려면 Shopify 폴더 내에 modal.php라는 PHP 파일을 생성합니다.
   • 제품 세부 정보 페이지 구성 요소를 재정의하려면 Shopify 폴더 내에 pdp.php라는 이름의 PHP 파일을 생성하십시오.
   • 컬렉션 구성 요소를 재정의하려면 Shopify 폴더 내에 component.php라는 이름의 PHP 파일을 생성하십시오.

맞춤 PHP 파일을 생성하면 플러그인이 해당 특정 요소에 대한 기본 구성 요소 파일을 무시합니다. 이러한 재정의 파일 내에는 정적 HTML 블록에서 복잡한 PHP 로직까지 모든 코드를 구현할 수 있습니다.

일관성을 유지하고 내장된 Shopify 기능에 액세스하기 위해 Shopify 스토어프론트 웹 구성 요소(기본 플러그인 구조에서 활용됨)를 사용하는 것이 좋지만 여기에 국한되지는 않습니다. 제품 및 컬렉션 데이터를 가져오고 표시하는 다른 방법을 통합하여 고급 맞춤 설정을 할 수 있습니다.

자세한 정보 및 모범 사례는 WordPress 플러그인 개발자 설명서를 참조하십시오.

Shopify 제품 및 컬렉션 재작성

Shopify에서 제품 또는 컬렉션을 게시하면 각 제품과 컬렉션에 고유한 URL이 생성됩니다. 기본적으로 이러한 URL은 Shopify 도메인으로 생성됩니다. 재작성 기능을 사용하면 공개 WordPress 도메인으로 해당 고유 URL에 액세스할 수 있습니다.

단계:

1. Shopify 플러그인에서 **설정**으로 이동합니다.
2. **고급** 탭의 **Shopify 링크 재작성** 섹션에서 두 확인란이 활성화되어 있는지 확인합니다.
3. **고유 주소**로 이동합니다.
4. **저장**을 클릭하여 이 새 규칙을 적용합니다.
5. Shopify 관리자로 이동한 다음 WordPress 링크를 생성하려는 제품 또는 컬렉션 세부 정보 페이지로 이동합니다.
6. 검색 엔진 등록 정보 카드에 고객을 제품 또는 컬렉션으로 직접 연결하는 URL이 표시됩니다. 예: `https://johns-apparel.myshopify.com › products › huskee-reusable-cup`.
7. WordPress 사이트 URL 끝에 `products/huskee-reusable-cup`을 추가합니다. 예: `https://johns-apparel-wordpress.com/products/huskee-reusable-cup`.

제품 카드 동작 맞춤 설정

Shopify 스토어프론트 구성 요소에는 두 가지 제품 세부 정보 카드 유형이 있습니다.

1. 빠른 보기: 제품 카드에 마우스를 올리면 고객에게 `빠른 쇼핑` 옵션이 표시됩니다. 클릭하면 제품 세부 정보가 백그라운드의 기존 콘텐츠 위에 팝업 또는 모달 스타일로 표시됩니다.
2. 자세한 제품 페이지: 고객이 이미지나 제품 이름과 같은 제품 카드를 클릭하면 고유한 URL과 함께 제품 세부 정보가 전체 페이지 보기로 표시됩니다.

이 설정을 변경하여 빠른 보기만, 자세한 제품 페이지만 또는 둘 다 표시하도록 할 수 있습니다.

단계:

1. WordPress의 Shopify 플러그인에서 **설정**으로 이동합니다.
2. **고급** 탭에서 **제품 보기** 섹션으로 이동합니다.
3. 스토어에 가장 적합한 옵션을 선택합니다.
4. **저장**을 클릭합니다.