Manual Positioning Mode

📋 Overview

Manual Position Mode gives you complete control over where upload fields appear on your product pages. Instead of relying on automatic positioning, you can place them exactly where you want by adding a simple code snippet to your theme.

🚀 Quick Start Guide

Follow these two simple steps to enable manual positioning:

Step 1: Enable Manual Mode in App Embed

1. Go to Shopify Admin → Online Store → Themes
2. Click Customize on your active theme
3. In the left sidebar, scroll down to App embeds
4. Find "UploadsPro" and make sure it's enabled ✅
5. Click on "UploadsPro" to open its settings
6. Under "Product Page Settings", enable "Enable on Product Pages"
7. Under "Position Mode", select "Manual positioning with snippet"
8. Click Save

Step 2: Add Code Snippet to Your Theme

Now you need to add a code snippet to your theme where you want the upload fields to appear.

Accessing Theme Code Editor

Option A: From Theme Customizer (Recommended)

1. In the theme customizer, click the three dots ⋮ (top left)
2. Select "Edit code"

Option B: From Shopify Admin

1. Go to Online Store → Themes
2. Click Actions → Edit code on your active theme

Finding the Right File

For most modern Shopify themes, you'll want to edit:

• sections/main-product.liquid - Main product page section
• snippets/product-form.liquid - Product form snippet (if your theme uses it)

The Code Snippet

Copy and paste this code where you want upload fields to appear (typically before the "Add to Cart" button):

<!-- UploadsPro - Manual Position -->
<div id="uploads-pro-manual-position" style="margin: 20px 0;">
  <div id="uploads-pro-manual-content"></div>
</div>
<script>
(function(){function i(){const s=window.uprosettingsembed;if(!s){setTimeout(i,100);return}if(s.embedSettings?.positionMode==='manual'){const m=document.getElementById('uploads-pro-manual-position'),e=document.getElementById('uploads-pro-embed-container'),t=document.getElementById('uploads-pro-manual-content');if(m&&e&&t){const c=e.querySelector('#qsmzupglobalcontainer-embed');if(c){t.appendChild(c.cloneNode(true));const cl=t.querySelector('#qsmzupglobalcontainer-embed');if(cl)cl.id='qsmzupglobalcontainer';m.style.display='block';e.style.display='none';console.log('✅ UploadsPro: Manual positioning applied')}}}}if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',()=>setTimeout(i,200))}else{setTimeout(i,200)}})();
</script>

📍 Common Placement Examples

Example 1: Before Add to Cart Button

Most common placement - shows upload fields just before the purchase button:

<div class="product-form__quantity">
  <input type="number" name="quantity" value="1" min="1">
</div>

<!-- Upload fields here -->
<div id="uploads-pro-manual-position" style="margin: 20px 0;">
  <div id="uploads-pro-manual-content"></div>
</div>
<script>...</script>

<button type="submit" name="add">Add to Cart</button>

Example 2: After Variant Selector

Shows upload fields right after customers select their product variant:

<variant-selector>
  <select name="id">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}">{{ variant.title }}</option>
    {% endfor %}
  </select>
</variant-selector>

<!-- Upload fields here -->
<div id="uploads-pro-manual-position" style="margin: 20px 0;">
  <div id="uploads-pro-manual-content"></div>
</div>
<script>...</script>

Example 3: In a Custom Section

Create a dedicated customization section:

<div class="product-customization-section">
  <h3>Customize Your Product</h3>
  <p>Upload your design files below</p>

  <!-- Upload fields here -->
  <div id="uploads-pro-manual-position" style="margin: 20px 0;">
    <div id="uploads-pro-manual-content"></div>
  </div>
  <script>...</script>
</div>

✅ Verification & Testing

After adding the snippet, verify it's working correctly:

1. Save your changes in the theme code editor
2. Visit a product page that has upload fields configured
3. Upload fields should appear in the location where you added the snippet
4. Open browser console (press F12) and look for:

   ✅ UploadsPro: Manual positioning applied

🔧 Troubleshooting

Upload Fields Don't Appear

• Check App Embed: Theme Customizer → App embeds → "UploadsPro" must be ✅
• Check Product Page Setting: "Enable on Product Pages" must be enabled
• Verify Manual Mode: Position Mode must be set to "Manual positioning with snippet"
• Check Product Configuration: The product must have upload fields configured in the app
• Review Console: Open browser console (F12) for any error messages

Upload Fields Appear Twice

If you see duplicate upload fields:

• Auto-positioning may still be active
• Verify Position Mode is set to "Manual" (not "Auto")
• Clear your browser cache and refresh

Wrong Location

• Move the snippet to a different location in your theme file
• Save and refresh the page to test
• Common locations are listed in the examples above

Theme Won't Save

• Ensure you have permissions to edit the theme
• Check for syntax errors in the code (missing brackets, quotes, etc.)
• Try using the code editor instead of the customizer
• Contact theme developer if using a premium theme

🎨 Customization Options

Adjust Spacing

Change the margin value to adjust spacing around upload fields:

<!-- More spacing -->
<div id="uploads-pro-manual-position" style="margin: 30px 0;">

<!-- Less spacing -->
<div id="uploads-pro-manual-position" style="margin: 10px 0;">

<!-- Custom spacing (top/bottom, left/right) -->
<div id="uploads-pro-manual-position" style="margin: 25px 15px;">

Add Custom CSS Class

Add a custom class for advanced styling:

<div id="uploads-pro-manual-position"
     class="my-custom-upload-section"
     style="margin: 20px 0;">
  <div id="uploads-pro-manual-content"></div>
</div>

Then add CSS in your theme's stylesheet:

.my-custom-upload-section {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

❓ Frequently Asked Questions

Can I use multiple snippets on the same page?

No, use only one snippet per product page. Using multiple snippets may cause conflicts.

Does it work with all themes?

Yes! This snippet works with all Shopify themes, including modern Shopify 2.0 themes and older legacy themes.

What happens if I switch back to Auto mode?

The fields will automatically revert to auto-positioning. The snippet will be ignored, so you don't need to remove it from your theme.

Can I customize the appearance?

Yes! You can add custom CSS to style the #uploads-pro-manual-position container or add your own CSS classes.

Does it affect site performance?

No, the script is lightweight (~1KB minified) and only runs when manual mode is enabled.

Will theme updates remove the snippet?

If you update your theme, you'll need to re-add the snippet. Consider documenting where you placed it for easy reference.

📚 Related Articles

• Settings Overview - Learn about all app settings
• Fields Management - How to create and configure upload fields
• Troubleshooting - Common issues and solutions

🆘 Need Help?

If you're having trouble with manual positioning:

• 📧 Contact our support team from the app
• 📖 Review the complete documentation
• 💬 We're here to help with theme-specific implementations