» 카페24 쇼핑몰 » 자사몰 컬러칩 옵션 선택시 이미지 변경 설정 방법

자사몰 컬러칩 옵션 선택시 이미지 변경 설정 방법

카페24 쇼핑몰에서는 상품의 색상 또는 옵션 선택시 상품의 이미지가 변경되도록 설정할 수 있습니다.

특별한 개발을 하지 않아도 기본 기능으로 설정할 수 있는 만큼 상품의 컬러별 이미지가 있고, 설정 방법만 알고 있다면 쉽게 설정할 수 있죠. 그러면 어떻게 설정할 수 있는지 알아보도록 하겠습니다.

웹사이트의 컬러칩과 상품 이미지가 보이는 이미지

컬러칩 옵션 변경시 이미지 변경의 필요성

상품의 색상은 개인의 취향에 따른 구매욕구를 자극할 수 있는 중요한 요소이죠. 그래서 상품상세페이지 중 한 영역에서만 색상을 보여주는 것이 아니라 가능한 곳에서 색상을 노출하여 구매를 유도할 수 있습니다.

그 중 하나가 옵션 선택의 액션으로 변경되는 상품의 이미지가 해당 색상의 이미지로 변경되는 것입니다. 자신이 선호하는 색상을 선택하고 그에 대한 피드백으로 해당 상품의 이미지를 바로 확인할 수 있어서 편리함을 넘어서 자극이 될 수 있죠.

그리고 바로 확인할 수 있기때문에 상세페이지를 오가는수고를 덜고, 고민의 시간을 줄여줄 수 있어 전환률 상승에 도움을 줄 수 있습니다.

컬러칩 옵션 설정 방법

그러면 어떻게 설정할 수 있을까요?

카페24 쇼핑몰에서 상품옵션은 다양한 형태로 노출시킬 수 있습니다. 이 게시글에서는 컬러칩으로 설정하는 방법을 다뤄보겠습니다.

상품 등록 페이지로 진입하여, 옵션/재고 섹션으로 이동을 합니다. “옵션 스타일”을 “미리보기”로 지정합니다. 등록하려는 상품의 옵션 항목을 모두 입력한 다음 상품등록을 합니다.

카페24 쇼핑몰의 옵션을 등록하는 화면

등록 후 다시 상품 수정페이지에 진입하여 옵션/재고 섹션으로 이동하여, 옵션값 관리 [옵션값 수정]을 클릭하여 옵션의 수정페이지로 이동하합니다.

카페24 쇼핑몰의 상품 수정 페이지에서 옵션값 수정 버튼의 위치

여기서 중요한 설정은 “색상 설정”과 “색상 이미지 연결” 입니다.

색상 설정 : 옵션에 등록한 색상을 컬러칩 형태로 쇼핑몰 상품 상세페이지에 노출됩니다. 만약 “버튼 이미지”와 함께 설정한다면 등록한 이미지를 우선시 합니다.

색상 이미지 연결 : 옵션에 해당하는 상품의 이미지를 연결하는 것으로 설정한 색상을 클릭할 경우 상세페이지 상품의 이미지가 해당 이미지로 변경됩니다.

여기서 색상 설정을 해당하는 옵션의 컬러값으로 지정한다면 상품 목록과 상품 상세페이지에서 컬러칩으로 노출되는 것을 확인할 수 있습니다.

카페24 쇼핑몰의 옵션값 수정 창의 색상 설정 부분

컬러칩 옵션 선택시 변경되는 이미지 등록 방법

이어서 “상품 이미지 연결” 에서는 해당 옵션 선택시에 상품 이미지 영역에 해당하는 옵션에 맞는 상품이미지를 등록하여 노출할 수 있습니다.

이미지는 어떻게 선택할 수 있을까요? [+] 버튼을 클릭하여 이미지 선택 팝업창을 열고 등록된 이미지를 선택하거나, 새로운 이미지를 추가할 수 있습니다.

카페24 쇼핑몰의 옵션값 수정 창의 색상 이미지 연결 부분

이 과정에서 추가된 이미지는 상품의 이미지 정보 섹션의 추가 이미지 영역에 추가되기때문에 이미지 등록 조건은 추가 이미지 조건과 동일합니다.

카페24 쇼핑몰의 색상 이미지 연결의 이미지 선택창
카페24 쇼핑몰의 색상 이미지 연결의 이미지 추가후 추가이미지 적용 예시

여기서 옵션이 선택될때마다 변경되는 이미지를 지정할 수 있습니다.

카페24 옵션 이미지 변경 기본기능의 한계

카페24 쇼핑몰의 기본 디자인에서 제공하는 이미지 변경 기능은 모바일 디자인에서는 작동하지 않습니다.

PC버전에서 작동하는 것으로 보면 반응형으로 구현하는 디자인에서 정상적인 기능 제공이 가능하겠지만, 모바일의 기본 디자인에 구현되지 않은 것은 조금 아쉬운 부분입니다.

모바일 화면의 특성상 썸네일과 옵션 선택 영역의 간격이 커지면 이미지 변경되는 것이 보이지 않기 때문에, 큰 의미가 없을 수도 있지만 색상옵션을 선택한 상태에서 고민하는 고객에게는 한번 더 자극할 수 있는 영역이니 말이죠.

이부분은 필요하다면 커스터마이징 작업을 통해서 기능을 하도록 수정해야겠습니다.

PC 컬러칩과 이미지 변경 확인
모바일의 컬러칩과 이미지 변경 미작동 확인

카페24 세팅&디자인 수정 개발자 – ziinup(진희태)

웹퍼블리싱과 카페24 쇼핑몰 9년 이상의 경력으로 브랜드의 쇼핑몰 구축과 디자인 커스터마이징을 작업하는 개발자입니다.