PDF 버튼
PDF를 팝업 오버레이로 여는 버튼을 표시합니다. 여러 PDF가 연결되어 있으면 버튼 목록(List) 형태로 표시됩니다.
이 문서는 아래 두 가지를 모두 다룹니다.
- PDF Button (linked PDFs)
- PDF Button Manual (manual URLs in theme settings)
PDF 버튼의 동작
PDF 버튼은 클릭 가능한 버튼(또는 링크)을 표시합니다. 고객이 버튼을 클릭하면, 현재 페이지 위에 팝업 오버레이로 PDF가 열립니다.
하나의 리소스에 여러 PDF를 연결하면, 자동으로 “버튼 목록”으로 표시됩니다.
표시 형태
PDF 1개:
- PDF 이름이 표시된 버튼 1개
- 클릭하면 오버레이에서 PDF 열림
- 오버레이가 페이지 위를 덮음
- 닫기(Close) 버튼으로 원래 페이지로 돌아감
PDF 여러 개:
- PDF당 버튼 1개씩, 버튼 목록으로 표시
- 각 버튼이 해당 PDF를 엽니다.
- 버튼이 세로로 쌓여 표시됩니다.
- 한 곳에서 모든 PDF에 접근할 수 있습니다.
버튼 표시를 추천하는 경우
특히 유용한 경우:
- 한 페이지에 여러 PDF를 제공해야 할 때
- 모바일 최적화가 중요한 스토어
- 페이지 공간이 제한적인 경우
- 빠르게 참고하는 문서(퀵 레퍼런스)
- 다운로드 중심의 PDF
아래 같은 상황에 잘 맞습니다:
- 매뉴얼/사이즈표/보증서 등을 제공하는 상품 페이지
- 여러 가이드를 모아둔 리소스 페이지
- 임베디드(Embedded) 뷰어를 넣기엔 공간이 너무 많이 필요한 페이지
테마에 PDF 버튼 추가하기
- Shopify 관리자에서 Online Store > Themes로 이동합니다.
- 사용 중인 테마에서 Customize를 클릭합니다.
- 적용할 페이지 유형(상품, 컬렉션 등)으로 이동합니다.
- Add section 또는 Add block을 클릭합니다.
- Apps 영역에서 PDF Connect를 찾습니다.
- PDF Button을 선택합니다.
- Save를 클릭합니다.
대신 매뉴얼 모드를 사용하려면 PDF Button Manual을 추가하고, 블록 설정에서 URL(필요하면 라벨/표시명도)을 입력하세요.
버튼 확장(Extension) 커스터마이징
테마 편집기에서 “PDF 뷰어 자체”가 아니라 “버튼의 표시 방식”을 커스터마이징할 수 있습니다.
Show heading - 섹션 제목 표시/숨김
Heading text - 섹션 제목 문구 변경(예: “PDF 다운로드”)
Button text - 버튼 라벨(텍스트) 변경
Button text source - 일반 문구/ PDF 이름/ PDF 설명 중 선택
Button alignment - 좌/중앙/우 정렬
Button text alignment - 버튼 내부 텍스트 정렬
Multiple PDFs layout - 여러 PDF 표시 방식(세로/가로)
Show PDF icon - 버튼에 PDF 아이콘 표시
Show container border - 버튼 영역에 테두리 표시
Colors(색상):
- 버튼 배경색
- 버튼 텍스트 색상
- 버튼 호버(hover) 배경색
PDF viewer modal size - 팝업(모달) 크기 선택(Small 60%, Medium 70%, Large 80%, Extra Large 90%)
이 설정들은 “버튼 표시”에만 적용됩니다. 실제 PDF 뷰어(커스텀/라이트/플립북)는 앱에서 설정합니다.
PDF Button Manual의 경우, 뷰어 유형과 동작을 테마 블록 설정에서 지정합니다.
버튼 목록은 어떻게 동작하나요?
여러 PDF 가 연결되어 있을 때:
- 모든 PDF가 각각의 버튼으로 표시됩니다.
- 버튼에는 PDF 파일명이 표시됩니다.
- 고객이 원하는 PDF 버튼을 클릭합니다.
- 해당 PDF가 팝업으로 열립니다.
- 닫기(Close) 버튼을 누르면 목록으로 돌아갑니다.
추가 설정은 필요 없습니다. 목록은 자동으로 표시됩니다.
PDF 뷰어 설정
버튼 확장을 커스터마이징하기 전에, 어떤 PDF 뷰어를 사용할지 먼저 선택해야 합니다. 이 설정은 테마 편집기가 아니라 앱에서 합니다.
연결(Linked) 블록을 사용 중이라면 이 섹션의 내용이 그대로 적용됩니다.
매뉴얼(Manual) 블록을 사용 중이라면, 동일한 뷰어 유형을 테마 블록 설정에서 선택할 수 있습니다.
앱에서 뷰어 유형 설정하기
PDF 상세 페이지에서 Viewer Configuration 섹션을 찾으세요.
Custom Viewer (Full Featured)
- 모든 내비게이션 컨트롤이 포함된 “풀 기능” PDF 뷰어
- 검색, 확대/축소 도구, 다양한 표시 옵션 제공
- 모바일 최적화
- 설정 가능: 시작 페이지, 줌 레벨, 페이지 레이아웃, 스크롤 방향
- 켜기/끄기: 다운로드, 툴바, 이미지 스탬프, 형광펜, 드로잉 도구, 텍스트 선택
Light Viewer (Fast & Simple)
- 단순하고 빠르게 로딩되는 최소 UI 뷰어
- 문서를 빠르게 미리보기 할 때 적합
- 모바일 최적화
- 별도 설정 없이 바로 동작
Flipbook Viewer (Interactive Pages)
- 페이지 넘김 애니메이션이 있는 인터랙티브 뷰어
- 실제 책/잡지를 넘기는 경험을 재현
- 카탈로그, 브로셔, 마케팅 자료에 적합
- 모바일 최적화가 되어 있지 않습니다.
- 설정 가능: 애니메이션 스타일, 페이지 그림자, 배경색
Native Browser Viewer (Standard)
- 브라우저 내장 PDF 렌더링을 사용
- 가볍고 익숙한 동작
연결(Linked) PDF의 경우 저장된 뷰어 설정 1개가 버튼/임베디드에 공통으로 재사용됩니다.
매뉴얼 블록의 경우 블록 단위의 뷰어 설정 1개가 입력한 모든 URL에 공통으로 적용됩니다.
팝업 오버레이는 어떻게 동작하나요?
고객이 버튼을 클릭하면, 설정해 둔 뷰어 구성(Viewer configuration)으로 팝업에서 PDF가 열립니다.
Custom Viewer popup:
- 모든 컨트롤이 포함된 전체 화면 보기
- 줌/검색/페이지 이동
- 다운로드/인쇄(허 용한 경우)
- 커스터마이징 가능한 툴바
Light Viewer popup:
- 단순하고 깔끔한 UI
- 기본 내비게이션
- 빠른 로딩
Flipbook Viewer popup:
- 페이지 넘김 애니메이션
- 실제 책처럼 읽는 경험
- 데스크톱 환경에서 특히 적합
버튼 vs 임베디드 비교
| 항목 | Button | Embedded |
|---|---|---|
| 사용 공간 | 최소 | 큼 |
| 여러 PDF | 깔끔한 목록 | 뷰어가 여러 개로 쌓임 |
| 모바일 친화성 | 매우 좋음 | 다소 어려움 |
| 페이지 집중도 | 페이지를 깔끔하게 유지 | 페이지에 PDF가 바로 표시됨 |
| 고객 액션 | 클릭 필요 | 즉시 확인 |
버튼 표시 팁
PDF 이름을 명확하게 - 버튼 라벨은 파일명을 사용합니다.
순서가 중요 - 가장 중요한 PDF를 맨 위(첫 번째)로 배치하세요.
모바일에서 테스트 - 버튼은 작은 화면에서 특히 유용합니다.
그룹화 고려 - 관련 PDF는 목록 형태로 제공하면 좋습니다.
버튼 텍스트 커스터마이징
버튼 라벨을 고객 친화적으로 만들 수 있습니다.
기본: "product-manual-v2.pdf"
권장: "Product Manual"
테마 설정에서 버튼 텍스트를 바꾸거나, 업로드 전에 PDF 파일명을 변경하는 방식으로 라벨을 개선할 수 있습니다.