Product File Upload

What is the Product File Upload Element?

The Product File Upload element, integrated into the Product module, allows customers to upload files—whether images, documents, or other formats—right from the product page. This is an ideal solution for businesses that require personalized information or media to complete orders, such as:

• Print-on-demand services (custom t-shirts, mugs, etc.)
• Personalized design offerings (e.g., custom engravings)
• Document-based services (legal documentation or forms)

This element streamlines the personalization process, giving customers an easy way to upload relevant files while simplifying order management for store owners.

How to use the Product File Upload Element in GemPages V7?

Using the element is easy and intuitive. Here’s a quick guide to help you set it up:

Step 1: Locate the Product File Upload Element

In the GemPages editor, search for the Product File Upload.

Step 2: Drag and Drop

Once found, drag and drop the element into the Design Area within the Product module.

GemPages automatically provides a default layout for the upload field, ensuring a smooth setup.

How to Optimize Your Upload Form Field?

GemPages gives you the flexibility to adjust and fine-tune every aspect of the element. 

Here are the key customization options:

1. Product Source

Quickly access the product source settings to switch between products in the editor. This helps you preview how your design looks for different items.

2. Layout

Choose from different layout options to customize how the upload field will appear on the page.

3. Upload Settings

• Required Field: Make the upload field mandatory to ensure customers provide the necessary files.
• Preview Image: Enable image previews to allow customers to review their uploads before finalizing the order.
• Multiple/Single File Upload: Configure whether customers can upload multiple files or just a single file per order.

4. Icon

• Enable/Disable Icons: Turn the icon on or off in the upload field.
• Change Icon: Select a different icon to better match your store’s theme or style.
• Icon Position and Size: Adjust the icon’s location and size for a more personalized look.

5. Size

Modify the size of the upload field to ensure it fits seamlessly with the rest of your page design.

6. State

Customize how the upload field behaves when customers interact with it (e.g., hover, click, or file upload states).

7. Text

Adjust the style, font size, and design of the upload field text to match your store’s branding.

8. Spacing

Control the spacing between the icon and text to maintain visual balance on your page.

9. Text Align

Fine-tune the text alignment within the upload form to ensure everything looks just right.

10. Align

Align the position of the upload field based on your overall page layout.

Note: This option is available only when the form’s width is set to less than 100% or is defined in pixels.

Result:

Frequently Asked Questions (FAQs)

1. Is the Product File Upload element available for Contact Forms?

No, the Product File Upload feature is only available for the Product module. For Contact forms, a separate element is currently under development and will be released soon.

2. What is the maximum file size allowed for uploads?

The Product File Upload feature allows customers to upload files up to a maximum size of 10MB.

3. What file types are supported by the Product File Upload element?

The supported file types are PNG, WEBP, GIF, JPEG, JPG, and PDF.

4. Can customers upload multiple files at once?

Yes, you can configure the Product File Upload feature to allow either multiple or single file uploads, depending on your store’s needs.

5. Is there an option for customers to preview their uploaded files?

Yes, you can enable the file preview option for customers to review their uploads before completing their order.