기본 배너 만들기

기본 배너는 제목, 메시지, 버튼, 카운트다운, 이미지 같은 content elements를 하나 이상의 섹션으로 묶어 만드는 바입니다. 편집기에는 Design(콘텐츠와 스타일)과 Placement(바가 표시되는 위치와 대상) 두 개의 탭이 있습니다.

1. 배너 페이지 열기

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

   

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

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

   Create banners를 클릭하세요. Select Type 대화상자에서 Basic 옆의 Select를 클릭합니다. Basic은 단일 또는 여러 콘텐츠 그룹을 지원하는 유형입니다.

   

   Basic을 선택하면 표준 공지 바를 만들 수 있습니다.

   참고

   처음부터 만들고 싶지 않으신가요? Banners 페이지에서 Featured templates 또는 View all templates를 사용해 준비된 배너를 열고 수정하세요.

3. 배너 이름 지정하기

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

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

   

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

4. 콘텐츠 구성하기

   Content 아래의 Section 1에는 바를 구성하는 요소가 나열됩니다. 요소를 클릭하면 텍스트와 스타일을 편집할 수 있고, 왼쪽 핸들을 드래그하면 순서를 바꿀 수 있으며, 행 오른쪽의 아이콘으로 요소를 숨기거나 복제하거나 삭제할 수 있습니다.

   Add element를 클릭해 새 요소를 추가하세요.

   요소	추가되는 항목
   Message	본문 텍스트 한 줄.
   Heading	큰 제목.
   Line break	요소 사이의 세로 간격.
   Button	고유한 링크가 있는 행동 유도 버튼.
   Countdown	일 / 시간 / 분 / 초 타이머.
   Image	이미지 또는 로고.

   

   바를 구성하는 요소를 추가하고, 순서를 바꾸고, 편집하세요.

5. (선택 사항) 콘텐츠 그룹 더 추가하기

   Add Group을 클릭하면 Section 2, Section 3 등이 만들어집니다. 각 섹션은 별도의 메시지이며, 배너가 이 섹션들을 차례로 순환합니다. 타이밍은 다음 단계의 Animation에서 조정하세요.

   정적인 메시지 하나만 표시하려면 섹션을 하나만 두세요.

6. 바 스타일 지정하기

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

   • Background Type — Single Color, Gradient Color, Pattern Image 중에서 선택한 다음 색상이나 이미지를 설정하세요.
   • Font Style — 글꼴, 크기, 굵기, 텍스트 색상을 설정하세요.
   • Padding — 바 안쪽 여백을 조정하세요.

   

   바 전체의 배경, 글꼴, 안쪽 여백을 설정하세요.

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

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

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

   

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

8. 애니메이션 타이밍 설정하기

   Animation 패널에서 Horizontal 또는 Vertical 전환을 선택한 다음 타이밍을 초 단위로 설정하세요.

   입력란	제어하는 항목
   Disappear After	바가 숨겨지기 전까지 화면에 머무는 시간.
   Interval Between Bar Display	바가 다시 나타나기까지의 간격.
   Time For The Bar To Fade In	페이드인 애니메이션의 길이.
   Time Per Group	다음 섹션으로 넘어가기 전까지 각 섹션이 표시되는 시간.

   참고

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

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

   Advance Section을 열고 Custom CSS (Developer Zone) 상자에 직접 CSS를 작성하세요. 그 아래의 CSS reference 목록에는 사용할 수 있는 선택자가 표시되며, 하나를 클릭하면 삽입됩니다.

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

    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 패널에서 테마에 붙여넣을 코드를 확인할 수 있습니다.

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

    

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

11. 저장하고 활성화하기

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

    주의

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

다음 단계

• 표시 조건 구성하기 — 배너의 세부 타기팅 규칙을 설정하세요.
• 무한 스크롤 배너 만들기 — 대신 티커 스타일의 스크롤 바를 사용해 보세요.

팁

도움이 필요하신가요?

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