How can I design my upload field?

Store Design
1

Hey everyone,

How can I create a own upload field and how can I design it like I want? usually upload fields always looks the same but I would like to customize it like on the page: https://lieblingsart.com/

Bildschirmfoto 2026-02-15 um 17.29.49
Bildschirmfoto 2026-02-15 um 17.29.491228×620 83 KB

This example picture of the custom upload can be find at: Malen nach Zahlen Eigenes Bild │ Dein Foto wird zum Kunstwerk – Lieblingsart

Right now I am using the Prestige Theme and I would be very happy if someone can help me with it.

3 Likes
2

Step 1 — Add the upload field to your product form

Go to:
Online Store → Themes → Edit code

Open:
snippets/product-form.liquid
(or sometimes main-product.liquid depending on version)

Inside the <form ...> that submits to cart, add this:

<div class="custom-upload">
  <input 
    type="file" 
    id="custom_file" 
    name="properties[Upload your image]" 
    accept="image/*"
    hidden
  >

  <label for="custom_file" class="upload-button">
    Foto auswählen
  </label>

  <span id="file-name"></span>
</div>

Important:
name="properties[Upload your image]"
This makes the file attach to the cart item.
Step 2 — Add custom styling (this is where the magic happens)

Open:

assets/base.css
(or theme.css depending on version)

Add:

.custom-upload {
  margin-bottom: 20px;
}

.upload-button {
  display: block;
  width: 100%;
  padding: 18px;
  text-align: center;
  border: 2px solid #6BAF7B;
  border-radius: 40px;
  color: #6BAF7B;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-button:hover {
  background: #6BAF7B;
  color: #fff;
}

#file-name {
  display: block;
  margin-top: 10px;
  font-size: 14px;
}

Now it will look like a styled button instead of the default ugly file field.
Step 3 — Show selected file name (optional but recommended)

Open:

assets/theme.js

Add at the bottom:

document.addEventListener("DOMContentLoaded", function() {
  const fileInput = document.getElementById("custom_file");
  const fileName = document.getElementById("file-name");

  if (fileInput) {
    fileInput.addEventListener("change", function() {
      fileName.textContent = this.files[0]?.name || "";
    });
  }
});

Important Note (Very Important)

Shopify does not host uploaded files automatically.

Files uploaded this way:

Are attached to the order
Sent via email notification
Stored in Shopify admin under the order

If you need:

Image preview
Cropping
Large file handling
Better storage

Then you’d need an app like:

UploadKit
Infinite Options
Globo Product Options
Why this works

You are:

Hiding the real file input
Styling the label
Triggering the upload via for="custom_file

That’s exactly how Lieblingsart does it.
If you’d like, I can also:
Add image preview
Add drag & drop style
Match the exact green rounded style from your screenshot
Make it required before add to cart

1 Like
3

The example you gave, https://lieblingsart.com/, is using this image uploader app:

1 Like