⚙️

위젯 상세 설정 가이드

💡위젯 설정 전 반드시 필독!

위젯 설정 전 반드시 필독!

알파 업셀 설치 시 모든 위젯은 기본적으로 설치 돼요! 만약 사용을 원하지 않는 위젯이 있을 경우 미 사용으로 변경 해주시면 됩니다

위젯 설정의 미리보기는 구매 버튼 클릭 위젯과 장바구니 버튼 클릭 위젯만 제공됩니다!

알파 업셀에서 디자인 수정 작업을 도와드리고 있지 않습니다!

알파업셀에서 디자인 수정 시 쇼핑몰에 어떤 오류가 발생할지 알 수 없고, 오류 발생 시 대처가 불가능하기 때문에 디자인 수정 작업을 도와드리기 어려운 점 양해 부탁드립니다

설정 변경 방법

접속 경로:[위젯 > 개별 설정 > 상세 설정]

쇼핑몰에 설치 되어있는 위젯 중 설정을 변경하고 싶은 위젯 아래의 상세 설정 버튼을 눌러주세요

설치된 위젯명이 궁금하다면?

상세설정 버튼 클릭 하여 이동 되는 페이지에서 원하시는 설정을 변경하신 후 페이지 우측 상단의 저장하기 버튼을 눌러야 반영 돼요

변경 된 설정은 자동으로 적용되며, 별도의 코드 수정 작업은 필요하지 않아요!

변경 된 설정이 적용되기까지 최대 10~15분 소요 되며, 시간이 경과 된 후 브라우저의 캐시/쿠키를 삭제하여 확인 해주세요

설정 상세

일반 설정

위젯에 노출 되는 문구와 사용 여부를 설정할 수 있어요!

•

ⓘ에 마우스를 가져다 놓으면 문구 위치를 확인 할 수 있습니다

상품추천 알고리즘에서 AI 자동 추천 설정 시 어떤 기준으로 상품이 추천 될 지 설정 할 수 있어요

알고리즘 확인하기

위젯 타이틀 문구는 PC/MO에 공통으로 적용 됩니다

직접 추천 설정과 AI 추천 설정을 동시에 사용하시는 경우 추천 그룹에 묶여있는 상품이 우선 되어 보여집니다

AI 추천 설정을 사용하지 않고, 직접 추천을 해두시지 않았다면 위젯 전체가 미 노출 될 수 있습니다

데스크톱/모바일 별도 설정

데스크탑과 모바일은 별도로 설정 해주셔야 합니다

위젯 설정

위젯에 보여지는 디스플레이 디자인(행과 열의 수, 최대 페이지 수, 페이지네이션 모양 썸네일 이미지, 썸네일 기준 등)을 설정을 변경하여 수정할 수 있고 버튼 노출 여부를 설정할 수 있어요!

위젯 마다 보여지는 정보가 다르기 때문에 변경하실 수 있는 설정 또한 다르게 보여져요

현재 사용하고 있는 위젯 중 변경이 가능한 설정들을 확인해보세요!

내부 컨텐츠 최대 너비는 쇼핑몰에 설치되어 보여지고 있는 위젯의 전체의 넓이로 위젯 크기를 변경 할 수 있습니다

페이지네이션 모양에서 ‘페이지네이션 없음’ 선택 시 페이지를 넘길 수 없어 첫 페이지만 보여지게 됩니다

설정 비활성화 후 픽셀 값을 수동으로 입력할 수 있습니다

상품 설정

상품명과 썸네일 이미지, 크기 설정 및 썸네일 내 버튼에 대한 노출을 설정 할 수 있어요

썸네일 비율은 최소 100%에서 최대 200%까지 설정이 가능합니다

상품 추천 기준

위젯에 표시 될 최소 추천 상품 수와 최대 상품 표시를 설정할 수 있어요

상품 추천 기준은 PC/MO에 공통으로 적용 됩니다

기타 추가 설정

CSS수정과 JavaSvript를 통해 디자인 수정을 할 수 있습니다

위젯 이름은 설치 후 위젯을 구분하기 위한 용도이며, 고객에게 노출 되지 않습니다

CSS 수정방법

자사몰 내에서 CSS 수정 후 대시보드에 수정 사항을 입력해주셔야 쇼핑몰에 적용 됩니다

동영상 가이드로 상세한 방법을 확인해보세요!

위젯 내 옵션으로 사이즈 조정을 원하는 영역을 선택하여 display: none; 처리 해주세요

•

특정 영역에서 마우스 우 클릭 → [검사] → 검사할 페이지 요소 선택 → 수정 원하는 위치 클릭 → d 입력 후 키보드의 “tab”키로 display 선택 → none 역시 동일한 방법으로 선택 → 전체 영역 복사

동영상 가이드로 상세한 방법을 확인해보세요!

해당 위젯이 추가되어있는 위젯 세트의 “수정하기” 버튼 클릭 → 해당 영역의 이름과 display; none; 영역만 남기고 지우기(수정 사항만 남기기) → 저장

•

동영상 예시는 하나의 예시이고, 이 외의 옵션 및 영역도 동일한 방식으로 CSS 수정 후 대시보드에 입력해두시면 미 노출 설정이 적용 됩니다

•

display; none; 뿐만 아니라 색상 코드, 텍스트 크기, 라운딩 처리 등 CSS 수정을 하실 수 있습니다

다른 기능 둘러보기