Customize the Download page styling

Fileflare’s download page automatically inherits your Shopify theme — fonts, link colors, base typography. Most stores need nothing more. If you want fine-grained control over colors, layout, sizes, or behaviors, the page exposes a set of CSS variables you can override from your theme stylesheet, plus dozens of class names you can target for advanced tweaks.

When you’d use this

• Your brand has very specific visual standards and the auto-inherited theme doesn’t quite match.
• You want to hide certain UI elements (file size text, sort dropdown, product names).
• You want a denser layout, or rounder boxes, or a custom hover behavior.
• You want to change the download icon to text or vice versa.

Path 1: in-app settings (no CSS)

Fileflare → Settings → Digital Delivery page (in the Branding section). Covers the most common controls — content visibility, sort order, download box copy. Start here before reaching for CSS.

Path 2: custom CSS

Add overrides to your Shopify theme’s main CSS file. Open Online Store → Themes → ⋯ → Edit code, find your CSS file (often base.css), and paste at the top.

Box colors and dimensions

Override the page’s CSS variables under the .dda-orders selector. Each variable is described inline:

.dda-orders {
  --dda-orders-width: 53.75em;       /* Width of the main box */
  --dda-order-radius-lg: 16px;       /* Outer box radius */
  --dda-order-radius-md: 12px;       /* Inner box radius */
  --dda-order-radius-sm: 8px;        /* Hover-state radius */
  --dda-order-radius-xs: 4px;        /* Sort list radius (Legacy accounts) */
  --dda-order-radius-full: 50px;     /* Order-number bubble radius */
  --dda-order-spacing: 2em;          /* Outer-to-inner spacing */
  --dda-color-000: #FFFFFF;          /* Inner box background */
  --dda-color-100: #F7F9FC;          /* Outer box background */
  --dda-color-200: #E2E7F0;          /* Order number bubble background */
  --dda-color-300: #EDF0F7;          /* Dividers + hover background */
  --dda-color-400: #CBD2E0;          /* Main border line */
  --dda-color-500: #717D96;          /* File type/size text */
  --dda-color-600: #2D3648;          /* Main text color */
}

Hover state

/* Text color on hover */
.dda-orders .dda-order__asset:hover {
  --dda-color-500: #FFFFFF;
  color: #FFFFFF;
}

/* Icon (SVG) color on hover */
.dda-orders .dda-order__asset:hover svg path {
  fill: #FFFFFF;
}

/* Smooth transition */
.dda-orders .dda-order__asset,
.dda-order__asset-meta,
.dda-order__asset-limiter,
.dda-orders .dda-order__asset svg path {
  transition: all 0.1s ease;
}

Use Shopify theme color variables

If you’d rather pull colors from your active Shopify theme rather than hardcode hex, use Liquid variables in the CSS (the file needs to be a .css.liquid for this to work):

• {{ settings.btn_color }}
• {{ settings.shop_bg_color }}
• {{ settings.headline_color }}
• {{ settings.border_color }}
• {{ settings.link_color }}
• {{ settings.link_hover_color }}
• {{ settings.nav_color }}
• {{ settings.regular_color }}

Replace the download icon with text

.dda-order__asset-link > a[target]::before { content: 'download' }
.dda-order__asset-link > a[target] {
  color: var(--dda-color-600);
  font-size: small;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}
.dda-order__asset-link > a[target] > svg { display: none }

Custom font sizes per element

/* Product name */
.dda-order__item-name { font-size: 18px !important; }

/* Asset filename */
.dda-order__asset-filename {
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0.1px;
  font-weight: 500;
}

/* File type/size meta */
.dda-order__asset-meta {
  line-height: 21px;
  letter-spacing: 0.1px;
  font-weight: 700;
}

/* Download limit indicator */
.dda-order__asset-limiter {
  line-height: 21px;
  letter-spacing: 0.1px;
  font-size: 12px !important;
}

Hide individual elements

One-line tweaks for hiding specific bits of the page:

Hide the file type/size meta text

.dda-orders .dda-order__asset-meta { display: none; }

Hide the sort dropdown

.dda-orders .dda-order__sort-form { display: none; }

Hide the filename

.dda-orders .dda-order__asset-filename { display: none; }

Hide the date

.dda-orders .dda-order__date { display: none; }

Hide the “view assets” / “close” toggle

.dda-orders .dda-order__item-action { display: none; }

Show only the download icon (centered)

.dda-order__asset > :not(.dda-order__asset-link) { display: none; }
.dda-order__asset { justify-content: center !important; }

Hide product names (show only assets)

.dda-order__item-header { display: none !important; }
.dda-order__item-content { border-top: none !important; padding: 1em !important; }

Common issues

• Changes don’t show on the download page — hard refresh: Cmd+Shift+R (Mac) / Ctrl+Shift+R (Windows). Themes and Fileflare cache aggressively.
• My CSS is overridden by Fileflare’s defaults — load order matters. Move your CSS to the top of the stylesheet, or use !important as a last resort.
• Liquid variables in CSS aren’t substituting — your CSS file must end in .css.liquid, not just .css. Otherwise Shopify won’t process the Liquid.
• I want to override styles only on a specific page — Fileflare’s download page can’t be detected via Liquid easily. Use a class hook (body.template-page) if your theme adds page-specific classes.

Keep learning

• Custom CSS — variable reference
• Customize the download box copy
• Change the sort order
• Switch between button+page and bullet list