Screenshot Requirements - PDF Connect v3 Documentation
Priority 1: Core Workflow (Must Have) ๐ธโ
Main App Interfaceโ
- PDF Connect v3 Dashboard - Main interface showing modern design
- PDF Library Management - Grid view with search, tags, bulk operations
- PDF Details Page - Individual PDF view with Link button highlighted
Universal Linkingโ
- Page Type Dropdown - All supported page types (Products, Collections, Articles, Pages, Homepage, Search)
- Resource Selection Modal - Search bar, resource list, pagination, bulk selection
- Linking in Progress - Loading states and confirmation messages
- Linked Resources Display - Connected pages with unlink options
Publishing Systemโ
- Publishing Options Modal - Three display styles side-by-side
- Theme Editor Integration - Adding PDF blocks to templates
- Block Configuration - Settings panel for each display type
Display Styles in Actionโ
- Embedded PDF Example - Product page with embedded PDF
- PDF Button Example - Button with popup overlay open
- PDF List Example - Multiple PDFs in organized list
Priority 2: Advanced Features (Important) ๐ธโ
Multi-Block Strategyโ
- Multi-Block Product Page - Same page with embedded + button + list
- Template Status Overview - Which templates have blocks configured
- Bulk Selection Interface - Multiple items selected with counter
Mobile Experienceโ
- Mobile PDF Viewing - All three display styles on mobile
- Mobile Admin Interface - Linking and publishing on mobile
- Responsive Behavior - How PDFs adapt to screen sizes
Workflow Examplesโ
- Before/After Comparison - Old vs. new interface
- Cross-Page Linking - Same PDF linked to multiple page types
- Search Functionality - Real-time search results
Priority 3: Supporting Content (Nice to Have) ๐ธโ
Use Case Examplesโ
- Product Documentation - Technical manual integration
- Collection Catalogs - Collection page with PDF catalog
- Blog Resources - Article with downloadable PDF
- Homepage Features - Company brochure on homepage
Error and Edge Cases โ
- Loading States - What users see while actions process
- Error Messages - Clear error communication
- Empty States - What new users see before adding content
Analytics and Performanceโ
- Usage Analytics - PDF engagement metrics (if available)
- Performance Indicators - Speed and optimization data
- Template Analytics - Which templates are most used
Screenshot Specificationsโ
Technical Requirementsโ
- Resolution: High-DPI for crisp documentation display
- Browser: Chrome or Safari for consistent rendering
- Window Size: Standard desktop (1920x1080) and mobile (375x812)
- Theme: Clean, professional Shopify theme for demos
Content Requirementsโ
- Sample PDFs: Realistic business documents (manual, catalog, guide)
- Test Store: Products, collections, articles, pages populated with relevant content
- Clean Data: Professional naming, descriptions, organized content
Branding Requirementsโ
- Consistent UI: All screenshots should show the same app version
- Professional Appearance: Clean, organized interface presentation
- Clear Focus: Highlight the specific feature being demonstrated
Screenshot Workflowโ
Preparation Phaseโ
- Set up test store with realistic content
- Create sample PDFs with professional naming
- Configure all three display styles
- Test all features work properly
Capture Phaseโ
- Take desktop screenshots at full resolution
- Capture mobile versions of key interfaces
- Document loading and error states
- Get before/after comparisons where relevant
Processing Phaseโ
- Crop to focus on relevant interface elements
- Add callouts and annotations where helpful
- Ensure consistent visual style across all images
- Optimize file sizes for web delivery
Usage in Documentationโ
Placement Strategyโ
- Hero Images: Major interface changes at document start
- Step-by-Step: Screenshot for each action in tutorials
- Comparison: Before/after for major improvements
- Reference: Quick visual confirmation of location/appearance
Alt Text Requirementsโ
All screenshots need descriptive alt text for accessibility:
- Describe what's shown in the interface
- Include key text visible in the image
- Note important UI elements or actions
- Keep under 125 characters when possible
File Naming Conventionโ
Use consistent naming for easy management:
pdf-guru-v3-[feature]-[context].png- Example:
pdf-guru-v3-linking-page-types.png - Example:
pdf-guru-v3-display-embedded-product.png
This systematic approach ensures comprehensive visual documentation that matches the quality of our enhanced PDF Connect v3 features.