Download Page Customization

Customize the standalone download page where customers access their digital files for a branded, seamless experience.

Download Page Overview

What is the download page?

Standalone page customers land on when clicking download links
URL format: yourstore.com/apps/alvadigitaldownloads/download?key=...
Hosted via Shopify App Proxy
Fully customizable

Purpose:

Central access point for all purchased files
Branded customer experience
File previews and information
Download progress tracking

Accessing Download Page Settings

Navigate to settings:

Shopify admin → Apps → Alva Digital Downloads
Go to Settings → Download Page
Configure appearance and content

Page Layout Options

Layout Templates

Choose layout style:

Single Column (Default):

┌─────────────────────────┐
│   Header / Logo         │
├─────────────────────────┤
│   Order Information     │
├─────────────────────────┤
│   File 1                │
│   [Download]            │
├─────────────────────────┤
│   File 2                │
│   [Download]            │
├─────────────────────────┤
│   Footer                │
└─────────────────────────┘

Best for: Mobile-first, simple

Two Column:

┌─────────────────────────────────┐
│   Header / Logo                 │
├───────────────┬─────────────────┤
│ Order Info    │ File List       │
│               │ • File 1        │
│ Details:      │   [Download]    │
│ - Order #     │ • File 2        │
│ - Date        │   [Download]    │
│ - Status      │                 │
├───────────────┴─────────────────┤
│   Footer                        │
└─────────────────────────────────┘

Best for: Desktop, detailed info

Grid Layout:

┌─────────────────────────────────┐
│   Header / Logo                 │
├─────────────────────────────────┤
│   Order #1045 - Jan 15, 2024    │
├─────────────────────────────────┤
│  ┌─────────┐  ┌─────────┐      │
│  │ File 1  │  │ File 2  │      │
│  │ Icon    │  │ Icon    │      │
│  │[Download│  │[Download│      │
│  └─────────┘  └─────────┘      │
├─────────────────────────────────┤
│   Footer                        │
└─────────────────────────────────┘

Best for: Visual files, few items

Configuration:

Settings → Download Page → Layout
Select: Single / Two Column / Grid

Header Customization

Logo and Branding

Add shop logo:

Settings → Download Page → Header → Logo
Upload: PNG or SVG
Recommended size: 300x100px
Max file size: 500KB

Logo positioning:

○ Left-aligned (default)
○ Center-aligned
○ Right-aligned
○ Hidden (no logo)

Shop name:

Settings → Download Page → Header → Show Shop Name
☑ Display shop name next to logo
Text: [Your Shop Name]
Font size: 24px

Header Background

Background options:

Solid color:

Default: White (#FFFFFF)
Custom: #F8F9FA (light gray)
Brand color: #007AFF

Gradient:

Linear gradient:
  From: #667eea (purple)
  To: #764ba2 (darker purple)
  Direction: Left to right / Top to bottom

Configuration:

Settings → Download Page → Header → Background
Type: Solid / Gradient
Color: [Color picker]

Add navigation:

Settings → Download Page → Header → Navigation

Links:
☑ Home (→ yourstore.com)
☑ Shop (→ yourstore.com/collections/all)
☑ Contact (→ yourstore.com/pages/contact)
☑ My Account (→ yourstore.com/account)

Mobile navigation:

Automatically collapses to hamburger menu
Responsive dropdown
Touch-friendly

Order Information Section

Information Display

Show order details:

☑ Order number
☑ Purchase date
☑ Product name
☑ Customer name
☑ Order status
☐ Payment method
☐ Order total

Example output:

Order #1045
Purchased: January 15, 2024
Product: Complete Course Bundle
Customer: John Smith
Status: Active ✅

Status Indicators

Visual status:

Active:

Icon: Green checkmark ✅
Text: "Active - Ready to Download"
Color: #28A745 (green)

Pending:

Icon: Yellow clock ⏳
Text: "Pending Review - Available Soon"
Color: #FFC107 (yellow)

Expired:

Icon: Gray lock 🔒
Text: "Expired - Contact Support"
Color: #6C757D (gray)

Customize:

Settings → Download Page → Status Display
Choose icon style
Customize text
Select colors

File List Customization

File Display Options

File card content:

Minimal:

📄 Chapter-1.pdf
[Download]

Standard (Default):

📄 Chapter-1.pdf
2.5 MB • PDF Document
[Download]

Detailed:

📄 Chapter-1.pdf
2.5 MB • PDF Document
Added: Jan 15, 2024
Downloads: 1 of 5
[Download] [Preview]

Configuration:

Settings → Download Page → File Display
Select: Minimal / Standard / Detailed

File Icons

Icon types:

Generic file icons:

📄 PDF files
📊 Excel files
📝 Word documents
🖼️ Images
🎵 Audio files
🎬 Video files
📦 ZIP archives

Custom icons:

Upload custom icons for each file type
Settings → Download Page → File Icons
Format: SVG (recommended) or PNG
Size: 48x48px

File Actions

Available actions:

Download button:

Text: "Download" (customizable)
Style: Filled / Outlined / Text
Size: Small / Medium / Large
Icon: ⬇️ (optional)

Preview button (optional):

For: PDFs, images, videos
Opens: Lightbox preview
Text: "Preview"

Share button (optional):

Allows: Social sharing (if enabled)
Platforms: Email, Copy link

Configuration:

Settings → Download Page → File Actions
☑ Download button
☐ Preview button
☐ Share button

Download All Button

Bulk download option:

Show “Download All” button:

☑ Display at top of file list
Text: "Download All Files" (customizable)
Action: Generates ZIP of all files
Style: Primary button (prominent)

Conditions:

Show when: 2+ files available
Hide when: Single file only
Position: Above file list / Below file list / Both

Configuration:

Settings → Download Page → Download All
☑ Enable Download All button
Text: [Custom text]
Position: [Select]

Page Content

Welcome Message

Customize greeting:

Default message:

"Your Digital Files Are Ready!"

Custom message options:

"Welcome back, [Customer Name]!"
"Thank you for your purchase!"
"Access your files below"
"[Product Name] - Ready to Download"

Dynamic placeholders:

Available placeholders:
{customer_name} - Customer's first name
{order_number} - Order number
{product_name} - Product title
{shop_name} - Your shop name

Example:

Input: "Hi {customer_name}! Your {product_name} is ready."
Output: "Hi John! Your Complete Course Bundle is ready."

Instructions Text

Add download instructions:

Default:

"Click the download button below to access your files.
Download links expire in 60 days and can be used 5 times."

Custom:

"HOW TO DOWNLOAD:
1. Click the Download button next to each file
2. Files will download to your device
3. Access anytime within 60 days

Need help? Contact support@yourshop.com"

Configuration:

Settings → Download Page → Instructions
Enable: ☑ Show instructions
Text: [Rich text editor]
Position: Below welcome / Above files / Below files

Expiry and Limit Information

Display access information:

Expiry countdown:

☑ Show expiry information
Format: "Expires in 45 days (March 15, 2024)"
or: "Expires March 15, 2024"
or: "45 days remaining"

Download limit:

☑ Show download count
Format: "2 of 5 downloads used"
or: "3 downloads remaining"
or: "40% used"

Urgency indicators:

< 7 days remaining: Red text, warning icon
7-30 days: Yellow text, attention icon
30+ days: Green text, checkmark icon

Footer Content

Footer sections:

Contact information:

☑ Support email
☑ Support phone
☐ Live chat link
☐ Help center link

Example:

Need help?
Email: support@yourshop.com
Phone: 1-800-123-4567
Live Chat →

Legal links:

☑ Terms of Service
☑ Privacy Policy
☑ Refund Policy
☐ License Terms

Social media:

☐ Facebook
☐ Twitter
☐ Instagram
☐ LinkedIn
☐ YouTube

Background:

Color: #F8F9FA (light gray) / #FFFFFF (white) / Custom
Contrast: Dark text on light background

Text:

Font size: 14px
Color: #6C757D (gray)
Alignment: Center / Left

Divider:

☑ Show divider line above footer
Style: Solid / Dashed / None
Color: #E0E0E0

Configuration:

Settings → Download Page → Footer
Customize all footer elements

Color Scheme

Primary Colors

Main brand color:

Settings → Download Page → Colors → Primary Color
Default: Theme primary color
Custom: #007AFF (or any hex color)

Used for:
- Download buttons
- Links
- Active states
- Icons

Secondary color:

Settings → Download Page → Colors → Secondary Color
Used for:
- Preview buttons
- Hover states
- Accents

Background Colors

Page background:

Default: #FFFFFF (white)
Options:
- Light gray: #F8F9FA
- Off-white: #FAFAFA
- Custom: [Color picker]

Section backgrounds:

Header: [Color]
Order info: [Color]
File list: [Color]
Footer: [Color]

Can be same or different for visual separation

Text Colors

Heading text:

Default: #212529 (dark)
Contrast: Minimum 7:1 with background

Body text:

Default: #495057 (medium gray)
Contrast: Minimum 4.5:1 with background

Link text:

Default: Primary color
Hover: Darker shade
Visited: Optional different color

Typography

Font Selection

Heading font:

Default: Theme heading font
Custom: Google Fonts or uploaded font

Options:
- Montserrat
- Roboto
- Playfair Display
- Lato
- Open Sans
- Custom @font-face

Body font:

Default: Theme body font
Custom: [Select font]

Recommended: Same or complementary to headings

Font Sizes

Heading hierarchy:

H1 (Welcome): 32px (desktop) / 24px (mobile)
H2 (Sections): 24px (desktop) / 20px (mobile)
H3 (Subsections): 20px (desktop) / 18px (mobile)

Body text:

Normal: 16px
Small: 14px
Tiny: 12px (legal text only)

Configuration:

Settings → Download Page → Typography
Adjust all font sizes
Mobile sizes automatically responsive

Mobile Optimization

Mobile Layout

Automatic mobile adaptation:

< 768px viewport width:
- Single column layout (overrides two-column)
- Full-width buttons
- Larger touch targets (48px minimum)
- Reduced padding
- Stacked navigation

Mobile-Specific Settings

Override for mobile:

Button size:

Desktop: Medium (40px)
Mobile: Large (48px)

Font size:

Headings: Smaller on mobile (-4px)
Body: Same (16px minimum)

Spacing:

Desktop: 24px padding
Mobile: 16px padding

Images:

Desktop: Full resolution
Mobile: Optimized, compressed

Advanced Customization

Custom HTML

Add custom HTML sections:

Above file list:

<div class="custom-banner">
  <h3>Important Instructions</h3>
  <p>Please download all files within 60 days.
     For best results, use a computer for large files.</p>
</div>

Below file list:

<div class="help-section">
  <h4>Need Help?</h4>
  <a href="/pages/support">Visit Support Center</a>
</div>

Configuration:

Settings → Download Page → Custom HTML
Section: Above files / Below files / Footer
HTML: [Code editor]

Custom CSS

Override default styles:

Custom page styling:

/* Download page container */
.alva-download-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
}

/* File cards */
.alva-file-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.alva-file-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Download button */
.alva-download-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.alva-download-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}

Responsive custom styles:

/* Tablet */
@media (max-width: 1024px) {
  .alva-download-page {
    padding: 30px 16px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .alva-download-page {
    padding: 20px 12px;
  }

  .alva-file-card {
    padding: 16px;
  }

  .alva-download-btn {
    width: 100%;
    padding: 16px;
    font-size: 18px;
  }
}

Custom JavaScript

Add custom functionality:

// Download tracking
document.addEventListener('DOMContentLoaded', function() {
  const downloadButtons = document.querySelectorAll('.alva-download-btn');

  downloadButtons.forEach(button => {
    button.addEventListener('click', function(e) {
      const filename = this.dataset.filename;

      // Google Analytics tracking
      if (window.gtag) {
        gtag('event', 'file_download', {
          'event_category': 'Downloads',
          'event_label': filename,
          'value': 1
        });
      }

      // Facebook Pixel
      if (window.fbq) {
        fbq('track', 'Download', {
          content_name: filename
        });
      }

      // Show download started message
      showDownloadMessage(filename);
    });
  });

  function showDownloadMessage(filename) {
    const message = document.createElement('div');
    message.className = 'download-toast';
    message.textContent = `Downloading ${filename}...`;
    document.body.appendChild(message);

    setTimeout(() => {
      message.remove();
    }, 3000);
  }
});

Security and Access Control

Access Validation

Automatic security checks:

Before showing download page:
✓ Valid download token
✓ Token not expired
✓ Download limit not exceeded
✓ IP address verification (if enabled)
✓ Customer authentication (if required)

Error messages:

Invalid token: "This download link is invalid"
Expired: "This download link has expired"
Limit reached: "Download limit exceeded"
IP mismatch: "Access denied from this location"

Custom Error Pages

Customize error messages:

Expired link:

Default: "This download link has expired"
Custom: "Your download access has ended.
         Contact us for renewed access:
         support@yourshop.com"

Invalid token:

Default: "Invalid download link"
Custom: "We couldn't find your files.
         Please check your email for the
         correct download link."

File Preview Features

Enable file previews:

Settings → Download Page → Previews
☑ Enable file preview

Supported files:
- PDFs (in-browser viewer)
- Images (JPG, PNG, GIF)
- Videos (MP4, WebM)
- Audio (MP3, WAV)

Preview controls:

☑ Zoom in/out (images)
☑ Full-screen mode
☑ Download from preview
☑ Navigate between files

PDF Viewer

Embedded PDF viewer:

Features:
- Page navigation
- Zoom controls
- Search text
- Print option
- Download button

Configuration:

Settings → Download Page → PDF Viewer
☑ Enable embedded viewer
☑ Allow printing
☑ Show download button
☐ Watermark preview (if enabled)

Localization

Multi-Language Support

Translate download page:

Available languages:

- English (en)
- French (fr)
- German (de)
- Spanish (es)
- Italian (it)
- Japanese (ja)
- Dutch (nl)
- Portuguese (pt-BR)

Automatic translation:

Detects customer's shop language
Displays page in their language
Falls back to English if unavailable

Custom Translations

Override default translations:

English defaults:

Welcome message: "Your Digital Files Are Ready!"
Download button: "Download"
Download All: "Download All Files"
Expired: "Link Expired"

Custom translations:

Settings → Download Page → Translations
Language: [Select]
Override: [Custom text]

Example (Spanish):
"Sus Archivos Digitales Están Listos!"
"Descargar"
"Descargar Todos los Archivos"

Performance Optimization

Page Load Speed

Optimization features:

✓ Lazy loading images
✓ Minified CSS/JS
✓ CDN delivery
✓ Browser caching
✓ Compressed assets

Target performance:

First Contentful Paint: < 1.5s
Time to Interactive: < 3.0s
Page load: < 2.0s

Image Optimization

Automatic optimization:

File icons: Served as SVG (scalable, small)
Logos: Compressed PNG/WebP
Previews: Responsive images

Manual optimization:

Upload: High-res logo (2x for retina)
System: Automatically generates sizes
Delivery: Serves appropriate size

Analytics Integration

Built-in Analytics

Track download page:

Available metrics:
- Page views
- Downloads initiated
- Preview clicks
- Time on page
- Bounce rate

Access:

Settings → Analytics → Download Page
View: Last 7 days / 30 days / 90 days

Google Analytics Integration

Add GA tracking:

Settings → Download Page → Analytics → Google Analytics
GA Tracking ID: UA-XXXXXXXXX-X or G-XXXXXXXXXX

Automatic events:
- page_view (download page viewed)
- file_download (file downloaded)
- preview_click (preview opened)
- download_all (bulk download)

Custom events:

// Track specific file types
gtag('event', 'pdf_download', {
  'event_category': 'Downloads',
  'event_label': filename,
  'file_size': filesize
});

Testing Customizations

Preview Mode

Test before publishing:

Settings → Download Page → Preview
Generate test download link
View as customer would see
Test all functionality

Test checklist:

☐ Layout appears correctly
☐ Colors match brand
☐ Buttons work
☐ Download initiates
☐ Mobile responsive
☐ Previews function
☐ Error states display

A/B Testing

Test different designs:

Create variations:

Version A: Minimal design
Version B: Detailed design

Split traffic: 50/50
Duration: 2 weeks
Measure: Downloads, time on page

Analysis:

Version A: 82% download rate
Version B: 89% download rate
Winner: Version B (detailed design)
Implement: Make B default

Best Practices

1. Keep It Simple

Don’t overwhelm:

✅ Clear call-to-action
✅ Minimal distractions
✅ Easy to find downloads

❌ Too much information
❌ Complex navigation
❌ Hidden download buttons

2. Brand Consistency

Match your store:

✓ Same logo
✓ Same colors
✓ Same fonts
✓ Same tone

Result: Seamless customer experience

3. Mobile-First Design

Prioritize mobile:

1. Design for mobile
2. Enhance for desktop
3. Test thoroughly

Why: 60-70% of traffic is mobile

4. Clear Instructions

Help customers:

✓ Explain how to download
✓ Set expectations (expiry, limits)
✓ Provide support contact
✓ Address common issues

5. Fast Loading

Optimize performance:

✓ Compress images
✓ Minimize custom code
✓ Use CDN
✓ Test load speed

Target: < 2 seconds page load

Troubleshooting

Page Not Loading

Check:

1. App proxy enabled (Shopify admin)
2. Correct URL format
3. Valid download token
4. Browser cache cleared

Customizations Not Appearing

Solutions:

1. Hard refresh (Ctrl+Shift+R)
2. Clear cache
3. Check custom CSS for errors
4. Verify settings saved

Mobile Layout Broken

Fix:

1. Test on real device (not just emulator)
2. Check responsive breakpoints
3. Validate custom CSS media queries
4. Remove conflicting styles

Next Steps

Theme Extensions Overview - Extension basics
Customizing Extension Appearance - Extension styling
Customer Download Experience - Overall UX

Download Page Customization

Download Page Overview

Accessing Download Page Settings

Page Layout Options

Layout Templates

Header Customization

Logo and Branding

Header Background

Navigation Links

Order Information Section

Information Display

Status Indicators

File List Customization

File Display Options

File Icons

File Actions

Download All Button

Page Content

Welcome Message

Instructions Text

Expiry and Limit Information

Footer Customization

Footer Content

Footer Styling

Color Scheme

Primary Colors

Background Colors

Text Colors

Typography

Font Selection

Font Sizes

Mobile Optimization

Mobile Layout

Mobile-Specific Settings

Advanced Customization

Custom HTML

Custom CSS

Custom JavaScript

Security and Access Control

Access Validation

Custom Error Pages

File Preview Features

Preview Lightbox

PDF Viewer

Localization

Multi-Language Support

Custom Translations

Performance Optimization

Page Load Speed

Image Optimization

Analytics Integration

Built-in Analytics

Google Analytics Integration

Testing Customizations

Preview Mode

A/B Testing

Best Practices

1. Keep It Simple

2. Brand Consistency

3. Mobile-First Design

4. Clear Instructions

5. Fast Loading

Troubleshooting

Page Not Loading

Customizations Not Appearing

Mobile Layout Broken

Next Steps