위젯 코드 수동 설정 가이드

레거시 방식입니다

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

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

TIP

위젯 코드란? 위젯 삽입 코드는 위젯 삽입 페이지에서 선택한 값에 따라 생성된 삽입 코드를 의미합니다. 아래 코드의 속성값을 변경하여 위젯의 형태 및 조건을 변경할 수 있습니다. 코드에 오타가 있으면 위젯이 노출되지 않을 수 있으니 코드를 넣는 방식과 친숙한 사용자분들에게만 해당 방식을 추천드립니다.

<shorts-works loop="true" posting-title="true" shape="story" type="group" access-key="11ec45abe65e22bebbc2baccc2206b681b06c267"></shorts-works>

↑ 위 코드가 실제로 렌더링된 모습입니다.

위 코드를 원하는 페이지에 넣으면 아래와 같이 보입니다. 코드의 속성값에 loop이 true로 들어가 있어 위젯에 쇼츠가 많아서 아이콘들이 늘어나 삽입된 공간 영역을 벗어나게 되면 자동 롤링 기능이 활성화 되고, posting-title이 true로 되어 있어 위젯 하단에 쇼츠 타이틀이 노출되고, shape은 위젯의 형태를 의미하는 속성으로 현재는 story로 되어있어, 인스타그램 스토리와 같은 모양으로 보입니다. type은 group으로 되어있어 개별 썸네일이 여러개인 위젯의 형태로 보입니다.

<shorts-works loop="true" posting-title="true" shape="story" type="group" access-key="11ec45abe65e22bebbc2baccc2206b681b06c267"></shorts-works>

↑ 위 코드가 실제로 렌더링된 모습입니다.

• type (아이콘 형태)

  • group: 여러개의 위젯이 붙은 형태로 보이는 일반적인 형태

    <shorts-works type="group"></shorts-works>

  • single: 한개의 아이콘에 여러 쇼츠가 들어간 위젯을 삽입하고자 하는 경우

    <shorts-works type="single"></shorts-works>

• shape(위젯의 모양)

  • story (인스타그램 스토리 모양)

    <shorts-works shape="story"></shorts-works>

  • shorts(유튜브 쇼츠 형태)

    <shorts-works shape="shorts"></shorts-works>

    • 플레이어 모드 (쇼츠 플레이어 모드를 선택하실 수 있습니다)

      • 플레이어 모드는 쇼츠 형태에만 적용되는 옵션으로 플레이어 모드를 따로 지정하지 않으면 기본 쇼츠 플레이어로 재생됩니다.

      • 임베드 모드(embed)

        • 상품 태그가 쇼츠에 함께 표시되며 상품 태그 터치/클릭 시 상세페이지로 바로 랜딩됩니다. 영상을 터치/클릭 해도 영상이 확대되며 커지지 않습니다.

          <shorts-works player-mode="embed"></shorts-works>

      • 임베드+팝업 모드(embed-with-popup)

        • 임베드 모드와 동일하며 영상 터치 시 전체 화면으로 커지는 팝업부분이 추가된 모드입니다.

          <shorts-works player-mode="embed-with-popup"></shorts-works>

      • 가격 태그 테마 조정

        • 기본값은 light이며 dark로 적용이 가능합니다. 추가로 할인율 표시의 옵션도 지정 가능합니다. 할인율의 기본값은 false 입니다.

          <shorts-works player-mode="embed-with-popup" productTagTheme="dark" showDiscountRate="true"></shorts-works>

  • embed(유튜브 쇼츠 형태가 상세페이지에 임베드 된 형태)

    <shorts-works shape="embed"></shorts-works>

    <shorts-works shape="embed" access-key="11ec45abe65e22bebbc2baccc2206b681b06c267" width="400"></shorts-works>

    • embed-padding

      • 임베드 테두리에는 기본적으로 “8px”의 여백이 상하좌우에 있습니다. 해당 테두리를 조정하여 가득차게 보여주고 싶거나 해당 여백을 조정하고 싶은 경우 수정이 가능합니다. 해당 속성은 임베드 shape에만 적용됩니다.

        • 적용 가능한 값은 픽셀(px), 퍼센트(%)로 적용 가능합니다.

        <shorts-works shape="embed" embed-padding="0" ></shorts-works>

        <shorts-works shape="embed" embed-padding="10px" ></shorts-works>

        <shorts-works shape="embed" embed-padding="5%" ></shorts-works>

• border (테두리 관련)

  • border-start-color ,border-end-color (테두리 색깔)

    • 스토리 모양의 컬러를 6자리의 헥사값(HEX)으로 지정할 수 있습니다.
    • 쇼츠 모양인 경우 세부 설정 페이지에서 “쇼츠 테두리 사용” 으로 표시 여부를 선택할 수 있습니다.
    • 또한 쇼츠 테두리 사용 중이 아니여도 border-start-color, border-end-color를 추가 시 표시할 수 있습니다.

    <shorts-works shape="story" border-start-color="#74acc8"></shorts-works>

  • visible-border

    • 스토리와 쇼츠의 테두리가 설정된 경우, 테두리를 특정 위젯에서 보이지 않도록 설정 가능합니다.

      <shorts-works shape="story" visible-border="false"></shorts-works>

• size (위젯 크기)

  • small, basic, large

  • 아래의 width값과 같이 쓰는 경우 width 값을 우선합니다

  • 세부 설정에서 위젯 아이콘의 크기를 설정한 경우

    <shorts-works size="basic"></shorts-works>

• posting-title (쇼츠 타이틀)

  • 위젯 아이콘 하단 타이틀 표시 여부

  • true/false

    <shorts-works posting-title="true"></shorts-works>

  • posting-title-color (위젯 타이틀 컬러 변경)

    <shorts-works posting-title-color="blue"></shorts-works>

    <shorts-works posting-title-color="#74ACC8"></shorts-works>

• hide-product-tag (상품 태그 카드)

  • 상품 태깅 표시

  • true/false

    <shorts-works hide-product-tag="true"></shorts-works>

• hide-like

  • 좋아요(우하단 하트모양) 표시 여부

  • true/false

    <shorts-works hide-like="true"></shorts-works>

• hide-title

  • 뷰어에서 타이틀을 숨길 수 있습니다.

  • 속성의 값은 true 또는 false로 가능하며 default는 false 입니다.

    <shorts-works hide-title="true"></shorts-works>

• hide-player-controller

  • 플레이어 재생바, 뮤트, 닫기 버튼 등이 플레이어에서 숨김처리됩니다.

    <shorts-works hide-player-controller="true"></shorts-works>

• display-play-icon (플레이 아이콘 오버레이)

  • 플레이 아이콘 오버레이를 감출 수 있습니다.

    <shorts-works display-play-icon="false"></shorts-works>

• width

  • 위젯의 크기는 너비에 비례해서 커집니다.

  • 숫자를 넣으면 해당 숫자의 픽셀값 적용(300, 300px)

    <shorts-works width="300"></shorts-works>

  • 퍼센트의 경우, 삽입될 영역의 크기에 비중으로 반영됩니다

    <shorts-works width="80%"></shorts-works>

• mobile-width (위젯의 모바일 뷰에서의 크기)

  • 위젯의 크기 (너비에 비례해서 커짐)

    <shorts-works mobile-width="300"></shorts-works>

  • 퍼센트의 경우, 삽입될 영역의 크기에 비중으로 반영

    <shorts-works mobile-width="80%"></shorts-works>

  • width 값이 이미 있을 경우, PC 너비에서는 width의 크기로 반영되고, 모바일 화면 크기에서는 mobile-width 값이 적용됨

    <shorts-works width="500" mobile-width="300"></shorts-works>

• view-size, mobile-view-size

  • 상세뷰의 뷰 크기를 조정할 수 있습니다.

  • 위젯의 크기 (너비에 비례해서 커짐)

    <shorts-works view-size="300"></shorts-works>

  • 퍼센트의 경우, 삽입될 영역의 크기에 비중으로 반영

    <shorts-works view-size="80%"></shorts-works>

  • PC 너비에서는 view-size의 크기로 반영되고, 모바일 화면 크기에서는 mobile-view-size 값이 적용됨

    <shorts-works view-size="500" mobile-view-size="300"></shorts-works>

• visible (PC/모바일 크기에서의 위젯)

  • PC, mobile, all

  • 768픽셀의 가로 너비를 기준으로 PC, 모바일 크기를 구분함

    <shorts-works visible="mobile"></shorts-works>

• gap (위젯 아이콘 사이의 간격)

  • 위젯 아이콘 사이의 간격을 값으로 지정

  • 아이콘 사이의 간격은 크기에 따라 자체적으로 비율 조정이 되지만 추가적으로 쇼츠 사이의 간격을 지정해야 할 경우

    <shorts-works gap="20"></shorts-works>

• side-padding(위젯 시작 끝부분 여백 처리, gap 과 별개, 퍼센트 값 지원)

  <shorts-works side-padding="20"></shorts-works>

• product-load-type (상세페이지 상품 매칭)

  • auto: 상품 상세페이지에 위젯이 삽입된 경우 상품과 매칭되는 쇼츠만 자동으로 보여줍니다.

    <shorts-works product-load-type="auto"></shorts-works>

    • product-id (옵션)

      • 상품 ID를 지정하면 위젯에는 상품 상세페이지와 매칭되는 상품 및 따로 지정한 상품 ID가 표시됩니다.

      <shorts-works product-load-type="auto" product-id="131, 142"></shorts-works>

  • fixed: 상품ID가 포함된 것들을 포함해 매칭합니다.

    • product-id (필수값)

      • 상품ID는 보통 상품 상세페이지나 어드민의 상품 등록 페이지를 통해 알 수 있습니다.
      • 상품 ID를 지정하면 위젯에는 지정한 상품 ID를 가진 쇼츠가 표시됩니다.

      <shorts-works product-load-type="fixed" product-id="131, 142"></shorts-works>

• posting-id (특정 쇼츠만 보여주고 싶은 경우)

  • posting-id는 웹 어드민의 [콘텐츠] 메뉴에서 개별 쇼츠의 메뉴에서 “퍼가기” 옵션을 선택하면 쇼츠 ID값을 알 수 있습니다.

  • 단일로도 넣을 수 있고, 아래 코드와 같이 복수의 형태로도 넣을 수 있습니다.

    <shorts-works posting-id="clu6c2yw900693v17sjrpko58, clu6oo6zw003e4b0w6wxtsan8"></shorts-works>

• pinned-posting-id (커스텀으로 핀할 쇼츠)

  • 해당 속성을 활용하면 커스텀하게 먼저 보여주고 싶은 쇼츠를 지정할 수 있습니다.

• preview (미리보기 방식)

  <shorts-works preview="slider"></shorts-works>

  • 위젯의 아이콘에서 미리보기를 재생할 수 있습니다.
  • 넣을 수 있는 값 : focus, slider, all
  • default 값은 slider 입니다.
  • focus : 마우스를 올렸을 때 해당 미리보기를 재생합니다.(모바일에선 호버가 없으므로 동작하지 않습니다.)
  • slider: 순서대로 미리보기를 재생하고 해당 아이콘의 미리보기가 끝나면 다음으로 넘어갑니다.
    • type 이 single인 경우 쇼츠가 끝나면 다음 아이콘이 보여집니다.
  • all: 모든 아이콘의 미리보기를 바로 재생합니다.

• sticky (모서리 등 특정 영역에 플로팅 형태로 띠우거나 웹사이트 특정 영역에 고정된 형태로 사용하고자 하는 경우)

  <shorts-works mode="sticky" shape="shorts" sticky-mode="attach" sticky-side="bottom" sticky-align="start" sticky-side-offset="0 0 40 0"></shorts-works>

  • 위젯을 특정 위치에 고정시킬 수 있습니다.

  • mode 를 sticky 로 지정하면 sticky 위젯으로 지정됩니다.

  • sticky-mode

    • flexible: 위젯이 원래 있던 위치에서는 일반 콘텐츠처럼 보이다가, 스크롤로 그 위치가 화면 밖으로 나가면 지정한 화면에 고정되어 떠 있는 방식입니다.
    • attach: 처음부터 화면 위에 고정되어 계속 떠 있는 방식입니다.

  • viewer-draggable

    • sticky 위젯을 마우스로 드래그 이동이 가능합니다.
    • 아래의 조건에서만 작동합니다.

    mode="sticky"
    sticky-mode="attach"
    type="single"
    viewer-draggable="true"

  • sticky-side-offset

    • 해당 위젯의 여백(마진)값을 커스텀하게 지정
    • 싱글 값 적용시 주변 마진 값을 공통 적용
    • 배열 값으로 적용 시 마진 값과 유사하게 적용

  • sticky-side

    • top, bottom, left, right 로 지정할 수 있습니다.
    • 브라우저를 기준으로 상하좌우 포지션을 지정하는 목적으로 사용됩니다.
    • 위젯 type이 single이 아닌 경우 해당 속성이 적용되지 않습니다.

  • sticky-align

    • start, center, end 로 값을 지정할 수 있습니다.
    • 위젯 type이 group인 경우 해당 속성은 브라우저 위치에서 “상, 중, 하”로 인식됩니다.

  • visible-scroll-position

    • 상단으로 특정 퍼센트/픽셀로 내려왔을때 스티키 위젯을 보여주도록 설정할 수 있습니다.

• visible-widget-icon-count (썸네일 아이콘 개수 지정)

  • 지정되어 있지 않으면 브라우저 너비 만큼의 아이콘 개수를 가득 채워 보여줍니다.

  • visible-widget-icon-count 와 visible-mobile-widget-icon-count 를 통해서 PC 사이즈와 mobile 사이즈에서 위젯이 보여줄 갯수 만큼의 크기로 지정이 가능합니다.

    <shorts-works visible-widget-icon-count="3" visible-mobile-widget-icon-count="4"></shorts-works>

• fit-content (위젯 너비 최소화)

  • 위젯을 최소한의 너비만 영역을 차지하도록 설정하여 이미 존재하는 아이콘 주변에 삽입하는 등의 방식으로 활용하실 수 있습니다.

    <shorts-works fit-content="true"></shorts-works>

• group-id (그룹 지정)

  • 쇼츠웍스 앱을 통해서 group를 지정하여 쇼츠를 관리하실 수 있습니다. 그룹 아이디는 복수로도 지정 가능하며 원하는 그룹 안의 쇼츠만 노출을 원할 경우 관리 페이지에서 그룹 ID를 복사하여 붙여주세요.

    <shorts-works group-id="그룹아이디1, 그룹아이디2"></shorts-works>

• category-no (쇼핑몰 분류 카테고리 지정)

  • 쇼핑몰의 카테고리 페이지에서 여러개의 위젯 블록을 넣어 카테고리 분류 번호에 따라서 다른 위젯을 보여줄 수 있습니다. 위 그룹 지정 기능에서 만들어둔 그룹 아이디를 넣어 함께 활용하면 카테고리별로 각기 다른 그룹의 위젯을 보여줄 수 있습니다.

    <shorts-works group-id="그룹아이디1, 그룹아이디2" category-no="80"></shorts-works>

• conversion-code (전환 추적 코드)

  • 전환 추적코드를 넣는 옵션을 위젯에 넣으면 위젯 단위에서 각 호스팅사에서 제공하는 상품 매출 전환 코드를 등록하여 성과를 트래킹할 수 있습니다.

  • 카페24의 경우는 &cafe_mkt={추적코드명}을 통해 자체 통계 페이지에서 전환 코드를 설정할 수 있습니다. (단, 쇼츠웍스 어드민의 세부설정에서 상품 아이디 포함 옵션이 켜진 경우 추적코드명 뒤에 상품 아이디 주소가 자동으로 붙게 됩니다. 상품단위의 트래킹을 원하실 경우 활용하실 수 있습니다)

    <shorts-works conversion-code="shortsworks"></shorts-works>

  • 플렉스지의 경우는 &ch_idx={추적코드}를 통해 매출 통계 페이지에서 쇼츠웍스를 통한 전환을 측정할 수 있습니다. 플렉스지의 전환 추적코드는 플렉스지에서 생성하셔야 하며 추적코드는 모두 숫자로 되어있습니다.

    • 플렉스지 상품 추적코드 생성 방법

플렉스지(위드소프트) 관리자 [상품] - [상품 채널_추적코드] 화면. 채널명 '쇼츠웍스' 행의 추적코드 값(예: 409)을 확인한다. 이 코드를 상품 URL 뒤에 &ch_idx=추적코드 로 붙이면 채널별 매출을 집계할 수 있다.

    ```html
    <shorts-works conversion-code="shortsworks"></shorts-works>
    ```

• style CSS적용

  • 권장드리는 방법은 아니지만 위젯의 상단이나 하단에 여백 등을 조절하시고 싶은 경우, CSS코드를 위젯 안에 넣어 적용하고 싶은 경우 다음과 같이 마진을 조절하실 수 있습니다. 해당 방법 보다는 div 컨테이너를 이용해서 해당 컨테이너에 style을 적용하는 방법을 추천드립니다.

    <shorts-works style="margin-top:30px; margin-bottom: 30px;"></shorts-works>