Customizing the Design (CSS Guide) | Quaflow Support Center

You have two ways to customize the Upload Center to match your brand:

Theme Editor (Visual Settings): Rapidly change colors without code.
Custom CSS (Advanced): For granular control over fonts, spacing, and specific behaviors.

Option 1: Using the Theme Editor (No-Code)

You can easily adjust the primary colors and visual style directly within Shopify.

Navigate to Online Store > Themes > Customize.
Click the App embeds icon on the left sidebar.
Expand the Upload Center settings.

Here you can configure the following visual elements:

Panel BG Colour: Set the background for the main upload area (supports gradients).
Panel Label Colour: Change the text color of the main instruction label.
Item Panel Colours: distinct colors for file backgrounds, completed uploads (success), and errors.
Item Info Label Colour: The text color for file names and details.

Option 2: Advanced Custom CSS (For Developers)

If you need to change fonts, borders, or layout behaviors that are not covered by the visual settings, you can apply custom CSS overrides.

You can add custom CSS directly via the Theme Editor (in the App Embed settings under "Custom CSS") or within your theme's main stylesheet.

We use FilePond as our underlying technology, so standard FilePond classes are available for customization. We recommend using the .uc-field prefix for all rules to ensure you only target the Upload Center component.

Key CSS Selectors

1. Main Container & Panel

Main Wrapper: .upload-center-field-wrapper
Main Root: .uc-field.filepond--root (Use this to set font-family)
Drop Area Background: .uc-field.filepond--panel-root (Use this to change background-color or border-radius)
Dotted Border: .uc-field.filepond--drip

2. Text & Labels

Drop Label Text: .uc-field.filepond--drop-label (Customize color and font-size)
File Status/Info: .uc-field.filepond--file-info , .uc-field.filepond--file-status

3. Uploaded Items

Item Background: .uc-field.filepond--item-panel
Item Border: .uc-field.filepond--file-wrapper

Example: Dark Mode / Modern Style Here is an example snippet to create a dark-themed upload area with white text:

/* Dark background for the panel */
.uc-field.filepond--panel-root {
  background: #333333 !important;
}

/* White label text */
.uc-field.filepond--drop-label {
  color: #ffffff !important;
}

/* Custom Font */
.uc-field.filepond--root {
  font-family: 'Montserrat', sans-serif !important;
}

/* Hover Effect on Border */
.uc-field.filepond--drip:hover {
  border-color: #007bff;
  background: rgba(0,123,255,0.05);
}