주 콘텐츠로 건너뛰기

상품 옵션을 색상 버튼, 텍스트 버튼, 라디오 버튼으로 설정할 수 있나요?

쇼핑몰 상품의 옵션을 '이미지 또는 색상 버튼', '텍스트 버튼', '라디오 버튼'으로 구성할 수 있는
'옵션 스타일' 기능을 이용해 보세요.

 

자세히 알아보기

옵션 스타일의 유형

쇼핑몰 상품의 옵션을 '셀렉트박스' 뿐만 아니라 '이미지 버튼', '색상 버튼', '텍스트 버튼'. '라디오 버튼'으로 표시할 수 있어요.
옵션 스타일 기능을 통해 쇼핑몰 상품의 옵션을 다양한 방식으로, 직관적이고 시각적으로 구성할 수 있어요.

  1. 미리보기
    1. 이미지 또는 색상으로 등록된 옵션을 버튼으로 표시해요.
    2. '버튼이미지 설정', '색상 설정'에 입력한 정보로 버튼 모양이 결정되며 버튼 이미지와 색상을 모두 등록하면 옵션 버튼은 이미지로 표시되어요.
    3. 단, 옵션 구성 방식이 '조합 일체선택형'인 경우에는 '텍스트 버튼'으로 표시되어요.
  2. 텍스트 버튼
    • 텍스트로 된 버튼으로 상품의 옵션이 표시되어요.
  3. 라디오 버튼
    1. 라디오로 된 버튼으로 상품의 옵션이 표시되어요.
    2. 표시되는 형태만 라디오 버튼인 것으로, 옵션값은 중복 선택이 가능해요.

 

옵션 스타일 '미리보기' 설정하기

  1. 다음 화면에서 조합 분리선택형, 상품 연동형, 독립 선택형 옵션 구성방식에 옵션 스타일 '미리보기'를 설정할 수 있어요.
  2. 셀렉어트박스 옵션으로 구성되 있는 상품을 수정해 볼게요.
    옵션 스타일의 기능 설정을 위해 수정할 상품의 '상품 수정' 화면으로 이동해요.
    '상품 수정'의 '옵션/재고' 탭을 클릭하면 상품의 옵션을 설정할 수 있는 영역을 확인할 수 있어요.
  3. 기존에 설정되어 있던 옵션을 수정하기 위해 '옵션값 수정'을 클릭해요.
  4. 쇼핑몰 상품의 옵션을 색상 버튼으로 구성해 볼게요. 
    색상을 설정하면 상품 상세 화면 뿐만 아니라 상품 목록 화면에서도 상품의 색상 옵션이 표시되어요.
  5. '옵션값 수정' 화면의 '옵션 스타일' 항목을 '미리보기'로 선택한 후 '옵션 입력' 항목에서 상품 옵션으로 사용할 정보를 입력하고 '색상 설정'에 '옵션값 (#헥사코드)'을 입력하여 설정해요.
    ※ 상품 목록 화면에 상품이 색상 옵션을 표시하기 위해서는 [관리자] 쇼핑몰 설정 > 상품 설정의 상품정보표시 설정 > 상품목록'의 '상품색상' 항목을 '표시함'으로 설정해 주세요.
  6. 쇼핑몰 상품의 옵션을 이미지 버튼으로도 함께 구성해 볼게요.
    이미지 버튼을 등록하면 등록한 이미지로 옵션이 표시되어요.
    '옵션값 수정' 화면의 '옵션 스타일' 항목을 '미리보기'로 선택한 후 '옵션 입력' 항목에서 상품 옵션으로 사용할 정보를 입력하고 '버튼이미지 설정'에 옵션 표시에 사용할 이미지를 등록해요.
  7. 옵션값 수정 완료 후 '저장'을 클릭하면 '상품 수정' 화면에 수정한 옵션값이 적용된 것을 확인할 수 있어요.
    설정이 완료된 것을 확인하고 '상품 수정' 화면 내 '상품수정'을 클릭해야 수정한 옵션이 최종 반영되어요.
  8. 상품 수정이 완료되면 쇼핑몰의 상품 상세 화면에서 옵션 스타일이 색상 버튼과 이미지 버튼으로 표시된 것을 확인할 수 있어요.

 

옵션 스타일 '텍스트 버튼' 설정하기

  1. 쇼핑몰 상품의 옵션을 텍스트 버튼으로 구성해 볼게요. 텍스트로 등록한 옵션 정보로 옵션이 표시되어요.
    '옵션값 수정' 화면의 '옵션 스타일' 항목을 '텍스트 버튼'으로 선택하고 '옵션 입력' 항목에 옵션명(예 : 사이즈)과 옵션값(예 : XS, S, M, L)을 입력해요.
  2. 옵션값 수정 완료 후 '저장'을 클릭하면 '상품 수정' 화면에 수정한 옵션값이 적용된 것을 확인할 수 있어요.
    설정이 완료된 것을 확인하고 '상품 수정' 화면 내 '상품수정'을 클릭해야 수정한 옵션 정보가 최종 반영되어요.
  3. 상품 수정이 완료되면 아래와 같이 쇼핑몰 상품 상세 화면에서 옵션 스타일이 텍스트 버튼으로 표시된 것을 확인할 수 있어요.

 

Note

 '옵션 스타일 - 셀렉트박스' 유형 이외의 옵션 스타일은 디자인 설정을 해야 적용할 수 있어요.

 

연관 콘텐츠

이 페이지가 도움이 되었나요?
현재 콘텐츠