제품 선택 및 다양성 확립

Webflow 전자상거래에서 특정 제품의 변형을 생성하여 크기 또는 색상 옵션을 자동으로 고려합니다.

선택 다양한 시장 진출 가능 품종 크기와 색상이 다른 의류 등 동일한 품목의 경우. 각각의 고유한 선택 조합은 변형으로 이어집니다. 각 이형 상품은 고유한 제품으로 간주되며 구성할 수 있는 특정 제품 필드가 있습니다.

중요한:
모든 제품 변형은 사이트 구독에 대한 최대 품목 수에 영향을 미칩니다. 사이트 계획에 대한 항목 제한 사항을 이해하십시오.

이 세션 중:

  1. 선택 팩 통합 및 감독
  2. 다양성을 수정하다
  3. 기본 제품 변형 설정

선택 팩 통합 및 감독

다양한 크기, 색상 등 다양한 옵션이 있는 제품을 판매한다고 가정하면 각 옵션 분류에 대한 선택 팩을 포함할 수 있습니다. 이러한 옵션의 혼합에 맞는 제품의 개별 버전은 다양성입니다. 예를 들어 다양한 사이즈, 색상, 패턴의 티셔츠를 판매하는 경우 세 가지 선택 팩(사이즈용, 색상용, 패턴용)을 포함해야 합니다.

제품, 옵션 세트 및 옵션에 대한 세 개의 열을 보여주는 차트입니다. 이 3개 열에는 제품 1개, 티셔츠의 시각적 요소와 크기, 색조, 패턴에 대한 색상 조정 세부정보가 포함되어 있습니다.

선택 팩을 추가하려면 옵션이 있는 제품의 상세 보기를 실행하고 옵션 섹션으로 스크롤한 다음 + 통합 선택 팩.

옵션 섹션에는 선택 팩을 통합하는 더하기 아이콘이 표시됩니다.
제품 컬렉션의 개별 제품 항목에 대한 선택 팩을 생성할 수 있습니다.
알아두어야 할 필수 사항
제품당 최대 3개의 셀렉션 팩을 생성할 수 있습니다.

선택사항 통합

정의 제목 선택 팩(크기, 색조…)을 선택하고 선택 사항을 삽입하기 시작합니다. 각 선택사항을 입력하고 Enter를 눌러 선택사항을 설정하십시오. 크기 선택은 S, M, L, XL일 수 있습니다. 색상 선택은 검정, 흰색, 파란색 등이 될 수 있습니다.

옵션 섹션에는 제목과 선택 사항에 대한 텍스트 입력 필드가 있는 새로운 선택 팩 섹션이 있습니다. 선택 팩을 포함하려면 흐릿한 플러스 기호가 있습니다. 또한 삭제 아이콘, 취소 및 완료 버튼도 있습니다.
알아두어야 할 필수 사항
각 제품 품목은 총 50가지의 다양성을 보유할 수 있습니다. 이는 추가할 수 있는 선택 항목의 수를 제한합니다. 예를 들어 선택 팩 1에 선택 항목이 5개 있는 경우 선택 팩 2에 선택 항목을 10개 이상 추가할 수 없습니다(5*10=50).

선택 사항 조정

오류가 있어 선택 항목의 이름을 바꾸거나 제거해야 하는 경우 선택 항목 이름 위로 마우스를 가져간 후 표시되는 화살표를 선택하세요. 이름을 바꾸거나 삭제하도록 선택하세요.

Blue 선택 다양성 편집 드롭다운 메뉴가 옵션 섹션에 강조 표시되어 있습니다. 드롭다운 메뉴의 두 항목은 이름 바꾸기 선택과 삭제 선택입니다.

선택 항목을 두 번 클릭하여 이름을 바꿀 수도 있습니다. 마지막부터 첫 번째까지 순서대로 선택 항목을 제거하는 또 다른 방법은 커서가 선택 항목 필드에 있을 때 백스페이스 키를 누르는 것입니다.

셀렉션 팩 감독

선택 팩 제목을 클릭하거나 마우스를 가져가면 표시되는 설정 아이콘을 클릭하여 생성 후 선택 팩을 수정할 수 있습니다.

두 가지 다양성을 지닌 규모 다양성이 옵션 섹션에서 강조 표시됩니다. 크기 다양성에는 XL 및 L 선택이 포함됩니다.

이 시점에서 휴지통 아이콘을 선택하여 선택 팩 제목을 변경하거나 선택 사항을 관리하거나 선택 팩을 제거할 수 있습니다.

옵션 섹션에는 크기라는 제목 텍스트 필드, 두 가지 다양성, XL 및 L이 선택 항목으로 포함되어 있습니다. 삭제 아이콘, 취소 및 완료 버튼이 포함되어 있습니다.

선택 팩을 제거하면 다양성 인벤토리의 관련 다양성이 모두 지워집니다.

다양성을 수정하다

선택 항목을 추가하면 선택 팩의 각 선택 항목 혼합에 대해 다양성이 자동으로 생성되는 것을 볼 수 있습니다. 따라서 다양한 크기, 색조 및 패턴을 지닌 티셔츠의 다양성에는 s/검은색/일반, m/검은색/점선, 대형/노란색/줄무늬 등이 수반됩니다.

크기, 색상, 디자인이라는 세 가지 선택 팩 열과 다양성 열이 통합된 차트입니다.

그런데 이런 품종 중 일부는 안 팔아요?

아마도 검은색 줄무늬 셔츠가 없거나 노란색 셔츠가 작은 사이즈로만 구입할 수 있을 것입니다. 귀하가 판매하지 않는 다양성을 구매자가 선택하지 않도록 어떻게 보장할 수 있습니까? 접근할 수 없는 다양성의 경우 다양성 세부 사항을 조정하고, 재고 모니터링을 활성화하고, 수량을 0으로 지정합니다. 이렇게 하면 대체 목록 드롭다운에서 해당 옵션을 선택할 수 없게 됩니다.

변형 세부 사항 수정

각 변형은 고유한 제품을 나타내며 구성할 수 있는 개별 제품 필드를 보유합니다. 주요 제품에 지정된 기본 설명, 보충 시각적 요소, SKU, 비용, 가격 비교 및 측정 지표는 모든 변형 제품에 전달됩니다. 지정된 수량은 형성된 첫 번째 변형에 귀속됩니다.

변형을 선택하거나 변형 위에 마우스를 올려 톱니바퀴 아이콘을 표시하면 상속된 값을 수동으로 조정하고 대체할 수 있습니다.

변형 세그먼트는 S(소형) 크기의 세 가지 항목으로 구성됩니다. 세 가지 선택 항목은 일반, 점선, 줄무늬 등 다양한 디자인을 자랑합니다.
세부 사항을 구체화하려면 변형을 클릭하세요.
귀중한 힌트
제품의 이형 상품이 서로 다른(또는 거의 동일한) 치수를 나타내는 경우 옵션 컬렉션(및 이형 상품)을 구성하기 전에 기본 제품의 해당 필드에 대한 데이터를 지우는 것이 유리할 수 있습니다. 이 방법은 다양한 변형이 포함된 시나리오에서 유용한 것으로 입증되었습니다. 모든 변형에서 이러한 값이 상속되기 때문에 이러한 상속된 필드 중 일부에 대한 값 업데이트를 간과할 가능성이 있습니다. 반대로, 빈 필드를 식별하고 그에 따라 수정하는 것이 더 쉽습니다.
변형 섹션에는 썸네일 이미지, 추가 이미지 업로드를 위한 영역, 재고 추적 및 다운로드 포함 토글이 포함되어 있습니다. 또한 수량, SKU, 비용, 가격 비교, 무게, 너비, 높이, 길이, 파일 이름 및 파일 URL을 입력하는 필드가 제공됩니다.
각 변형을 참조하여 변형 이미지, 가격, 가격 비교, 너비, 높이, 길이 및 무게 필드에 대한 옵션을 구성할 수 있습니다. 재고 추적을 활성화하여 수량을 수정할 수도 있습니다.

기본 제품 변형 설정

변형을 추가하면 설정된 초기 변형이 기본 변형의 역할을 맡습니다. 그러한 지정은 다음과 같이 표시됩니다. ⭑ 변형 재고 목록 내.

강조 표시된 기본 소형 변형이 변형 세그먼트에 표시됩니다. 별표는 제품 미리보기 옆에 있습니다.
디자인 내에서 가격, 이미지 등 제품 필드에 연결된 요소는 기본 변형과 관련된 값을 나타냅니다.

제품을 저장한 후에는 해당 제품에 대해 이미지, 추가 이미지, 수량, SKU, 비용, 가격 비교 및 치수(너비, 높이, 길이, 무게)를 포함하는 기본 필드에 더 이상 액세스할 수 없습니다. 기본 변형에 연결된 값은 이 제품의 기본값으로 사용됩니다. 결과적으로 제품 편집 내에서 또는 제품 페이지에서 이러한 필드에 연결된 모든 구성 요소는 기본 변형의 값을 나타냅니다.

필수정보
모든 옵션 세트(변형)를 제거하면 해당 제품에 대한 기본 컬렉션 필드와 해당 값이 복원됩니다.

기본 변형 수정

대체 변형을 기본 변형으로 지정하려면 변형 인벤토리 목록에서 변형 이름을 선택하여 세부 사항에 액세스한 다음 '기본값으로 설정' 버튼을 클릭하세요. 그게 다야!

작은 사이즈의 상품이 선택되었습니다. 하이라이트는 다음과 같습니다.

변형과 함께 제작

디자인할 때 제품 컬렉션 목록 그리고 제품 페이지, 데이터 검색에 사용되는 수집 필드는 변형 여부에 관계없이 모든 제품에서 동일합니다. 이는 기본 변형과 기본 제품이 결합되었기 때문입니다. 따라서 변형이 포함된 제품의 경우 이 필드는 기본 변형에서 세부정보를 추출합니다.

왼쪽의 파란색 베갯잇 제품 이미지는 중앙에 있는 "제품" 컬렉션의 "메인 이미지" 필드에 해당합니다. 오른쪽의 회색 골지 베갯잇 제품 이미지는 이 제품에 여러 변형이 존재하기 때문에 기본 변형의 "변형 이미지"를 나타냅니다.
이 이미지 구성 요소는 "제품" 컬렉션 내의 "기본 이미지" 필드에 해당합니다. 왼쪽 이미지는 변형이 없는 제품의 "메인 이미지"를 보여줍니다. 대조적으로, 오른쪽 이미지는 제품에 여러 변형이 있으므로 기본 변형의 "변형 이미지"를 표시합니다.

더 발견하다: 전자상거래 컬렉션 탐색

장바구니에 추가 프로세스의 선택 사항

변형이 표시된 제품의 경우 "장바구니에 추가" 메커니즘에 다음과 같은 추가 엔클로저가 표시되어야 합니다. 대체 목록. 이를 통해 사용자는 해당 제품을 장바구니에 추가하기 전에 해당 제품에 대해 가능한 다양한 선택 사항 중에서 선택할 수 있습니다.

네비게이터 내에는 옵션 목록이라는 구획이 있습니다. 이 구획이 선택되고 강조됩니다.

소비자가 이러한 선택 항목을 탐색할 때 기본 변형에서 가져온 데이터를 표시하는 모든 구성 요소는 선택한 옵션의 정보를 표시하도록 조정됩니다.

왼쪽 선택 1은 작은 사이즈의 은색 베개 제품입니다. 오른쪽 선택 2는 중간 사이즈의 은색 베개 제품입니다.

디자이너는 변형 드롭다운 구성 요소에 대한 구성의 기본 "선택" 텍스트를 대체할 수 있습니다.

왼쪽에는 선택 필드가 선택됩니다. 오른쪽에는 선택 필드의 옵션 패널이 이전 기본 텍스트 "Select"를 대체하는 "Pick" 용어로 완성됩니다.

결제 과정의 선택 및 변형

선택한 선택 항목이 목록에 표시됩니다. 바구니, 점검 섹션과 결제 승인 부분.

왼쪽에는 네비게이터에서 옵션 목록 래퍼가 선택되었습니다. 오른쪽은 스트라이프 쿠션 옵션의 결제 부분에서 옵션 목록 래퍼가 선택되었습니다.

컬렉션 목록을 사용자 정의하고 스타일을 지정하는 방법과 유사하게 이 선택 목록을 개인화할 수 있는 기능이 있습니다.

장바구니에는 각각 1개 수량의 품목 3개가 포함되어 있습니다. 제품명, 가격, 사이즈도 명시되어 있습니다. 각 항목에는 삭제 버튼이 있습니다. 하단에는 총 $59.97 USD와 결제 계속 버튼이 있습니다.
이것이 장바구니에 변형이 표시되는 방식입니다. 선택한 변형의 세부 사항을 보여주는 사진, 가격 및 옵션 목록을 관찰하십시오.

더 발견하다: 쇼핑 경험 맞춤화

특징적인 언급
변형에 대한 초기 릴리스가 공개되었습니다. 우리가 고려 중인 추가 기능 및 개선 사항을 살펴보세요.. 변형 또는 일반적인 온라인 거래에 대해 확인하고 싶은 추가 개선 사항이 있는 경우 언제든지 당사에 요청을 제출하십시오. 제안 목록. 귀하의 기여에 미리 감사드립니다!
이완 막
Ewan Mak의 최신 게시물 (모두 보기)