디자인
재생목록 카드를 클릭하면 재생목록 편집페이지로 이동합니다. 재생목록 편집페이지에서 재생순서와 재생목록 크기, 레이아웃 등 디자인을 설정할 수 있어요.
Last updated
재생목록 카드를 클릭하면 재생목록 편집페이지로 이동합니다. 재생목록 편집페이지에서 재생순서와 재생목록 크기, 레이아웃 등 디자인을 설정할 수 있어요.
Last updated
Ⓒ 2023 Catenoid Inc. All Rights Reserved.
재생목록은 최적의 숏폼 시청과 쇼핑 경험을 제공할 수 있도록 모바일 / PC 화면이 달라요. 모바일인 경우 항상 동일한 형태로 표시 되지만, PC인 경우 숏폼과 상품 목록의 '배치 방식'을 선택할 수 있어요.
[디자인 탭] > [PC 레이아웃 메뉴]에서 목록, 그리드, 슬라이드 레이아웃 중 하나를 클릭하세요.
선택한 레이아웃은 페이지 미리보기에서 자세히 볼 수 있어요.
쇼핑몰과 비슷한 환경에서 재생목록을 미리보고 싶다면, 상단의 [미리보기] 버튼을 클릭하세요. -> 새창으로 미리보기 로 이동하여 더 자세히 알아보기
디자인 탭에서 수정사항이 생기면 메뉴 상단 배경이 어둡게 변경되며 [미리보기], [변경취소], [저장하기] 버튼이 표시돼요. [저장하기] 버튼을 클릭하여 선택한 PC 레이아웃을 반영해 주세요.
[링크복사] 또는 [코드복사] 후 원하는 곳에 붙여넣기 한 다음, PC에서 재생목록을 확인해 보세요.
페이지에서 표시되는 PC 미리보기는 페이지내 미리보기 너비로 표시돼요. 따라서, 실제 쇼핑몰 페이지에 적용한 상태와 다를 수 있어요.
실제 쇼핑몰 페이지에서 재생목록이 들어가는 영역의 '너비'에 따라 레이아웃 별로 보여지는 상품의 개수가 달라져요. 미리보기와 실제 적용된 상태가 다르다면, '너비'가 다를 가능성이 높아요.
너비에 따라 달라지는 재생목록을 확인하고 싶다면? -> 브라우저의 크기를 조절하거나, 새창으로 미리보기로 이동하세요.
목록은 상품 목록 1줄에 1개의 상품 썸네일을 수직으로 배치한 디자인이에요.
목록을 스크롤하며 쉽고 빠르게 필요한 정보를 얻을 수 있어요.
특히 책이나 건강 보조식품에 목록형 레이아웃 사용을 추천드려요. 각 상품의 제목, 가격, 크기, 주요 특징 등을 일렬로 나열하여, 고객이 상품을 더 편리하게 비교할 수 있어요.
그리드는 상품을 격자로 나열한 디자인이에요. 최대 4~6개의 썸네일이 표시될 수 있어요. 한 번에 많은 썸네일이 표시되기 때문에 페이지 공간 활용이 가장 좋아요.
고객이 여러 상품을 동시에 볼 수 있어요. 따라서, 상품 간의 '차이점'이나 '조화'를 보여주고 싶을 때 적용해 보세요.
매치가 중요한 악세사리, 패션, 인테리어 상품을 쇼핑몰 메인에 게시할 때 활용할 수 있어요.
슬라이드는 상품 목록 1줄에 2~3개의 썸네일을 크게 배치하여 좌우 버튼으로 목록을 넘길 수 있는 디자인이에요.
소수의 상품만 게시하여 메인 상품이나 시즌별 컬렉션을 강조할 때 효과적이에요.
'높이'를 설정하여 재생목록의 크기를 조절할 수 있어요. 기본으로 설정된 높이는 640px이에요. PC에 샵 플레이어 재생목록을 최적으로 시청할 수 있는 높이를 설정했어요. 샵 플레이어 높이를 변경하고 싶다면, 아래 방법을 참고해주세요.
[디자인 탭] > [크기 설정] 메뉴에서 높이 인풋박스의 숫자를 변경해 주세요.
기본 640px로 입력되어 있으며, 샵 플레이어 크기가 커지길 원한다면 그 이상의 숫자를 입력해 주세요. 최소 520px ~ 최대 800px 범위까지 입력할 수 있어요. 최소, 최대 입력 범위를 벗어나면, 가까운 최소값, 최대값으로 바뀌어요. 예를들면, 300px을 입력한 경우 520px로 변경돼요. 재생목록 크기가 너무 작아지거나 너무 커지면 사
페이지 내에서는 높이 변경을 미리볼 수 없어요. 상단의 [미리보기] 버튼을 클릭하세요. 쇼핑몰과 최대한 비슷한 환경에서 높이를 확인할 수 있어요. -> 새창으로 미리보기 로 이동하여 더 자세히 알아보기
디자인 탭에서 수정사항이 생기면 메뉴 상단 배경이 어둡게 변경되며 [미리보기], [변경취소], [저장하기] 버튼이 표시돼요. [저장하기] 버튼을 클릭하여 높이를 반영해 주세요.
[링크복사] 또는 [코드복사] 후 원하는 곳에 붙여넣기 한 다음, PC에서 재생목록을 확인하세요.
페이지 내에서 제공하는 미리보기 화면으로 디자인 메뉴에서 선택한 설정을 확인할 수 있어요.
상단 탭을 클릭하여 PC와 모바일 화면을 번갈아 확인해 보세요.
[크기설정] > 높이에 숫자를 변경하더라도, 페이지 내 미리보기에서는 적용되지 않아요. 크기 설정에서 입력한 높이를 정확히 확인하고 싶다면 ->새창으로 미리보기로 이동하세요.
Q: 새창 미리보기에서 '너비'는 조절할 수 있는데 '높이'는 왜 조절할 수 없나요? A: '너비'는 찰나 재생목록에서 결정하는 디자인 속성이 아니기 때문이에요. 재생목록의 너비는 고객님이 운영하는 쇼핑몰에서 지정한 콘텐츠 영역의 너비에 따라 달라져요. 예를 들어, 쇼핑몰에서 상품 썸네일(=콘텐츠) 4개가 들어간 영역의 너비가 1200px 가정해 보아요. 그렇다면, 재생목록의 너비도 1200px로 설정돼요. 이 너비는 각 쇼핑몰마다 다르기 때문에 재생목록의 디자인 속성에서 고정할 수 없어요. 만약, 찰나 디자인 속성에서 너비를 고정하면, 모바일 화면으로 보아도 반응형이 적용되지 않아요. 즉, 모바일로 쇼핑몰에 접속한 소비자에게 PC 버전으로 숏폼과 상품목록이 표시되어 시청에 영향을 줄 수 있어요.
따라서, 새창 미리보기로 실제 쇼핑몰 화면과 최대한 가깝게 표시되는 재생목록을 보고, 저장하고, 코드 붙여넣기 했을 때 한 번에 만족하실 수 있도록 너비 조절 기능을 제공해 드렸다는 점 참고해 주세요!
디자인 메뉴영역 상단의 [미리보기] 버튼을 클릭하세요. 미리보기 화면이 새창으로 표시됩니다. 쇼핑몰 환경과 가장 비슷한 환경에서 설정한 재생목록 디자인을 미리볼 수 있어요.
브라우저 크기를 조절하여 반응형 재생목록을 확인해 보세요. 브라우저의 크기가 상단에 표시됩니다. 브라우저 크기가 767px이 되는 순간, 콘텐츠 영역 너비와 관계 없이 재생목록 모바일 모드가 표시돼요.
찰나 재생목록은 고객 쇼핑몰에서 지정한 콘텐츠 영역 너비를 자동으로 감지하고, 이에 따라 샵플레이어와 상품 목록의 배치를 최적화하고 있어요. 콘텐츠 영역 너비는 쇼핑몰마다 달라요. 따라서 새창 미리보기에서도 콘텐츠 영역 너비를 자유롭게 변경할 수 있어요. 너비 입력칸에 쇼핑몰 메인에서 썸네일이 차지하는 너비(가로길이)와 비슷한 숫자를 입력하고 재생목록이 어떻게 표시되는지 미리 가늠해 보세요. 콘텐츠 영역 너비를 767px 이하로 입력하면, 모바일 모드가 표시돼요.
