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.