■ 인스고위젯관리 v2
- 인스타그램 계정을 연동하여 인스타그램에 등록된 콘텐츠를 쇼핑몰 화면에 노출시킬 수 있습니다.
- 쇼핑몰에 방문한 회원들과 소통하는 수단으로 활용할 수 있습니다.
▶ 인스고위젯 설정
- 쇼핑몰에 위젯으로 노출할 인스타그램 계정을 연동합니다.
· 인스고위젯 연동
: 콘텐츠를 노출할 인스타그램 계정을 연동합니다.
- [인스고위젯 연동] 버튼을 클릭하여, 인스타그램 계정 로그인 후, 연동 요청을 진행합니다.
- 계정 연동이 완료되면, [인스고위젯 연동 해제] 버튼이 출력됩니다.
- [인스고위젯 연동해제] 버튼 클릭 시, 연결된 계정의 연동은 해제되며, 쇼핑몰 화면에 인스타그램 콘텐츠가 노출되지 않습니다.
· 치환코드 보기
: 위젯을 노출할 수 있는 치환코드를 확인하고 복사할 수 있습니다.
- 인스타그램 계정 연동이 완료되면 치환코드가 출력됩니다.
- 치환코드를 [복사]하여 쇼핑몰 내 원하는 위치에 인스고위젯(인스타그램에 등록한 콘텐츠)을 노출할 수 있습니다.
① 치환코드 보기 : 복사한 인스고위젯 v2 치환코드를 "디자인 > 디자인 설정 > 디자인 페이지 수정"에서 에디터를 통해 각 페이지별 HTML 소스에 삽입하였을 때 [1-1] 이미지와 같이 노출됩니다.
· 썸네일 사이즈
: 위젯의 썸네일 사이즈를 설정합니다.
- 페이지에 자동 맞춤 : 쇼핑몰 페이지 간격에 자동으로 맞춰 썸네일 사이즈가 조정됩니다.
- 수동설정 : 콘텐츠가 노출될 이미지 사이즈를 직접 입력합니다. (3자리 숫자만 입력 가능)
└ 수동설정은 그리드 타입만 적용 가능합니다.
· 이미지 테두리
: 콘텐츠 노출 시 이미지 둘레에 테두리를 표시할지 여부를 선택합니다.
· 위젯 배경색
: 위젯 영역에서 콘텐츠 외 배경 부분의 색상을 선택합니다.
- 입력란 우측 네모 부분을 클릭하면 컬러 팔레트가 노출되어 원하는 색상을 직접 선택할 수 있습니다.
· 이미지 간격
: 위젯에 노출되는 콘텐츠의 간격을 설정합니다.
· 마우스 오버 시 효과
: 위젯에 노출되는 콘텐츠에 마우스를 오버했을 때 보여지는 효과를 설정합니다.
- 선택한 상품만 흐리게 : 선택한 콘텐츠에 마우스 오버 시 반투명 흰색 창이 씌어집니다.
- 선택한 나머지 상품 흐리게 : 기본적으로 위젯에 노출되는 모든 콘텐츠에 반투명 흰색 창이 씌워지고, 마우스 오버한 콘텐츠만 기존 색상으로 전환됩니다.
- 마우스 오버 시 효과는 그리드 타입, 스크롤 타입만 적용 가능합니다.
① 그리드타입 : 설정한 레이아웃에 맞춰 콘텐츠가 노출됩니다.
- [1-1] 레이아웃 항목에서 입력한 가로 n줄 x 세로 n줄에 맞춰 콘텐츠가 노출됩니다.
② 스크롤타입 : 콘텐츠가 자동으로 전환되며, 좌우 전환 버튼을 이용해 이전, 다음 콘텐츠를 확인할 수 있습니다.
- 스크롤타입 클릭 시 [2-1] 화면 항목이 노출됩니다.
- 위젯 가로사이즈 : 위젯이 노출되는 영역 가로사이즈를 입력합니다. (4자리 숫자만 입력 가능)
- 자동 스크롤 : '자동' 설정 시 자동으로 콘텐츠가 전환됩니다.
'고정' 설정 시에는 콘텐츠에 좌우 전환버튼이 노출되고, 전환버튼에 마우스 오버 시 콘텐츠가 스크롤됩니다.
└ '고정' 선택 시 좌우 버튼의 색상을 설정할 수 있는 좌우 전환 버튼 항목이 노출됩니다.
- 전환속도 선택 : 콘텐츠가 전환되는 속도를 설정할 수 있습니다.
③ 슬라이드쇼 타입 : 슬라이드 쇼처럼 한 장씩 콘텐츠가 전환됩니다.
- 슬라이드쇼 타입 선택 시 [3-1] 화면 항목이 노출됩니다.
- 효과 선택 : 콘텐츠가 전환될 때의 효과를 설정할 수 있습니다.
④ 미리보기 : 클릭 시 등록한 인스고 위젯 화면을 미리 확인할 수 있습니다.
- 등록된 인스고 위젯을 쇼핑몰에 노출하기 전 미리보기로 실제 노출될 인스고 위젯 내용을 확인할 수 있습니다.
