Appearance
File Upload Styling
Style every visual detail of the File Upload option type — the upload trigger, drop zone, file list, and feedback colors — using per-type templates, the same way Accordion, Swatches, and Tabs work.
Overview
Read Types Settings first if you haven't created a template before. This page covers every setting available once you're editing a File Upload template.
The editor's left navigation has 5 tabs: Upload Trigger, File List, Layout & Spacing, Feedback States, and Responsive. Drop Zone, Upload Icon, Instructions, and Browse Button are sub-sections inside the Upload Trigger tab, covered below as their own headings for clarity.
All sections stay editable, regardless of Trigger Style
Unlike most conditional fields in this editor, the Drop Zone / Upload Icon / Instructions / Browse Button sub-sections don't hide based on your Trigger Style choice — all of them stay visible and editable at all times. This lets you pre-style a part (e.g. the drop zone) before switching the trigger to actually show it on the storefront. Whatever you've styled takes effect the moment that part becomes visible.
Upload Trigger
The master control — decides what customers click or drop files onto, and which sub-sections below apply on the storefront.
| Setting | Options (default) | What it controls |
|---|---|---|
| Trigger Style | Button (default) / Drop zone / Both | What renders on the storefront. Button = just the Browse button. Drop zone = a drag & drop area. Both = a drop zone with the button nested inside it |
Drop Zone
Applies when Trigger Style is Drop zone or Both.
| Setting | Options (default) | What it controls |
|---|---|---|
| Border Style | Dashed (default) / Solid / None | The drop zone's outline. None removes it (Border Color/Width hide too) |
| Border Color | color (#CBD5E1) | Outline color — Dashed/Solid only |
| Border Width | 1–4px (2px) | Outline thickness — Dashed/Solid only |
| Corner Radius | 0–24px (12px) | Rounding of the drop zone's corners |
| Background | color, transparent allowed (#FFFFFF) | Drop zone fill |
| Padding | uniform, max 80px (40/24/40/24) | Inner space around the icon and instructions |
| Minimum Height | 80–320px (160px) | Minimum drop zone height |
| Drag Accent | color (#3B82F6) | Border color and a light background tint of the same color while a customer drags a file over the zone |
Upload Icon
Applies when Trigger Style is Drop zone or Both.
| Setting | Options (default) | What it controls |
|---|---|---|
| Show Icon | toggle (on) | Shows/hides the icon in the drop zone. Fields below hide when off |
| Icon | Cloud (default) / Arrow / File / Folder | Which icon is drawn |
| Icon Size | 16–64px (40px) | Icon size |
| Icon Color | color (#64748B) | Icon color |
Instructions
Applies when Trigger Style is Drop zone or Both — these texts render inside the drop zone.
| Setting | Options (default) | What it controls |
|---|---|---|
| Title Text | text, max 80 chars ("Choose a file or drag & drop it here") | The main line in the drop zone |
| Title Size | 10–24px (16px) | Title font size |
| Title Weight | Regular / Medium / Semibold (default) / Bold | Title font weight |
| Title Color | color (#1F2937) | Title color |
| Show Hint | toggle (on) | Shows/hides the smaller line under the title |
| Hint Source | Automatic (default) / Custom | Automatic derives the hint from the option's admin settings (allowed types, file/size limits) so it never drifts from the real rules. Custom lets you write your own |
| Hint Text | text, max 120 chars (empty) | Custom hint copy — only shown with Custom. Left empty, it falls back to the automatic text |
| Hint Size | 8–18px (13px) | Hint font size |
| Hint Color | color (#94A3B8) | Hint color |
Browse Button
Applies when Trigger Style is Button or Both.
| Setting | Options (default) | What it controls |
|---|---|---|
| Button Style | Solid / Outline (default) / Link | Solid = filled button (Background + Text Color). Outline = transparent with a border (Border Color + Text Color). Link = plain text link — no box, so Corner Radius and Padding don't apply and are hidden |
| Button Label | text, max 40 chars ("Browse File") | The button's text |
| Background | color (#111827) | Fill — Solid only |
| Text Color | per style (Solid #FFFFFF / Outline #1F2937 / Link #3B82F6) | Label color — each style remembers its own value independently |
| Border Color | color (#CBD5E1) | Button border — Outline only |
| Corner Radius | 0–24px (8px) | Button rounding — Solid/Outline only |
| Padding | per side, max 32px (10/20/10/20) | Button size — Solid/Outline only |
| Font Size | 10–20px (14px) | Label size — all styles |
File List
The list of files a customer has added, whatever their status.
| Setting | Options (default) | What it controls |
|---|---|---|
| Item Layout | Row (default) / Card | Row = compact one-line entries. Card = larger card-style blocks |
| File Icon | Badge (default) / Monochrome / Thumbnail / None | The icon in front of each file. Badge = colored per file type (e.g. red PDF, green IMG). Monochrome = a single-color document icon. Thumbnail = an image preview for image files, falling back to the monochrome icon for everything else. None = no icon |
| Icon Color | color (#64748B) | Icon color — only for Monochrome, and for Thumbnail's non-image fallback |
| Background | color, transparent allowed (#F8FAFC) | Fill of each file entry |
| Border Color | color, transparent allowed (transparent) | Transparent = no border. Picking any color adds a 1px border in it |
| Corner Radius | 0–20px (10px) | Entry rounding |
| Padding | uniform, max 24px (12px all sides) | Inner space of each entry |
| File Name Color | color (#1F2937) | File name color. The size text follows the same color at reduced (~85%) opacity |
| File Name Size | 10–18px (14px) | File name font size |
| Show File Size | toggle (on) | Shows/hides the size line (e.g. "1.2 MB") |
| Remove Icon Color | color (#94A3B8) | The ✕ remove control; turns to the Error Color on hover |
No upload-progress styling
Files transfer as part of the add-to-cart submission itself, so there's no visible "uploading" phase on the real storefront — File List has no progress bar/spinner/percentage settings. Every file in the list renders as either finished (with the Success Color checkmark) or rejected (with the Error Color state).
Layout & Spacing
| Setting | Options (default) | What it controls |
|---|---|---|
| List Position | Below trigger (default) / Above trigger | Whether the file list renders under or above the upload trigger |
| Space Between Files | 0–20px (8px) | Vertical spacing between file entries |
Feedback States
| Setting | Options (default) | What it controls |
|---|---|---|
| Error Color | color (#EF4444) | A rejected file's border and label, plus the remove-icon's hover color. (Not the validation message shown under the option itself — that's outside this scope) |
| Success Color | color (#22C55E) | The checkmark shown on a completed file |
Responsive
| Setting | Options (default) | What it controls |
|---|---|---|
| Drop Zone Padding | 0–60px (empty) | Uniform padding override on mobile. Empty inherits the desktop value |
| Icon Size | 16–48px (empty) | Upload icon size override on mobile. Empty inherits the desktop value |
How to Style File Upload
- Open the Style Settings modal (see Customization Overview)
- Click Types → File Upload
- Create a new template or click an existing one to edit it
- Use the left navigation to jump between Upload Trigger, File List, Layout & Spacing, Feedback States, and Responsive
- Click Manage preview above the Live Preview to simulate uploaded files and their states — see Sandbox & Live Preview
- Click Save in the contextual save bar
Related
- File Upload (option type) — how to add and configure a File Upload option, including multi-file and allowed-types settings
- Types Settings — how templates work and how to assign one to an option
- Sandbox & Live Preview — simulate upload states while styling
- Accordion Styling
- Swatches Styling
- Tabs Styling