---
title: "Customize the Download page styling"
url: "https://fileflare.io/docs/how-to-customize-the-styling-of-the-digital-delivery-page-download-page/"
description: "Customize the styling and layout of Fileflare's digital delivery download page to match your store's branding."
published: "2026-03-27T04:09:54+00:00"
modified: "2026-07-20T23:34:58+00:00"
---

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.

Available on all plans. Two paths: (1) the in-app **Digital Delivery page** settings for content controls, and (2) custom CSS in your theme for visual customization. The CSS variables match those documented in [Custom CSS](/docs/custom-css/).

## 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, and the **iOS download instructions** shown to iPhone and iPad shoppers (edit the heading and wording, or clear the instructions to remove the section — see [examples of download delivery](/docs/examples-of-download-delivery-what-do-my-customers-see/) for what customers see). 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](/docs/custom-css/)
- [Customize the download box copy](/docs/customize-download-box/)
- [Change the sort order](/docs/change-the-sorting-order-for-download-links/)
- [Switch between button+page and bullet list](/docs/enable-disable-the-download-button-page-or-show-a-bullet-list-of-links/)