Installation Guide - Shopify 2.0 Themes

📋 Overview

This guide walks you through the complete installation process for UploadsPro on Shopify 2.0 themes. Shopify 2.0 themes use App Blocks, making installation easier and more reliable.

🎯 The Setup Guide

When you first open UploadsPro, you'll see the Setup Guide on your dashboard. This interactive guide walks you through 5 essential steps to get your app working correctly.

Step 1: Install App Block on Product Page

What This Does

The App Block adds the upload interface to your product pages where customers can upload their files. This is the main component that displays upload fields to your customers.

How to Install

1. In the Setup Guide, click the "Install Product Page Block" button
2. This opens the Shopify Theme Editor with a product template selected
3. Look for the "Add block" option in the left sidebar (or it may auto-open)
4. Find "UploadsPro" in the Apps section
5. Click to add the block to your product page
6. Drag the block to position it where you want (typically before the "Add to Cart" button - Buy Buttons)
7. Click Save in the top-right corner

Verification

After saving, return to the UploadsPro app and click "Verify" in Step 1. The app will automatically detect if the block was installed correctly and show a green checkmark ✅.

Step 2: Activate App Embed

What This Does

The App Embed loads the necessary JavaScript and CSS files globally across your store. This ensures upload functionality works correctly on all pages, including cart and checkout.

How to Activate

1. In the Setup Guide, click the "Activate App Embed" button
2. This opens the Theme Customizer with the Apps section highlighted
3. In the left sidebar, scroll down to "App embeds"
4. Find "UploadsPro Embed" in the list
5. Toggle the switch to ON (it should turn green/blue)
6. Click Save in the top-right corner

Verification

Return to UploadsPro and click "Verify" in Step 2. If the embed is active, you'll see a green checkmark ✅.

Step 3: Activate Add Amount Feature

What This Does

The Add Amount feature allows you to charge extra fees for file uploads. This requires installing a Add Amount feature.

How to Install

1. In the Setup Guide, click "Activate Add amount Feature"
2. The app automatically installs the necessary Shopify Function
3. Wait for the success message (usually 5-10 seconds)
4. No additional steps are required

Verification

The step automatically marks as complete when installation succeeds. You can verify it's working by:

• Going to Shopify Admin → Settings → Checkout
• Scrolling to Cart and checkout validations
• You should see "UploadsPro Feature" in the list

Step 4: Create Bundle Product

What This Does

Creates a hidden product used by the Add Amount feature to add fees to the cart. This product is never shown in your catalog.

How to Create

1. In the Setup Guide, click "Create Bundle Product"
2. The app automatically creates the product with correct settings
3. Wait for the success message
4. The product is automatically hidden from your online store

Verification

The step automatically marks as complete. You can verify by:

• Going to Products in Shopify Admin
• Searching for "UploadsPro - Fee Bundle"
• The product should exist with "Online Store" sales channel disabled

Step 5: Create Your First Upload Field

What This Does

Upload Fields define where and how customers can upload files. You need at least one field to start accepting uploads.

How to Create

1. In the Setup Guide, click "Create First Field"
2. You'll be taken to the Field Editor
3. Configure the field settings in the page.
4. Click Save Field

Verification

After saving your field:

1. Visit a product page that matches your field's targeting rules
2. You should see the upload button/field appear on the product page
3. Test uploading a file to confirm it works
4. Return to the Setup Guide and click "Verify"

✅ Completing the Setup

Required Steps (Mandatory)

These steps must be completed for the app to work:

• ✅ Step 1: Install App Block on Product Page
• ✅ Step 2: Activate App Embed
• ✅ Step 5: Create Your First Upload Field

Optional Steps

These steps are only needed if using the Add Amount feature:

• ⭐ Step 3: Activate Add Amount Feature
• ⭐ Step 4: Create Bundle Product

Dismissing the Setup Guide

Once you've completed the required steps, you can dismiss the Setup Guide by clicking the "Dismiss Guide" button. Don't worry - you can always bring it back from settings if needed.

🔧 Troubleshooting Setup

Setup Guide Not Appearing

• Check if you've already dismissed it
• Look for dashboard settings to re-enable the guide
• Clear browser cache and refresh

Can't Find App Block

• Ensure App Embed (Step 2) is enabled first
• Refresh the theme editor
• Check that your theme is Shopify 2.0 compatible
• Try a different browser

Verification Fails

• Wait 1-2 minutes after making changes
• Clear your browser cache
• Ensure you clicked "Save" in Shopify admin
• Try the verification button again

Upload Fields Not Showing

• Verify Steps 1, 2, and 5 are completed
• Check field targeting rules match the product
• Clear browser cache and test in incognito mode
• Check browser console for JavaScript errors

Theme Changed Detection

If you switch to a different theme, UploadsPro will detect this and reset the setup steps automatically. You'll need to reinstall the App Block and App Embed on the new theme.

📦 Complete Your Setup: Order App Block

Don't forget to set up the Order App Block to view uploaded files directly in your Shopify admin order pages!

Why install the Order App Block?

• ✅ Access uploaded files without leaving the order page
• ✅ See product images, variants, and file type icons
• ✅ View customer notes left on files
• ✅ Streamline your order fulfillment workflow

📚 Next Steps

After completing setup, explore these guides:

• Fields Management - Create more advanced upload fields
• Settings Overview - Customize app behavior
• Dashboard Overview - Understanding your dashboard
• Manual Positioning - Control exact field placement

🆘 Need Help?

If you're stuck during installation:

• 📧 Contact our support team from the app
• 📖 Review the Troubleshooting Guide
• 💬 We're here to help with setup and theme-specific issues