위젯 삽입하기

레거시 방식입니다

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

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

TIP

위젯 삽입이란?

웹사이트 내에 쇼츠웍스의 위젯을 넣고 싶은 영역에 위젯을 지정하는 설정입니다.

쇼츠웍스의 “위젯 설정” 메뉴 중 “위젯 삽입”을 진입하면 확인되는 태그를 원하는 영역값에 삽입하면 됩니다.

쇼츠웍스 내 ”세부 설정” 메뉴에서 지정한 콘텐츠 모양에 위젯 형태가 정해집니다. 크게 두가지의 사용방법이 있습니다.

1. “기본값 사용”을 선택하시고, 세부설정에서 지정한 크기, 모양 등의 옵션을 설정하셔서 사용하는 기본적인 형태가 있습니다.

2. “커스텀” 값을 선택하시고 세부적인 설정을 변경해서 코드를 넣으실수도 있습니다.

위젯 삽입 코드 예시

[위젯 설정] - [위젯 삽입] 화면. 상단 '위젯 삽입' 영역의 입력창에 <shorts-works access-key="..."></shorts-works> 태그가 들어 있고, 오른쪽 '복사' 버튼으로 복사한다. 아래로 타입(위젯 / 단일 쇼츠), 그룹 선택, 위젯 속성(기본값 사용 / 커스텀)이 이어진다.

쇼츠웍스 내 [위젯 설정]-[위젯 삽입] 메뉴의 상단에 있는 위젯 삽입의 코드는 아래의 구조로 생겼습니다. 기본적으로 아래의 옵션 값에 따라서 삽입되는 위젯의 코드가 변경되며 해당 코드를 복사하셔서 원하는 영역에 넣으면 위젯이 표시 됩니다.

<shorts-works access-key="your access key"></shorts-works>

위젯 타입별 분류

타입 : 위젯(세부 설정에서 설정한 위젯값)

타입을 '위젯'으로 고른 화면. 여러 쇼츠가 원형 아이콘 리스트로 늘어서고, 아래 커스텀 속성(모양·아이콘 형태·제목·자동 롤링·사이즈·상품 매칭·미리보기 방식)이 펼쳐진다.

TIP

위젯: 보통 메인페이지, 이벤트 페이지 등에 여러개의 쇼츠를 모아둔 형태의 위젯을 사용할때 선택해주시면 됩니다.

타입을 '단일 쇼츠(자동 재생)'으로 고른 화면. 쇼츠 하나가 세로형 플레이어로 자동 재생되며 제목·일시정지·음소거 컨트롤이 보인다.

TIP

단일 쇼츠(자동재생): 보통 상품의 상세페이지에 쇼츠 형태로 넣고자 하는 경우에 사용하실 수 있는 위젯입니다.

위젯 속성별 분류

• 위젯 타입의 기본값

기본적인 형태의 위젯을 사용하고자 하는경우 해당 옵션을 선택해서 사용하면 됩니다

• 위젯 타입의 커스텀

위젯 속성 '커스텀' 선택 시 열리는 설정. 모양, 아이콘 형태(단일/멀티), 제목 표시·숨김, 자동 롤링 켜기·끄기, 사이즈(기본/직접 지정하기), 상품 매칭 켜기·끄기를 각각 고를 수 있다.

- 커스텀 속성 리스트
    - 모양: 스토리, 쇼츠 모양
    - 아이콘 형태
        - 단일 아이콘: 아이콘들 리스트에 단일 아이콘을 추가해서 사용하거나 임베드를 하여 사용하고자 하는 경우
        - 멀티 아이콘: 일반적인 쇼츠나 스토리가 아이콘 리스트 형태로 보이는 형태
    - 제목: 아이콘/쇼츠 하단에 쇼츠 타이틀의 표시 여부 선택
    - 자동 롤링: 아이콘/쇼츠 리스트가 자동으로 슬라이딩 되는 옵션([자동 롤링 - 위젯 내 썸네일 위치 자동 변경](/legacy/detail-settings#auto-rolling) 참고)
    - 사이즈: 위젯과 아이콘의 사이즈 지정
    - 상품 매칭: 상세페이지에 위젯이 들어가는 경우 해당 상품이 태깅된 쇼츠만 보여주는 옵션 (현재는 카페24 쇼핑몰에만 적용이 가능합니다)

• 단일 쇼츠

'단일 쇼츠' 타입의 속성. 상품 매칭 외에 PC·모바일 크기를 각각 '고정(px)' 또는 '비율(%)'로 지정한다. 비율은 위젯이 들어가는 영역의 가로를 기준으로 한다.

- 단일  쇼츠 속성 리스트
    - 상품 매칭: 상세페이지에 위젯이 들어가는 경우 해당 상품이 태깅된 쇼츠만 보여주는 옵션 (현재는 카페24 쇼핑몰에만 적용이 가능합니다)
    - PC 사이즈: 원하는 사이즈를 고정으로 설정하여 픽셀 값을 지정하거나, 해당 위젯이 삽입되는 영역의 가로기 준의 너비의 비율을 지정할 수 있습니다.
    - 모바일 사이즈: 모바일 사이즈를 PC 사이즈와 별개로 지정할 수 있으며, 원하는 사이즈를 고정으로 설정하여 픽셀 값을 지정하거나, 해당 위젯이 삽입되는 영역의 가로기 준의 너비의 비율을 지정할 수 있습니다.
    - 단일 쇼츠를 상세페이지에 넣는 경우는 [상세페이지에 자동으로 위젯 넣기](/legacy/detail-auto) 가이드를 참고해주세요.