PDF button
Show a button that opens PDFs in a popup overlay. Displays as a list when multiple PDFs are linked.
What the PDF button does
The PDF button displays a clickable button or link. When customers click it, the PDF opens in a popup overlay on top of your page.
When you link multiple PDFs to one resource, they automatically appear as a list of buttons.
How it looks
Single PDF:
- One button with PDF name
- Click opens PDF in overlay
- Overlay covers the page
- Close button returns to page
Multiple PDFs:
- List of buttons, one per PDF
- Each button opens its PDF
- Buttons stack vertically
- All PDFs accessible from one spot
When to use button display
Best for:
- Multiple PDFs on one page
- Mobile-optimized stores
- Pages with limited space
- Quick-reference documents
- Download-focused PDFs
Perfect for:
- Product pages with manuals, size charts, and warranties
- Resource pages with multiple guides
- Pages where embedded viewers would take too much space
Add PDF button to your theme
- Go to Online Store > Themes
- Click Customize on your active theme
- Navigate to the page type (product, collection, etc.)
- Click Add section or Add block
- Find PDF Connect under Apps
- Select PDF Button
- Click Save
Customize the button extension
In the theme editor, you can customize how the button appears (not the PDF viewer itself):
Show heading - Toggle section heading on/off
Heading text - Customize the section title (e.g., "Download PDF")
Button text - Customize button label
Button text source - Choose generic text, PDF name, or PDF description
Button alignment - Left, center, or right position
Button text alignment - Text alignment inside button
Multiple PDFs layout - Vertical (column) or horizontal display
Show PDF icon - Display PDF icon on buttons
Show container border - Add border around button area
Colors:
- Button background color
- Button text color
- Button hover background color
PDF viewer modal size - Choose how large the popup appears (Small 60%, Medium 70%, Large 80%, Extra Large 90%)
These settings control the button appearance only. The actual PDF viewer (custom, light, or flipbook) is configured in the app.
How the list works
When multiple PDFs are linked:
- All PDFs appear as individual buttons
- Buttons show PDF file names
- Customers click the PDF they want
- That PDF opens in the popup
- Close button returns to the list
No extra setup needed - the list appears automatically.
PDF viewer configuration
Before customizing the button extension, you need to choose which PDF viewer to use. This is configured in the app, not the theme editor.
Set viewer type in app
In the PDF details page, find the Viewer Configuration section:
Custom Viewer (Full Featured)
- Full-featured PDF viewer with all navigation controls
- Search functionality, zoom tools, customizable display options
- Mobile-optimized viewing
- Configure: Initial page, zoom level, page layout, scroll direction
- Enable/disable: Download, toolbar, image stamps, highlighter, drawing tools, text selection
Light Viewer (Fast & Simple)
- Simple, fast-loading viewer with minimal interface
- Perfect for quick document preview
- Mobile-optimized
- No configuration options - just works
Flipbook Viewer (Interactive Pages)
- Interactive page-flipping experience
- Mimics reading a physical book or magazine
- Great for catalogs, brochures, marketing materials
- Not mobile-optimized
- Configure: Animation style, page shadows, background color
The viewer type you choose applies to ALL Theme App Extensions (both button and embedded) for that PDF.
How the popup overlay works
When customers click the button, the PDF opens in a popup using the viewer configuration you set:
Custom Viewer popup:
- Full-screen viewing with all controls
- Zoom, search, page navigation
- Download/print (if enabled)
- Customizable toolbar
Light Viewer popup:
- Simple, clean interface
- Basic navigation
- Fast loading
Flipbook Viewer popup:
- Page-flipping animation
- Realistic book experience
- Best on desktop
Button vs embedded comparison
| Feature | Button | Embedded |
|---|---|---|
| Space used | Minimal | Large |
| Multiple PDFs | Clean list | Stacked viewers |
| Mobile-friendly | Excellent | Challenging |
| Page focus | Keeps page clean | Shows PDF inline |
| Customer action | Click required | Immediate view |
Tips for button display
Name PDFs clearly - Button labels use file names
Order matters - Most important PDF first
Test on mobile - Buttons work great on small screens
Consider grouping - Related PDFs work well as a list
Button text customization
Make button labels customer-friendly:
Default: "product-manual-v2.pdf"
Better: "Product Manual"
You can customize button text in theme settings or by renaming PDFs before upload.