상세페이지에 자동으로 위젯 넣기

레거시 방식입니다

이 방식은 옵션을 바꿀 때마다 코드를 다시 만들어 쇼핑몰에 재삽입해야 합니다. 위젯 스튜디오에서 프리셋으로 만들면 설치 코드는 그대로 두고 스타일과 콘텐츠만 바꿔도 바로 반영됩니다. 새로 시작하신다면 스튜디오를 쓰세요.

이미 이 방식으로 붙여둔 코드는 그대로 두어도 계속 동작합니다.

TIP

웹사이트의 상세페이지에 위젯을 넣고자 하는 경우 진행 방법은 아래와 같습니다.

*쇼츠웍스의 위젯 기능 사용을 위해서는 위젯 설정하기(스크립트 설치) 단계가 먼저 진행되어 있어야 합니다. 아직 스크립트를 설치하지 않은 상태라면 👆해당 가이드를 통해 스크립트를 설치해주세요.

쇼츠웍스의 [위젯 설정]-[위젯 삽입]의 메뉴에서 타입의 “단일 쇼츠(자동재생)”을 선택해주세요.

[위젯 설정] - [위젯 삽입] 에서 타입을 '단일 쇼츠(자동 재생)' 으로 고른 화면. 위쪽 입력창의 <shorts-works width="400px" mobile-width="320px" shape="embed" access-key="…"> 태그를 '복사' 로 가져간다.

만일 상품의 상세페이지에 위젯을 삽입하는 경우 해당 상품이 태깅된 쇼츠만 보여주고자 하는 경우 상품 매칭 기능을 사용해보세요.

'상품 매칭' 설정. '켜기' 는 상세페이지에 위젯을 넣으면 그 상품이 태깅된 쇼츠만 보여주고, '끄기' 는 상품과 관계없이 모든 쇼츠를 보여준다.

상세페이지의 너비에 맞춰 관련 영역의 크기도 설정이 가능합니다.

PC·모바일 크기 설정. 각각 '고정'(px, 예: PC 400 / 모바일 320) 또는 '비율'(%, 위젯이 들어가는 영역의 가로 기준) 로 지정한다.

위 설정을 모두 마쳤으면 상단의 코드를 복사해서 카페24의 원하는 영역에 삽입해줍니다.

설정을 마친 뒤 '위젯 삽입' 상단 입력창의 태그를 '복사' 로 가져간다. 이 코드를 카페24 디자인 편집창의 원하는 영역에 붙여넣는다.

• 카페24 디자인 보관함을 통해 디자인 스킨에 직접 코드를 넣어 위젯을 붙이는 방법**(스마트편집창)**

디자인 메뉴의 디자인 보관함에서 디자인 편집을 클릭해 편집 영역으로 들어갑니다

왼쪽의 주요화면 중 상세페이지(혹은 유사한 페이지)로 진입해서 원하는 영역에 코드를 삽입하고, 저장을 눌러주시면 반영됩니다

TIP

상세페이지에 붙이는 위젯에 그룹아이디를 따로 넣으면 상세페이지와 메인페이지의 콘텐츠를 구분하여 관리가 가능합니다.