무한 스크롤 배너 만들기

무한 스크롤 배너는 뉴스 티커처럼 콘텐츠가 오른쪽에서 왼쪽으로 계속 반복되는 바입니다. 반복되는 프로모션, 무료 배송 안내, 고객의 눈에 띄었으면 하는 짧은 공지에 사용하세요.

참고

무한 스크롤 배너에는 콘텐츠 섹션이 하나만 있으며 Add Group 옵션이 없습니다. 여러 메시지를 차례로 순환시키려면 기본 배너를 사용하세요.

1. 배너 페이지 열기

   Shopify 관리자에서 Sami Product Labels 앱을 열고 앱 사이드바에서 Extra Features를 클릭한 다음 Banners 탭으로 전환하세요.

   

   Sami Product Labels 사이드바에서 Banners를 여세요.

2. Create banners를 클릭한 다음 Infinite Scroll 선택하기

   Create banners를 클릭하세요. Select Type 대화상자에서 Infinite Scroll 옆의 Select를 클릭합니다. Infinite Scroll은 배너 콘텐츠를 무한 반복해 끊김 없는 스크롤 효과를 주는 유형입니다.

   

   Infinite Scroll을 선택하면 티커 스타일의 바를 만들 수 있습니다.

3. 배너 이름 지정하기

   전체 화면 편집기가 Design 탭에서 열립니다. 미리보기 위의 이름 입력란에서 New Banner를 최대 50자의 이름으로 바꾸세요. 이 이름은 내부용이며 고객에게는 표시되지 않습니다.

   이름 옆에는 언어 선택기, 데스크톱 및 모바일 미리보기 전환 버튼, Active / Draft 상태 스위치도 있습니다.

   

   미리보기 위의 도구 모음에서 배너 이름, 언어, 미리보기 기기, 상태를 설정할 수 있습니다.

4. 스크롤되는 콘텐츠 편집하기

   Section 1에는 ✨ Free ship on order $40+ ✨ 같은 샘플 텍스트가 담긴 Description 요소가 하나 있습니다. 요소를 클릭하면 오른쪽에 설정이 열립니다.

   • Content — 굵게, 기울임, 밑줄, 이모지, 정렬, HTML 보기(</>)를 지원하는 리치 텍스트 편집기입니다. 언어 칩에는 편집 중인 언어가 표시됩니다.
   • Text — 글꼴 Size와 Color.
   • Padding과 Margin — 요소 주변 여백(픽셀 단위).

   Add element를 클릭하면 반복 구간에 Message, Heading, Line break, Button, Countdown, Image 같은 항목을 더 추가할 수 있으며, 행 왼쪽의 핸들을 드래그해 순서를 바꿀 수 있습니다.

   

   바를 가로질러 반복되는 요소를 편집하거나 순서에 요소를 더 추가하세요.

5. 바 스타일 지정하기

   Style 패널에서 다음을 설정합니다.

   • Background Type — Single Color, Gradient Color, Pattern Image 중에서 선택하세요. 무한 스크롤 배너의 기본값은 Pattern Image이며, Change Image로 타일을 바꾸거나 Remove로 지울 수 있습니다.
   • Font Style — 글꼴, 굵기, 기본 텍스트 색상을 설정하세요.
   • Padding — 바 안쪽 여백을 조정하세요.

   참고

   패턴 이미지는 PNG, JPG 또는 SVG 형식으로, 최대 5MB, 512 × 512px여야 합니다.

6. 닫기 버튼 추가 또는 바를 클릭 가능하게 만들기

   두 옵션은 모두 Button 패널에 있으며 기본적으로 꺼져 있습니다.

   • Include Close Button을 체크하면 바에 “x”가 표시되어 고객이 바를 닫을 수 있습니다. Color와 Hover Color 두 개의 입력란이 나타납니다.
   • Bar Clickable을 체크하면 바 전체가 링크가 됩니다. Link URL 입력란이 나타나면 이동할 주소를 입력하고, 옆의 토글로 링크를 새 탭에서 열지 설정하세요.

   

   각 체크박스를 켜면 닫기 버튼 색상이나 링크 URL 같은 설정이 나타납니다.

7. 스크롤 속도와 타이밍 설정하기

   Animation 패널의 네 입력란은 모두 초 단위입니다.

   입력란	제어하는 항목
   Scroll speed	한 번 완전히 반복하는 데 걸리는 시간. 숫자가 클수록 스크롤이 느려집니다.
   Disappear After	바가 숨겨지기 전까지 화면에 머무는 시간.
   Interval Between Bar Display	바가 다시 나타나기까지의 간격.
   Time For The Bar To Fade In	페이드인 애니메이션의 길이.

   참고

   입력란을 0으로 두면 해당 동작이 꺼집니다. 예를 들어 Disappear After = 0이면 고객이 닫을 때까지 바가 계속 표시됩니다.

   

   Scroll speed는 한 번 반복하는 시간을 정합니다. 값을 늘리면 티커가 느려집니다.

8. (선택 사항) 사용자 지정 CSS 추가하기

   Advance Section을 열고 Custom CSS (Developer Zone) 상자에 직접 CSS를 작성하세요. 그 아래의 CSS reference 목록에는 무한 스크롤이 켜져 있을 때 사용되는 래퍼인 .samita_banner_groups.infinityScroll을 비롯해 사용할 수 있는 선택자가 표시됩니다. 선택자를 클릭하면 삽입됩니다.

9. 배너가 표시될 위치 선택하기

   Placement 탭으로 전환하고 표시 위치를 선택하세요.

   위치	동작
   Top	페이지 콘텐츠를 아래로 밀어냅니다.
   Top Sticky	콘텐츠를 아래로 밀어내고 스크롤해도 계속 표시됩니다.
   Top Overlay	페이지 콘텐츠 상단 위에 겹쳐 표시됩니다.
   Overlay Sticky	콘텐츠 위에 겹쳐 표시되고 스크롤해도 계속 표시됩니다.
   Bottom Sticky	페이지 하단에 고정됩니다.
   Custom	쇼트코드를 사용해 원하는 곳에 바를 배치합니다.

   위치 선택기 아래에서 Product conditions, Customer conditions, Page conditions, Language conditions, Country conditions, Other conditions, Visibility date로 대상을 좁힐 수 있습니다. Custom을 선택하면 Shortcode 패널에서 테마에 붙여넣을 코드를 확인할 수 있습니다.

   각 조건 유형의 자세한 내용은 표시 조건 구성하기를 참고하세요.

   

   표시 위치를 선택한 다음 조건을 추가해 배너를 볼 대상을 제어하세요.

10. 저장하고 활성화하기

    미리보기 위의 상태 스위치를 Active로 설정한 다음 오른쪽 상단의 Save를 클릭하세요. 게시하지 않고 계속 작업하려면 Draft로 두세요.

    주의

    테마에서 앱 임베드가 활성화되어 있어야 스토어프런트에 배너가 표시됩니다. 테마에서 앱 활성화하기를 참고하세요.

다음 단계

• 표시 조건 구성하기 — 배너가 표시되는 위치와 대상을 제어하세요.
• 기본 배너 만들기 — 대신 정적이거나 순환하는 공지 바를 만들어 보세요.

팁

도움이 필요하신가요?

단계를 따라 하다가 어려움이 있다면 [email protected]로 문의해 주세요.