Theme Extensions Overview

Understand how Alva Digital Downloads integrates with your Shopify storefront through theme extensions.

What Are Theme Extensions?

Theme extensions add download functionality directly to your Shopify theme without coding.

Alva provides:

✅ Thank You page extension (post-purchase)
✅ Customer account extension (download history)
✅ Order status page display

Benefits:

No theme editing required
Automatic updates
Works with all themes
Mobile responsive
Professional appearance

Extension Locations

1. Thank You Page Extension

Where: Checkout Thank You page (after purchase)

What it shows:

🎉 Your Digital Files Are Ready!

Order #1045 - Complete Course Bundle

[Download All Files]

Individual Files:
• Chapter 1.pdf [Download]
• Chapter 2.pdf [Download]
• Chapter 3.pdf [Download]

Download link valid for 60 days
You can download up to 5 times

Why important:

Instant access (no email needed)
Reduces “where are my files?” questions
Better customer experience
Higher satisfaction

2. Customer Account Extension

Where: Customer account → Orders section

What it shows:

My Digital Downloads

Order #1045 - Jan 15, 2024
Complete Course Bundle
Status: Active ✅
Expires: Mar 15, 2024 (45 days)
Downloads: 2 of 5 used

[Download Files]

Why important:

Easy access anytime
No email required
View all past orders
Check download status

3. Order Status Page

Where: Order status page (from order confirmation email)

What it shows:

Order Status
Order #1045 - Fulfilled

Digital Downloads:
Complete Course Bundle (5 files)

[Access Downloads]

Why important:

Alternative access point
Works if email missed
Consistent Shopify experience

How Extensions Work

Automatic Installation

When you install Alva:

Extensions automatically available in theme editor
Enable in Theme Editor:
- Shopify admin → Online Store → Themes
- Customize → App embeds
- Enable “Alva Digital Downloads”

Extensions appear on relevant pages automatically

No coding required ✅

Extension Types

App Embeds:

Global extensions that can appear anywhere
Examples: Floating download button, sticky banner

App Blocks:

Specific location extensions
Examples: Thank You page block, Account page block

Extension Features

Automatic Product Detection

Smart detection:

Order contains digital product?
→ Yes: Show download extension
→ No: Hide extension

Mixed order (digital + physical)?
→ Show download section for digital items only

Benefits:

Clean interface (only when relevant)
No confusion for physical-only orders
Professional appearance

Real-Time Status

Extension shows live status:

✅ Approved: "Download Now"
⏳ Pending: "Order under review - Available soon"
❌ Rejected: "Contact support"
🔒 Expired: "Link expired - Contact us"

Updates automatically - no page refresh needed

Mobile Responsive

Automatically adapts:

Desktop:

Wide layout
Side-by-side buttons
Full file list

Mobile:

Single column
Full-width buttons
Collapsible lists
Touch-friendly

Works perfectly on all devices

Extension Settings

Accessing Settings

Shopify admin → Apps → Alva Digital Downloads
Go to Settings → Storefront Extensions

Available Settings

Display Options:

☑ Show on Thank You page
☑ Show in customer account
☑ Show on order status page
☑ Show file sizes
☑ Show expiry information
☑ Show download count

Button Text:

Primary button: "Download All Files"
or customize: "Get My Files" / "Access Downloads"

Individual file button: "Download"
or customize: "Get File"

Styling:

Button color: [Match theme primary color]
or custom: #007AFF

Button style:
○ Filled (solid background)
○ Outlined (border only)
○ Text only (no background)

Information Display:

☑ Show expiry countdown: "Expires in 45 days"
☑ Show download limit: "2 of 5 downloads used"
☑ Show file list with sizes
☐ Show order date
☐ Show product name

Customizing Appearance

Matching Your Theme

Automatic theme matching:

Extension automatically uses:
• Your theme's fonts
• Your theme's colors
• Your theme's spacing
• Your theme's border styles

Result: Looks native to your theme

Custom CSS (Advanced)

For developers:

Add custom CSS in theme settings:

/* Customize download button */
.alva-download-button {
  background: #FF6B6B;
  border-radius: 8px;
  padding: 16px 32px;
  font-weight: 600;
}

/* Customize file list */
.alva-file-list {
  border: 2px dashed #ddd;
  padding: 20px;
}

Access: Settings → Storefront Extensions → Custom CSS

Use carefully: Test on all pages

Extension Behavior

Thank You Page Extension

Behavior:

Immediately after checkout:

Order #1045 confirmed ✓

If order has digital products:
1. Extension appears automatically
2. Shows "Download Now" button
3. Lists all files (if set to show)
4. Displays expiry and limit info

If fraud check pending:

🔒 Your order is being reviewed for security

Your download will be available shortly (usually 1-2 hours)
We'll email you when ready.

After download link ready:

Page auto-refreshes (or customer refreshes manually)
→ "Download Now" button active
→ Clicking downloads files

Customer Account Extension

Behavior:

Customer logs in:

1. Goes to Account → Orders
2. Sees all orders (digital + physical)
3. Digital orders show download section:
   [Download Files button]

Clicking button:

→ Opens download page with all files
→ Or downloads ZIP immediately

Order states in account:

Active: Green "Download" button
Pending: Yellow "Pending Review" message
Expired: Gray "Expired - Contact Support" message
Revoked: "Access Revoked" message

Multiple Products in One Order

Handling multiple digital products:

Option 1: Combined download

Order has 3 digital products:
[Download All (Combined ZIP)]

Result: One ZIP with all products' files

Option 2: Separate downloads

Order has 3 digital products:

Product 1: Course Bundle
[Download]

Product 2: Template Pack
[Download]

Product 3: eBook
[Download]

Result: 3 separate download buttons

Configure in: Settings → Download Display → Combine products / Separate products

Translation Support

Extensions support multiple languages:

Automatic translation:

If shop language is French:
"Download Files" → "Télécharger les fichiers"
"Expires in 45 days" → "Expire dans 45 jours"

Supported languages:

English
French
German
Spanish
Italian
Japanese
Dutch
Portuguese

Custom translations: Settings → Languages → Override translations

Extension Performance

Fast Loading

Optimized for speed:

Extension size: <50 KB
Load time: <100ms
No impact on page speed

Lazy loading: Extension loads after main page content

Caching

Extensions cached for:

Static elements: 24 hours
Dynamic data (download status): Real-time (no cache)

Result: Fast display, always current information

Troubleshooting Extensions

Extension Not Showing

Check:

1. Extension enabled:

Shopify admin → Online Store → Themes
→ Customize → App embeds
→ "Alva Digital Downloads" toggle ON

2. Order has digital products:

Extension only shows for digital orders
Check order contains mapped digital products

3. Theme compatibility:

Extension works with all Shopify 2.0 themes
Older themes may need manual installation

Extension Styling Issues

If extension looks broken:

Solutions:

1. Check theme conflicts (disable other apps)
2. Clear browser cache
3. Try different browser
4. Check custom CSS for errors
5. Contact support with screenshot

Download Button Not Working

Check:

• Order approved (not pending fraud check)
• Download link not expired
• Download limit not reached
• JavaScript enabled in browser
• No popup blocker

Best Practices

1. Enable All Extensions

Recommended:

✓ Thank You page (instant gratification)
✓ Customer account (easy access)
✓ Order status page (alternative access)

Why: More touchpoints = better customer experience

2. Keep Messaging Clear

Good button text:

✅ "Download Your Files"
✅ "Get Your Purchase"
✅ "Access Downloads"

❌ "Click Here"
❌ "Download"
❌ "Files"

Clear > Clever

3. Show Important Info

Always display:

✓ Expiry date (creates urgency)
✓ Download limit (sets expectations)
✓ File sizes (helpful for planning)

Optional:

• Order date (less critical)
• Product names (if not obvious)

4. Match Your Brand

Customize colors to match:

Your brand color: #007AFF
Set button color: #007AFF
Result: Cohesive brand experience

5. Test on Mobile

Always test:

• iPhone
• Android phone
• Tablet
• Different browsers

Ensure:

Buttons large enough to tap
Text readable
No horizontal scrolling
Download works on mobile

Advanced Customization

Custom Templates (Developers)

For Shopify theme developers:

Override default templates:

{%- comment -%}
  Custom Alva extension template
{%- endcomment -%}

{% if order.digital_downloads %}
  <div class="custom-download-section">
    <h2>Your Digital Files</h2>
    {{ order.digital_downloads_button }}
  </div>
{% endif %}

Access: Theme code editor → Snippets

Use for: Unique layouts, advanced branding

Next Steps

Customizing Extension Appearance - Styling options
Download Page Customization - Standalone download page
Customer Download Experience - Overall UX