디자인과 위치

세일 팝업의 스타일을 지정하고 데스크톱과 모바일에서 떠 있는 위치를 정하세요.

Design 탭에서는 세일 팝업의 모양과 표시 위치를 설정합니다. 배경, 위치, 크기, 글꼴로 나뉘며 마지막에는 사용자 지정 CSS 상자가 있습니다.

배경, 위치, 크기 설정이 표시된 팝업 편집기의 Design 탭

Design 탭과 옆에 표시되는 팝업 미리 보기

모양과 배경

Background style에서는 세 가지 채우기를 선택할 수 있습니다.

스타일	설정 항목
Solid fill	Background color와 Opacity
Gradient fill	Gradient color 1, Gradient color 2, Opacity
Image fill	업로드한 이미지 — PNG, JPEG 또는 JPG, 1MB 이하

그 옆에는 Border settings(Border style(Solid, Dashed, Dotted), 테두리 크기, 반경, 색상, Box shadow 토글)와 Padding, Margin이 있습니다.

팝업이 떠 있는 위치입니다. 데스크톱과 모바일은 각각의 탭에서 따로 설정합니다.

Show on desktop — 데스크톱 표시 켜기 또는 끄기
Desktop position — Top left, Top middle, Top right, Bottom left, Bottom middle, Bottom right 중 선택
Animation type — Slide from top, Slide from bottom, Slide from left, Slide from right, Fade in-out 중 선택
Margin top/bottom (px) 및 Margin left/right (px) — 화면 가장자리에서 조금 띄우기

같은 항목으로 구성됩니다. Show on mobile, Mobile position, 애니메이션, 여백입니다.

Bottom left가 기본값이며 가장 안전합니다. 헤더, 장바구니, 대부분의 테마가 모바일 제품 페이지 하단에 두는 고정 장바구니에 담기 바와 겹치지 않습니다.

다른 위치로 정하기 전에 다음 사항을 확인하세요.

설정	옵션
Popup size	Small · Medium · Large
Image size	Small · Medium · Large
Use different size for mobile	Mobile popup size와 Mobile image size가 활성화됨

Small보다 큰 크기를 사용한다면 모바일 옵션을 켜세요. 휴대폰에서 Large 팝업은 화면 대부분을 가릴 수 있으며, 읽히지도 않고 닫히기 쉬운 가장 빠른 방법입니다.

테마의 글꼴과 맞추면 팝업이 덧붙인 요소가 아니라 스토어의 일부처럼 느껴지는 경우가 많습니다.

탭 끝에 있는 Custom CSS (Developer Zone) 상자에는 이 팝업에 적용할 일반 CSS를 입력할 수 있습니다. 다른 곳과 같은 주의 사항이 적용됩니다. 사용자 지정 CSS를 참고하세요.

기본적으로 팝업은 여기서 설정한 위치에서 페이지 위에 떠 있습니다. 섹션 안의 고정된 위치처럼 팝업을 페이지 안에 넣고 싶다면, Display 탭의 Custom location to show popup 아래에 이를 위한 숏코드가 있습니다.

<div class="samita-sales-popup" data-id="12345"></div>

이 코드를 복사해서 테마 편집기의 Samita Countdown 앱 블록에 붙여넣으세요. 단계는 카운트다운과 같습니다. 숏코드로 카운트다운 배치하기를 참고하세요.

도움이 되었나요?