본문으로 건너뛰기

테마 설정(Theme Setup)

고객이 스토어프론트에서 PDF를 볼 수 있도록, Shopify 테마에 PDF Connect Theme App Extension을 추가하는 방법을 안내합니다.

왜 테마 설정이 중요한가요?​

PDF를 연결하고 Active로 설정하는 것만으로는 충분하지 않습니다. PDF가 스토어에 표시되려면 테마에 Theme App Extension을 추가해야 합니다.

이렇게 이해하면 쉽습니다.

  • 연결(Linking) = PDF를 페이지/리소스에 연결하는 단계
  • Theme App Extension = 테마 편집기에서 고객에게 보이도록 표시 위치/방식을 설정하는 단계(템플릿당 1회)

스토어프론트에 PDF를 표시하려면 두 단계가 모두 필요합니다.

즉, “연결 → 테마에 표시 → 뷰어 설정” 흐름으로 생각하면 됩니다.

연결된 PDF를 게시(Publish)하는 방법 2가지​

1) PDF 상세 페이지에서 바로 게시(권장)​

Theme App Extension을 가장 빠르게 추가하는 방법입니다.

  1. PDF 상세 페이지에서 Publish 섹션을 엽니다.
  2. 아직 해당 템플릿에 Theme App Extension이 추가되지 않았다면 Publish 안내가 표시됩니다.
  3. Publish를 클릭하고 표시 스타일(Embedded Viewer 또는 Button)을 선택합니다.
  4. 확장이 추가된 상태로 테마 편집기가 새 탭/창에서 열립니다.
  5. 필요하면 설정을 조정한 뒤, 테마 편집기에서 Save를 클릭합니다.

2) 테마 편집기에서 수동으로 추가​

확장(Extension) 배치 위치를 더 세밀하게 제어하고 싶을 때 사용합니다.

  1. Shopify 관리자에서 Online Store > Themes로 이동합니다.
  2. 사용 중인 테마에서 Customize를 클릭합니다.
  3. PDF를 연결한 페이지 유형(예: 상품 페이지)에 해당하는 템플릿으로 이동합니다.
  4. Add section 또는 Add block을 클릭합니다(테마에 따라 다름).
  5. Apps 섹션에서 PDF Connect를 찾습니다.
  6. PDF Embedded Viewer 또는 PDF Button을 추가합니다.
  7. Save를 클릭합니다.

표시 옵션은 이 페이지의 “Theme App Extension settings” 섹션도 참고하세요.

매뉴얼 URL 블록(리소스 연결 불필요)​

상품 템플릿에서는, 테마 설정에서 PDF URL을 직접 읽어 표시하는 매뉴얼 블록을 사용할 수도 있습니다.

상품을 하나씩 연결하지 않고 템플릿 단위로 공통 PDF를 보여주고 싶을 때 가장 적합합니다.

매뉴얼 블록 흐름​

  1. 앱에서 아무 PDF의 상세 페이지를 엽니다.
  2. 드롭다운 액션에서 **Add PDF block to product template (manual URLs)**를 선택합니다.
  3. 상품 템플릿 1개와 매뉴얼 블록 유형 1개를 선택합니다.
  4. 테마 편집기로 이동해 URL을 1개 또는 여러 개 붙여넣습니다.
  5. 테마 변경 사항을 저장합니다.

자세히 보기: 매뉴얼 URL 블록 →

PDF Connect Theme App Extension은 어디에 있나요?​

테마 편집기의 Apps 아래에서 PDF Connect 확장을 찾을 수 있습니다.

  • PDF Embedded Viewer - 페이지 안에 PDF를 인라인으로 표시
  • PDF Button - 클릭하면 오버레이로 PDF가 열리는 버튼 표시
  • PDF Embedded Manual - 매뉴얼 URL 설정 기반 인라인 표시
  • PDF Button Manual - 매뉴얼 URL 설정 기반 버튼 팝업/목록

연결(Linked) 블록은 지원되는 모든 페이지 유형에서 사용할 수 있습니다.
매뉴얼(Manual) 블록은 현재 상품 템플릿에서만 사용할 수 있습니다.

지원 페이지 유형​

아래 템플릿(페이지 유형)에 PDF Connect 확장을 추가할 수 있습니다.

  • 상품 페이지(Product pages) - 상품 템플릿 편집기
  • 컬렉션 페이지(Collection pages) - 컬렉션 템플릿 편집기
  • 페이지(Pages) - 페이지 템플릿 편집기
  • 블로그(Blog) - 블로그 템플릿 편집기
  • 게시글(Articles) - 블로그 게시글 템플릿 편집기
  • 홈페이지(Homepage) - Index 템플릿 편집기
  • 검색 페이지(Search page) - 검색 템플릿 편집기

확장(Extension) 위치 배치하기​

PDF가 표시될 위치를 제어할 수 있습니다.

Product pages:

  • 장바구니에 담기(Add to Cart) 버튼 위
  • 별도의 탭(Tab) 영역
  • 상품 설명 아래
  • 사이드바

Collection pages:

  • 상품 그리드 위
  • 컬렉션 설명 아래
  • 사이드바

Other pages:

  • 본문 위
  • 본문 아래
  • 별도의 섹션 영역

실제 배치 가능 위치는 테마의 섹션 구조에 따라 달라집니다.

확장 1개로 연결된 PDF를 모두 표시​

페이지 유형(템플릿)당 Theme App Extension은 1개만 추가하면 됩니다.

  • 상품 템플릿에 PDF Button 확장을 추가합니다.
  • 확장은 모든 상품에서 자동으로 동작합니다.
  • 단, 해당 상품에 연결된 PDF만 표시됩니다.
  • 상품별로 확장을 따로 추가할 필요가 없습니다.
  • 특정 확장에서 어떤 PDF를 제외하고 싶다면 확장 유형별 PDF 표시 제어 →를 참고하세요.

컬렉션/페이지 등 다른 리소스도 같은 방식입니다.

매뉴얼 블록은 동작이 다릅니다.

  • 연결된 PDF 정보를 읽지 않습니다.
  • 블록 설정에 입력한 URL만 렌더링합니다.
  • 추가한 템플릿 전체에 적용됩니다.

Theme App Extension 설정​

확장이 페이지에서 어떻게 보일지(레이아웃/스타일)를 커스터마이징할 수 있습니다. (PDF 뷰어 기능 자체 설정과는 다릅니다.)

For Embedded Viewer extension:

  • Show heading(토글)
  • Heading text
  • Viewer height(뷰포트 대비 %, 데스크톱 전용)
  • Show container border

For PDF Button extension:

  • Show heading(토글)
  • Heading text
  • Button text 및 text source(generic / PDF name / description)
  • Button alignment(왼쪽/가운데/오른쪽)
  • Button text alignment
  • Multiple PDFs layout(세로/가로)
  • Show PDF icon
  • Show container border
  • Button background color
  • Button text color
  • Button hover background color
  • PDF viewer modal size(60%, 70%, 80%, 90%)

연결(Linked) 블록: PDF 뷰어 기능(줌/다운로드/툴바/내비게이션 등)은 각 PDF의 앱 페이지에서 설정합니다. 뷰어 설정 →

매뉴얼(Manual) 블록: 뷰어 기능은 테마 편집기의 블록 설정에서 구성합니다. 매뉴얼 블록 뷰어 옵션 →

표시 스타일 섞어 쓰기​

페이지 유형에 따라 서로 다른 표시 스타일을 사용할 수 있습니다.

  • Embedded viewer on product pages
  • Button display on collection pages
  • Embedded on homepage

테마가 허용한다면 같은 페이지에서 여러 확장을 함께 사용하는 것도 가능합니다.

Theme App Extension을 지원하지 않는 테마​

구형 테마 또는 일부 커스텀 테마는 Theme App Extension을 지원하지 않을 수 있습니다.

  1. Check if your theme is compatible with Theme App Extensions
  2. Update to a newer theme version if needed
  3. Contact theme developer for support
  4. Consider switching to an Online Store 2.0 compatible theme

대부분의 최신 Shopify 테마(Online Store 2.0)는 Theme App Extension을 지원합니다.

게시 전 미리보기(Preview)​

공개(라이브) 전에 아래를 확인하세요.

  1. 테마 편집기에서 확장을 추가합니다.
  2. 미리보기(Preview)로 PDF 표시 형태를 확인합니다.
  3. 두 가지 표시 스타일을 모두 테스트해 봅니다.
  4. 모바일 미리보기에서도 확인합니다.
  5. 필요에 따라 설정을 조정합니다.
  6. 만족하면 Save를 클릭합니다.

확장(Extension) 제거​

특정 페이지 유형에서 PDF 표시를 제거하려면:

  1. Go to theme editor
  2. Navigate to that page type
  3. Find the PDF Connect extension
  4. Click the extension settings
  5. Choose Remove block
  6. Click Save

이렇게 하면 연결을 해제하지 않아도 PDF 표시를 숨길 수 있습니다.

표시 문제 트러블슈팅​

PDFs don't appear:

  • 확장이 올바른 페이지 유형(템플릿)에 추가되었는지 확인합니다.
  • PDF 상태가 Active인지 확인합니다.
  • PDF가 해당 리소스에 연결되어 있는지 확인합니다.
  • 페이지를 새로고침합니다.

Manual block shows nothing:

  • 매뉴얼 설정에 유효한 URL이 최소 1개 입력되어 있는지 확인합니다.
  • 블록이 현재 사용 중인 상품 템플릿에 추가되었는지 확인합니다.
  • 테마를 저장한 뒤, 강력 새로고침(hard refresh)합니다.

Extension not in Apps section:

  • 테마가 Theme App Extension을 지원하지 않을 수 있습니다.
  • 테마 업데이트를 시도해 보세요.
  • Online Store 2.0 호환 여부를 확인하세요.

Wrong PDFs showing:

  • 올바른 리소스 페이지를 보고 있는지 확인합니다.
  • PDF 라이브러리에서 연결 상태를 확인합니다.
  • (사용 중이라면) 템플릿 필터 설정을 검토합니다.

전체 트러블슈팅 가이드 보기 →

다음 단계​