Custom CSS

The Fileflare download page inherits your Shopify theme’s typography and base colors automatically. For most stores that’s enough. If you want to fine-tune colors, spacing, or shape on the download page itself or the customer-account download box, you can override Fileflare’s CSS variables from your theme stylesheet.

When you’d use this

• Your brand has very specific colors and the auto-inherited theme colors don’t match.
• You want a custom border radius or different button styling than your theme provides.
• You want to tweak the layout density of the download page.

Where to put the CSS

Add styles to your Shopify theme’s main stylesheet (the file varies by theme — common names include base.css, theme.css, application.scss). Open Online Store → Themes → ⋯ → Edit code, find your CSS file, and paste at the top.

Variables for the download page

The customer-facing download page (the page customers land on after clicking a download link) uses these variables. Set them inside the .dda-orders selector:

.dda-orders {
  /* Layout */
  --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;
  --dda-order-radius-full: 50pc;     /* Pill / circular shapes */
  --dda-order-spacing: 2em;          /* Spacing between outer and inner box */

  /* Colors — light/neutral by default */
  --dda-color-000: #FFF;             /* Inner box background */
  --dda-color-100: #F7F9FC;          /* Outer box background */
  --dda-color-200: #E2E7F0;          /* Order number bubble background */
  --dda-color-300: #EDF0F7;          /* Divider lines + hover background */
  --dda-color-400: #CBD2E0;          /* Main border line */
  --dda-color-500: #717D96;          /* File type/size text */
  --dda-color-600: #2D3648;          /* Main text color */
}

Variables for the customer-account download box

The download box that appears inside customer accounts uses a smaller variable set, scoped to #digitalAssets:

#digitalAssets {
  --dda-color-100: #F7F9FC;          /* Button background */
  --dda-color-200: #E2E7F0;          /* Button border */
  --dda-color-400: #CBD2E0;          /* Button hover background */
  --dda-color-600: #2D3648;          /* Button text */
}

Common patterns

Match a dark theme

.dda-orders {
  --dda-color-000: #1a1a2e;          /* Inner box (dark) */
  --dda-color-100: #16213e;          /* Outer box */
  --dda-color-200: #2a2a4a;          /* Bubble */
  --dda-color-300: #2a2a4a;          /* Dividers */
  --dda-color-400: #3a3a5a;          /* Borders */
  --dda-color-500: #a0a0c0;          /* Secondary text */
  --dda-color-600: #f0f0ff;          /* Primary text */
}

Tighter, denser layout

.dda-orders {
  --dda-orders-width: 42em;
  --dda-order-spacing: 1.25em;
  --dda-order-radius-lg: 8px;
  --dda-order-radius-md: 6px;
}

Common issues

• Styles aren’t applying — your theme’s CSS may load after Fileflare’s. Add !important on individual properties as a last resort, or move your overrides to the very top of your stylesheet.
• Some text is still the old color — Fileflare’s variables only cover the listed scope. For text that’s not styled by these variables, you may need to target specific class names — open the page in dev tools to find the class.
• Worried about pasting CSS from the web — only paste from sources you trust. Malicious CSS can include url() calls that load tracking pixels.

Keep learning

• Style the download page (broader walkthrough)
• Customize the download box title and text
• Change the language of customer-facing text