> For the complete documentation index, see [llms.txt](https://minimateapps.gitbook.io/mini-image-upload-and-file-upload/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://minimateapps.gitbook.io/mini-image-upload-and-file-upload/beginners-guide/create-your-first-upload-field.md).

# Create your first upload field

Welcome! This is the fun part — you're about to add an image upload field to your product pages so customers can attach their photos or files right before they add to cart. The whole thing takes about 2 minutes, and you'll build it in a simple 4-step wizard. Let's go. 🚀Visibility Section 

### Before you start

Make sure the app is activated on your theme first — without it, the field won't show up on your storefront. If you haven't done this yet, follow **2️⃣**[ **Enable the app on your theme \[MANDATORY\]**](/mini-image-upload-and-file-upload/beginners-guide/enable-the-app-on-your-theme-mandatory.md), then come back here.

You can check your progress in the **Setup Guide** on the app's home screen. When "Activate App on your theme" has a ✓ next to it, you're ready.

### Open the field creator

From the app's home screen, start a new field in either of these ways:

* Click **Create New Field** in the top-right corner, or
* In the **Setup Guide**, find "Create your first field" and click **Create**.

<figure><img src="/files/kO9WCt5Vs0w3C6gmGZnJ" alt=""><figcaption><p>App home screen — Setup Guide with the "Create" button and the "Create New Field" button top-right.</p></figcaption></figure>

This opens the field builder. You'll see four steps along the top: **1 Setup → 2 Appearance → 3 Upload rules → 4 Additional fields**. We'll go through them in order.

{% hint style="info" %}
💡 **Internal name:** Your field starts out called "New Field - 1." Click **Edit internal name** in the top-right to rename it (for example, "Photo upload – mugs"). This name is just for you — customers never see it — but it keeps your dashboard tidy once you have several fields.
{% endhint %}

### Step 1 — Setup

This is where you decide *where* the field appears and *how* it's labeled at checkout.

**Visibility** — choose which products show the upload field:

* **All products** — the field appears on every product page.
* **Specific products** — pick individual products.
* **Specific variants** — show the field only on certain variants (e.g. the "Personalized" variant).
* **Products in specific collections** — target a whole collection at once.

{% hint style="info" %}
🔒 Some visibility options show a small lock icon. Those are available on higher plans — check the **Pricing** page if you'd like to unlock them. For your first field, **Specific products** is a great, safe choice to test with
{% endhint %}

**Cart label** — this is the text shown next to the line item in the cart, at checkout, and in the order summary. The default is "Upload." You might change it to something clearer like "Your photo" or "Uploaded file."

On the right, the **Preview** panel shows a live mock-up of your product page so you can see your changes as you make them.

When you're happy, click **Continue**.

<figure><img src="/files/vcLJM19XCPp4vXPp3yMk" alt=""><figcaption><p>Step 1 "Setup" — Visibility options and the Cart label field, with the live Preview panel.</p></figcaption></figure>

### Step 2 — Appearance

Now style the upload field so it matches your store.

**Heading and copy** — set the text shown above and inside the upload zone:

* **Title** — a heading above the upload box (optional).
* **Subtitle** — the bold text inside the box (default: "Add your image or file here").
* **Description** — the smaller helper text (default: "Upload a clear image or file. JPG, PNG, or PDF up to 10 MB.").
* Each one has a matching **color** picker next to it.

**Container** — adjust the look of the upload box itself:

* **Background color** and **Border color**
* **Border radius** — how rounded the corners are
* **Top and bottom spacing** — how much room sits around the field on the product page

**Upload status labels** — expand this section to customize the messages customers see while a file is uploading, when it succeeds, or if it fails. For step-by-step details, see[ How do I customize the message shown during upload?](/mini-image-upload-and-file-upload/how-to.../how-do-i-customize-the-message-shown-during-upload.md)

Watch the **Preview** panel on the right update as you go. Click **Continue** when it looks right.

<figure><img src="/files/fglFwVrOm9R9BXb8ay9s" alt=""><figcaption><p> <em>Step 2 "Appearance" — Heading and copy settings, Container styling, and the live Preview.</em></p></figcaption></figure>

### Step 3 — Upload rules

This step is optional, but it's where you make the field behave exactly how you need. Click **+ Add a rule** and pick from the menu:

**File requirements**

* **File size limit** — cap how large each upload can be.
* **Allowed file types** — restrict uploads to specific formats (JPG, PNG, PDF, etc.).
* **File count limit** — allow multiple uploads with a minimum/maximum. (See *🖼️ How do I allow customers to upload multiple images?*)
* **Image dimensions** — set a minimum or maximum pixel size, useful for print quality.

**Customer experience**

* **Image editor** — let customers crop their image before they order. (See *✂️ How to open the crop screen and control crop options?*)
* **Image preview** — show the uploaded file back to the customer for confirmation.
* **Required upload** — the customer must upload a file before they can check out.

**Pricing**

* **Customization fee** — add an extra charge when a customer uploads a file. This is perfect for personalized products: the fee is added to the line item automatically, so a customer who uploads artwork pays a little more than one who doesn't. You set the amount, and it shows up in the cart, at checkout, and on the order. (See [*💰 How to set up an add-on price for image upload fields?*](/mini-image-upload-and-file-upload/how-to.../how-to-set-up-an-add-on-price-for-image-upload-fields.md))

Add as many rules as you like. If you'd rather keep it simple for your first field, you can skip this step entirely. Click **Continue**.

<figure><img src="/files/bywEdLk80MwUXxUQ0hLO" alt=""><figcaption><p><em>Step 3 "Upload rules" — the "+ Add a rule" menu showing File requirements and Customer experience options.</em></p></figcaption></figure>

> 💡 **Recommended for a first field:** add **Allowed file types** and a **File size limit** so customers can't upload anything unexpected.

### Step 4 — Additional fields

Also optional — this lets you collect extra information alongside the image, shown just below the upload zone.

Click into **Field 1** (or **+ Add another field**) and set it up:

* **Field type** — choose **Textbox**, **Dropdown**, **Checkbox**, or **Radio button**.
* **Field header** — the label your customer sees.
* **Placeholder text** — example text inside the field (for textboxes).
* **Make this field required** — tick this if the customer must fill it in.
* **Set additional charge for customization** — tick this to add a fee when the customer uses this field.

Common uses: a textbox for engraving text, a dropdown for frame color, or a checkbox to confirm artwork is print-ready.

<figure><img src="/files/pWnilTKrQgImE07EPgRD" alt=""><figcaption><p><em>Step 4 "Additional fields" — Field type dropdown and the field configuration options.</em></p></figcaption></figure>

### 📹 Watch the full walkthrough

See the entire setup in action — from activating the app to creating your first upload field, configuring rules, cropping, and adding extra charges. Around 9 minutes, everything you need to get live.<br>

{% embed url="<https://www.youtube.com/watch?v=n7n2T2kc4CY>" %}

### Save and test your field

Once you've finished Step 4, **save the field**. It now goes live on the products you selected in Step 1.

To make sure everything works:

1. Open one of your selected products on your live store (use the **Preview** link in the builder for a quick look).
2. Confirm the upload field appears where you expect.
3. Try uploading a test image yourself.

If the field doesn't appear, see **🆘** [**SOS "Help Needed! I cannot see it in my product page**](/mini-image-upload-and-file-upload/beginners-guide/sos-help-needed-i-cannot-see-it-in-my-product-page.md)**"**. To confirm uploads are landing correctly, see **🔍**[ **How do I check if the app is working correctly?**](/mini-image-upload-and-file-upload/how-to.../how-do-i-check-if-the-app-is-working-correctly.md)

That's it — your first upload field is live! 🎉

### Still need help?

Message us in live chat right inside the app, or email [**info@minimateapps.com**](mailto:info@minimateapps.com). Ask for Zel or Tufan — we're always happy to help. 🙋