콘텐츠로 이동
SamitaSamita docs

Countdown Timer Bar 가이드를 검색해 보세요.

    무료로 설치하기
    한국어
    English简体中文繁體中文Čeština곧 제공Dansk곧 제공NederlandsSuomi곧 제공FrançaisDeutschItaliano日本語한국어Norsk bokmål곧 제공PolskiPortuguêsEspañolSvenskaTürkçe
    Claude에서 열기 이 페이지에 대해 질문하기ChatGPT에서 열기 이 페이지에 대해 질문하기

    배너 만들기

    시작 템플릿으로 배너를 만들고 스토어프런트에 게시하세요.

    배너가 하나도 없는 Banners 페이지에서 고객에게 보이는 바가 완성되기까지의 전체 과정입니다.

    1. Banners를 열고 새로 만들기

      섹션 제목: “Banners를 열고 새로 만들기”

      앱 메뉴에서 Banners를 클릭한 다음 Create banner를 클릭하세요.

      첫 배너라면 페이지 가운데에 같은 버튼과 함께 Create your first banner가 표시됩니다.

      The Banners page with no banners yet, showing an illustration of a bar at the top of a page and a Create banner button

      배너를 만들기 전의 Banners 페이지입니다.

    2. 시작점 선택하기

      섹션 제목: “시작점 선택하기”

      용도별로 묶인 10개의 시작 템플릿이 있는 대화상자가 열립니다. 왼쪽에서 하나를 클릭하면 오른쪽 미리보기에 페이지에 놓였을 때의 바 모습이 표시됩니다.

      그룹 시작 템플릿
      Sale and urgency Flash sale, Black Friday, Selling fast, Sticky footer
      Discount code Discount code, Welcome offer
      Shipping Free shipping, Shipping cutoff
      Announcement Announcement, New arrivals

      미리보기 아래의 작은 레이블에는 바 안에 들어 있는 요소(Text, Countdown, Button)와 위치가 표시됩니다.

      처음부터 만들고 싶다면 목록 맨 아래의 Start from blank를 선택하세요.

      Use this template을 클릭하세요.

      The Start from a template dialog with the starter list on the left and a full-width preview of the Flash sale banner on the right

      모든 시작 템플릿은 나중에 변경할 수 있으며, 고정된 것은 아무것도 없습니다.

    3. 이름 정하기

      섹션 제목: “이름 정하기”

      빌더가 열립니다. 왼쪽 상단에서 이름을 목록에서 알아보기 쉬운 이름으로 바꾸세요. “Banner 3”이 아니라 “Black Friday top bar” 같은 이름이 좋습니다.

      필드 옆의 카운터에 남은 글자 수가 표시됩니다.

    4. 바에 표시할 내용 작성하기

      섹션 제목: “바에 표시할 내용 작성하기”

      Content 패널에 바에 들어 있는 요소가 나열됩니다. 요소를 클릭하면 오른쪽 열에 설정이 열립니다.

      • Text를 클릭하여 메시지를 변경합니다
      • Countdown을 클릭하여 종료 날짜를 설정합니다
      • Button을 클릭하여 레이블과 이동할 위치를 변경합니다
      • 행 왼쪽의 핸들을 드래그하여 순서를 바꿉니다
      • Add element를 클릭하면 새 요소가 맨 끝에 추가됩니다

      각 요소로 할 수 있는 작업은 바 콘텐츠 및 요소를 참고하세요.

      The Content panel listing Text, Countdown and Button elements, with the Text settings open in the right-hand column

      왼쪽에서 요소를 고르고 오른쪽에서 변경하세요.

    5. 스타일 지정하기

      섹션 제목: “스타일 지정하기”

      레일의 브러시 아이콘인 Design 패널을 엽니다.

      배경, 텍스트 및 강조 색상, 바가 차지하는 공간, 고객이 바를 닫을 수 있는지 여부를 설정하세요. 배너 디자인하기를 참고하세요.

    6. 표시 위치 선택하기

      섹션 제목: “표시 위치 선택하기”

      레일의 세 번째 아이콘인 Placement 패널을 엽니다.

      • Top of the page는 페이지를 아래로 밀고, Bottom of the page는 화면 하단에 고정합니다
      • Stay on screen은 고객이 스크롤해도 바가 계속 보이도록 합니다
      • Conditions는 배너를 표시할 페이지를 결정합니다. 모든 페이지에 표시하려면 All pages로 두세요
      • Devices는 데스크톱 또는 모바일로 제한합니다
      • Schedule은 배너를 자동으로 켜고 끕니다

      배너가 표시되는 위치를 참고하세요.

    7. 미리보기 확인하기

      섹션 제목: “미리보기 확인하기”

      빌더 가운데에 대체용 스토어프런트 페이지 위의 바가 표시됩니다. 상단의 두 아이콘으로 데스크톱 너비와 모바일 너비를 전환할 수 있습니다. 노트북에서 잘 보이는 바도 휴대폰에서는 답답해 보일 수 있으니 꼭 확인해 보세요.

    8. Active로 설정하고 저장하기

      섹션 제목: “Active로 설정하고 저장하기”

      이름 옆에서 Draft를 Active로 전환한 다음 Save를 클릭하세요.

      Draft는 배너를 누구에게도 보여주지 않고 저장합니다. Active로 설정해야 스토어프런트에 표시됩니다.

      The builder top bar with the name field, the Active and Draft toggle, and the Save button

      고객에게 보이려면 배너가 Active 상태여야 합니다.

    9. 스토어프런트 확인하기

      섹션 제목: “스토어프런트 확인하기”

      새 탭에서 스토어를 열고 새로고침하세요. 페이지 상단 또는 하단에 바가 표시되어야 합니다.

      보이지 않나요? 카운트다운이 표시되지 않을 때의 항목을 차례로 확인하세요. 배너에도 같은 점검이 적용됩니다.

    버튼에 링크가 필요한 경우

    섹션 제목: “버튼에 링크가 필요한 경우”

    Open a link로 설정한 버튼은 URL이 있어야 배너를 Active로 저장할 수 있습니다. 시작 템플릿에는 /collections/all이 미리 입력되어 있으니, 고객이 이동했으면 하는 위치로 변경하세요.

    다음 단계

    섹션 제목: “다음 단계”

    도움이 되었나요?