Customizing Extension Appearance

Style your Alva Digital Downloads theme extensions to match your brand and create a cohesive customer experience.

Customization Overview

What you can customize:

Button colors and styles
Text and messaging
Layout and spacing
Fonts and typography
Icons and graphics
Background and borders

Where to customize:

Shopify Theme Editor
Alva app settings
Custom CSS (advanced)

Accessing Customization Settings

Method 1: Shopify Theme Editor

Steps:

Shopify admin → Online Store → Themes
Click Customize on active theme
Navigate to page with extension:
- Checkout → Thank You page
- Customer account page
- Order status page
Click on extension block
Adjust settings in right sidebar

Method 2: Alva App Settings

Steps:

Shopify admin → Apps → Alva Digital Downloads
Go to Settings → Storefront Extensions
Configure global extension settings
Changes apply to all extension instances

Scope:

Method 1 (Theme Editor): Per-extension customization
Method 2 (App Settings): Global defaults

Button Customization

Button Colors

Primary button color:

Settings → Appearance → Primary Button Color
Default: Theme primary color
Custom: #007AFF (or any hex color)

Options:

Primary color: Main download button
Secondary color: Individual file buttons
Hover color: Mouse hover state
Disabled color: When button not available

Color best practices:

Match brand:

Your brand: #FF6B6B (coral red)
Set button: #FF6B6B
Result: Cohesive brand experience

Contrast requirements:

Background: Light (#FFFFFF)
Button: Dark enough for readability (#007AFF minimum)

WCAG AA: 4.5:1 contrast ratio
WCAG AAA: 7:1 contrast ratio (preferred)

Test tool: WebAIM Contrast Checker

Button Styles

Style options:

Filled (Default):

Solid background color
White text
Most prominent
Best for primary action

Outlined:

Border only
Transparent background
Colored text and border
Subtle, modern look

Text Only:

No background
No border
Text only with color
Minimalist approach

Button Shape

Border radius:

Square: 0px (no rounding)
Slightly rounded: 4px
Rounded: 8px
Pill-shaped: 999px (fully rounded)

Configuration:

Settings → Appearance → Button Border Radius
Range: 0-999px
Default: 4px (matches most themes)

Button Size

Size options:

Small:

Height: 32px
Padding: 8px 16px
Font: 14px
Use: Tight spaces, mobile

Medium (Default):

Height: 40px
Padding: 12px 24px
Font: 16px
Use: Standard buttons

Large:

Height: 48px
Padding: 16px 32px
Font: 18px
Use: Primary CTAs, emphasis

Button Text

Customize button text:

Primary button:

Default: "Download All Files"
Options:
- "Get Your Files"
- "Access Downloads"
- "Download Now"
- "Retrieve Files"

Individual file button:

Default: "Download"
Options:
- "Get File"
- "Download This File"
- "Access"

Best practices:

✅ Clear and action-oriented
✅ Short (2-4 words)
✅ Consistent with brand voice

❌ Vague ("Click Here")
❌ Too long ("Click to Download Your Digital Files")
❌ Inconsistent terminology

Text and Messaging

Section Headings

Customize section titles:

Thank You page:

Default: "Your Digital Files Are Ready!"
Custom: "Access Your Course Materials"
or: "Download Your Purchase"

Customer account:

Default: "My Digital Downloads"
Custom: "Your Digital Library"
or: "Purchased Files"

Information Messages

Download instructions:

Default: "Download link valid for 60 days"
Custom: "Access your files anytime within 2 months"

Default: "You can download up to 5 times"
Custom: "Download limit: 5 attempts"

Pending fraud message:

Default: "Your order is being reviewed for security"
Custom: "We're verifying your order (usually 1-2 hours)"

Expiry and Limit Display

Toggle information:

☑ Show expiry countdown
☑ Show download limit
☑ Show file sizes
☐ Show order date
☐ Show product name

Format options:

Expiry display:

○ Days remaining: "45 days left"
● Absolute date: "Expires Mar 15, 2024"
○ Both: "Expires in 45 days (Mar 15, 2024)"

Download limit:

○ Count only: "2 of 5 downloads"
● Percentage: "40% of downloads used"
○ Remaining: "3 downloads remaining"

Layout Customization

Extension Position

Thank You page:

○ Top of page (after order summary)
● Middle (before order details)
○ Bottom (after all content)

Customer account:

● In orders list (integrated)
○ Separate section (dedicated downloads area)

File List Layout

Display options:

Vertical list (Default):

File 1.pdf
[Download]

File 2.pdf
[Download]

Compact, mobile-friendly

Grid layout:

[File 1.pdf]  [File 2.pdf]
[Download]    [Download]

Visual, better for images

Table layout:

| Name      | Size  | Action   |
|-----------|-------|----------|
| File1.pdf | 2.5MB | Download |
| File2.pdf | 1.8MB | Download |

Detailed, data-focused

Spacing and Padding

Adjust spacing:

Compact:

Padding: 12px
Gap: 8px
Use: Mobile, limited space

Standard:

Padding: 20px
Gap: 16px
Use: Most cases

Spacious:

Padding: 32px
Gap: 24px
Use: Desktop, premium feel

Configuration:

Settings → Layout → Spacing
Range: Compact / Standard / Spacious

Typography

Font Families

Automatic theme matching:

Extension uses your theme's font by default
Ensures consistency
No configuration needed

Override with custom font:

Settings → Typography → Custom Font
Options: Google Fonts, custom @font-face

Popular combinations:

Headings: Montserrat Bold
Body: Open Sans Regular

Headings: Playfair Display
Body: Source Sans Pro

Headings: Roboto Medium
Body: Roboto Regular

Font Sizes

Heading sizes:

Main heading: 24px (default)
Sub-heading: 18px
Adjust: Settings → Typography → Heading Size

Body text:

File names: 16px (default)
Info text: 14px
Small text: 12px
Adjust: Settings → Typography → Body Size

Accessibility:

Minimum body text: 16px (recommended)
Minimum small text: 14px
Never below 12px

Font Weights

Weight options:

Light: 300 (subtle, elegant)
Regular: 400 (body text)
Medium: 500 (emphasis)
Semibold: 600 (headings)
Bold: 700 (strong emphasis)

Best practices:

Headings: 600-700 (Semibold/Bold)
Body: 400 (Regular)
Info text: 400-500 (Regular/Medium)

Icon Customization

Download Icon

Icon options:

○ Download arrow (default)
○ Cloud download
○ File icon
○ Custom SVG
○ No icon (text only)

Upload custom icon:

Settings → Appearance → Download Icon
Format: SVG (recommended) or PNG
Size: 24x24px
Color: Inherits button color

Status Icons

Order status indicators:

✅ Approved: Green checkmark
⏳ Pending: Yellow clock
❌ Rejected: Red X
🔒 Expired: Gray lock

Customize:

Settings → Icons → Status Icons
Choose icon set or upload custom

Border and Background

Border Styles

Extension container border:

Settings → Appearance → Border

Options:
○ None (no border)
● Solid (1px line)
○ Dashed
○ Thick (2px+)

Border color:

Default: Theme border color
Custom: #E0E0E0 (light gray)

Border radius:

Sharp corners: 0px
Slightly rounded: 4px
Rounded: 8px
Very rounded: 16px

Background Color

Extension background:

Default: Transparent (inherits page background)
Custom: #F8F8F8 (light gray)
White: #FFFFFF
Accent: Match brand color

Use cases:

Transparent: Blends seamlessly
Light background: Creates separation
Accent color: Draws attention (use sparingly)

Shadow Effects

Box shadow:

None: Flat design
Subtle: 0 2px 4px rgba(0,0,0,0.1)
Medium: 0 4px 8px rgba(0,0,0,0.15)
Strong: 0 8px 16px rgba(0,0,0,0.2)

Configuration:

Settings → Appearance → Shadow
Range: None / Subtle / Medium / Strong

Mobile Responsiveness

Automatic Mobile Adaptation

Extensions automatically adjust:

Desktop:
- Side-by-side layout
- Full-width buttons available
- Spacious padding

Mobile:
- Single column
- Full-width buttons
- Reduced padding
- Touch-friendly sizing

Mobile-Specific Settings

Override mobile appearance:

Button size:

Desktop: Medium (40px)
Mobile: Large (48px) - easier tapping

Font size:

Desktop: 16px
Mobile: 14px - fits more content

Spacing:

Desktop: 20px padding
Mobile: 12px padding - maximizes space

Advanced Customization

Custom CSS

For developers:

Access custom CSS editor:

Settings → Storefront Extensions → Custom CSS

Example customizations:

Custom button style:

/* Primary download button */
.alva-download-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 16px 32px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.alva-download-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

Custom file list:

/* File list styling */
.alva-file-list {
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  background: #fafafa;
}

.alva-file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  background: white;
  border-radius: 6px;
  transition: background 0.2s;
}

.alva-file-item:hover {
  background: #f0f0f0;
}

.alva-file-name {
  flex: 1;
  font-weight: 500;
  color: #333;
}

.alva-file-size {
  margin-left: 16px;
  color: #666;
  font-size: 14px;
}

Responsive custom styling:

/* Mobile-specific styles */
@media (max-width: 768px) {
  .alva-download-button {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
  }

  .alva-file-list {
    padding: 12px;
  }

  .alva-file-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .alva-file-size {
    margin-left: 0;
    margin-top: 4px;
  }
}

CSS Class Reference

Available classes for targeting:

Containers:

.alva-extension-container  /* Main extension wrapper */
.alva-download-section     /* Download area */
.alva-file-list            /* File list container */

Elements:

.alva-download-button      /* Primary download button */
.alva-file-item            /* Individual file row */
.alva-file-name            /* File name text */
.alva-file-size            /* File size text */
.alva-download-link        /* Individual file download link */

States:

.alva-status-approved      /* Approved order state */
.alva-status-pending       /* Pending review state */
.alva-status-expired       /* Expired download state */
.alva-status-revoked       /* Revoked access state */

JavaScript Customization (Advanced)

For advanced developers:

Add custom behavior:

// Wait for extension to load
document.addEventListener('DOMContentLoaded', function() {
  // Find all download buttons
  const buttons = document.querySelectorAll('.alva-download-button');

  buttons.forEach(button => {
    // Add custom click tracking
    button.addEventListener('click', function(e) {
      console.log('Download initiated:', this.dataset.filename);

      // Send to analytics
      if (window.gtag) {
        gtag('event', 'download', {
          'event_category': 'Digital Downloads',
          'event_label': this.dataset.filename
        });
      }
    });

    // Add loading state
    button.addEventListener('click', function() {
      this.classList.add('loading');
      this.textContent = 'Preparing Download...';

      setTimeout(() => {
        this.classList.remove('loading');
        this.textContent = 'Download';
      }, 2000);
    });
  });
});

Theme Matching

Automatic Theme Detection

Extensions automatically match:

✓ Theme fonts
✓ Theme colors
✓ Theme spacing
✓ Theme border styles
✓ Theme button styles

How it works:

Extension reads theme's CSS variables
Applies same styling automatically
No configuration needed

Manual Theme Matching

If automatic matching insufficient:

1. Inspect theme styles:

Right-click theme button → Inspect
Find CSS properties:
  - background-color
  - border-radius
  - font-family
  - padding

2. Apply to extension:

Settings → Appearance
Enter exact values from theme

3. Test across pages:

Verify consistency on:
- Thank You page
- Customer account
- Order status page

Brand Guidelines Integration

Logo Integration

Add brand logo to extension:

Settings → Branding → Logo
Upload: PNG or SVG
Size: 200x60px (recommended)
Position: Above download section

Logo display options:

○ Always show
● Show only on Thank You page
○ Never show (use text branding only)

Brand Colors

Apply brand palette:

Primary brand color:

Use for: Download buttons, links
Example: #007AFF (Apple blue)

Secondary brand color:

Use for: Hover states, accents
Example: #5AC8FA (lighter blue)

Neutral colors:

Text: #333333 (dark gray)
Background: #FFFFFF (white)
Borders: #E0E0E0 (light gray)

Typography Guidelines

Match brand fonts:

If your brand uses specific fonts:

Heading font: Montserrat
Body font: Open Sans

Apply in:
Settings → Typography → Custom Fonts

Font pairing:

Ensure extension fonts match:
- Marketing site
- Product pages
- Checkout experience

Accessibility Customization

Color Contrast

Ensure accessibility:

WCAG AA compliance:

Text contrast: 4.5:1 minimum
Large text: 3:1 minimum
Icons: 3:1 minimum

Test your colors:

Tool: WebAIM Contrast Checker
Input: Background + text color
Result: Pass/Fail + ratio

Focus States

Keyboard navigation:

Ensure visible focus:

.alva-download-button:focus {
  outline: 3px solid #007AFF;
  outline-offset: 2px;
}

Default focus styling:

Extension includes accessible focus states
Override only if maintaining visibility

Automatic support:

Extension includes ARIA labels
Button text clear and descriptive
Status updates announced

Customize ARIA labels:

Settings → Accessibility → ARIA Labels

Download button: "Download all files from order #1045"
File button: "Download Chapter-1.pdf, 2.5 megabytes"

Testing Customizations

Preview Before Publishing

Test in theme editor:

1. Make customization changes
2. Click "Preview" in theme editor
3. Navigate to Thank You page
4. Check extension appearance
5. Adjust as needed

Cross-Browser Testing

Test in multiple browsers:

☐ Chrome
☐ Safari
☐ Firefox
☐ Edge
☐ Mobile Safari (iOS)
☐ Chrome Mobile (Android)

Common issues:

Font rendering differences
Border radius support
Box shadow variations
Color profile differences

Device Testing

Test on actual devices:

Desktop:

- 1920x1080 (Full HD)
- 1366x768 (Common laptop)
- 2560x1440 (QHD)

Tablet:

- iPad (768x1024)
- iPad Pro (1024x1366)

Mobile:

- iPhone SE (375x667)
- iPhone 12/13 (390x844)
- Android (360x800)

Customization Templates

Pre-Made Style Templates

Choose from templates:

Minimalist:

Buttons: Text-only, subtle colors
Background: Transparent
Borders: None
Font: System default

Modern:

Buttons: Filled, rounded corners
Background: Light gray
Borders: Subtle shadow
Font: Sans-serif, medium weight

Bold:

Buttons: Large, bright colors
Background: Accent color
Borders: Thick, high contrast
Font: Bold, uppercase

Elegant:

Buttons: Outlined, serif accents
Background: White with shadow
Borders: Thin, classic
Font: Serif headings, sans body

Apply template:

Settings → Appearance → Templates
Select template
Customize further if desired

Best Practices

1. Consistency is Key

Maintain consistency across:

✓ All extension locations
✓ Theme and extensions
✓ Mobile and desktop
✓ All pages

Checklist:

☐ Same button style everywhere
☐ Consistent colors throughout
☐ Uniform spacing
☐ Matching typography

2. Don’t Over-Customize

Less is more:

✅ Subtle changes that match brand
✅ Focus on colors and text
✅ Maintain usability

❌ Too many custom styles
❌ Confusing layouts
❌ Poor contrast

3. Mobile-First Approach

Design for mobile first:

1. Customize for mobile
2. Ensure desktop looks good
3. Test both thoroughly

Why:

60-70% of customers shop on mobile
Easier to scale up than down
Forces focus on essentials

4. Accessibility First

Prioritize accessibility:

✓ High contrast
✓ Large touch targets (44px minimum)
✓ Clear focus states
✓ Descriptive text

5. Test Before Launching

Complete testing:

☐ Visual appearance
☐ Functionality (downloads work)
☐ Responsiveness
☐ Browser compatibility
☐ Accessibility
☐ Real customer testing

Troubleshooting Customizations

Customizations Not Appearing

Check:

1. Cache issues:

Solution: Hard refresh (Ctrl+Shift+R)
Clear browser cache

2. Theme editor not saved:

Solution: Click "Save" in theme editor
Publish changes

3. Wrong extension:

Solution: Verify customizing correct extension
Check all extension instances

Styles Conflicting

Theme CSS overriding:

Problem: Theme styles take precedence
Solution: Use !important (sparingly)
  .alva-download-button {
    background: #007AFF !important;
  }

Better solution:

Use more specific selectors:
.shopify-section .alva-download-button {
  background: #007AFF;
}

Mobile Styles Not Working

Check responsive breakpoints:

Common breakpoint: 768px
Ensure media queries correct:

@media (max-width: 768px) {
  /* Mobile styles */
}

Test on real device:

Emulators may not be accurate
Test actual mobile devices

Reverting Customizations

Reset to Defaults

Reset all customizations:

Settings → Appearance → Reset to Defaults
Confirm reset
All customizations removed

Partial reset:

Settings → Appearance
Reset individual sections:
- Reset colors only
- Reset typography only
- Reset layout only

Undo Recent Changes

Theme editor history:

Theme editor → Three dots menu → Version history
Select previous version
Restore

Next Steps

Theme Extensions Overview - Understanding extensions
Download Page Customization - Standalone download page
Customer Download Experience - Overall UX

Customizing Extension Appearance

Customization Overview

Accessing Customization Settings

Method 1: Shopify Theme Editor

Method 2: Alva App Settings

Button Customization

Button Colors

Button Styles

Button Shape

Button Size

Button Text

Text and Messaging

Section Headings

Information Messages

Expiry and Limit Display

Layout Customization

Extension Position

File List Layout

Spacing and Padding

Typography

Font Families

Font Sizes

Font Weights

Icon Customization

Download Icon

Status Icons

Border and Background

Border Styles

Background Color

Shadow Effects

Mobile Responsiveness

Automatic Mobile Adaptation

Mobile-Specific Settings

Advanced Customization

Custom CSS

CSS Class Reference

JavaScript Customization (Advanced)

Theme Matching

Automatic Theme Detection

Manual Theme Matching

Brand Guidelines Integration

Logo Integration

Brand Colors

Typography Guidelines

Accessibility Customization

Color Contrast

Focus States

Screen Reader Support

Testing Customizations

Preview Before Publishing

Cross-Browser Testing

Device Testing

Customization Templates

Pre-Made Style Templates

Best Practices

1. Consistency is Key

2. Don’t Over-Customize

3. Mobile-First Approach

4. Accessibility First

5. Test Before Launching

Troubleshooting Customizations

Customizations Not Appearing

Styles Conflicting

Mobile Styles Not Working

Reverting Customizations

Reset to Defaults

Undo Recent Changes

Next Steps