Home
Downloads

Customize the download page and email with CSS

Style details the editor controls do not reach, on the download page and in emails.
Last updated

The editors cover colors, logos, and wording. When you need something they do not offer, a heavier heading, tighter spacing, a font that matches your theme, both the download page and the email template accept your own CSS.

This is the escape hatch, not the first stop. Anything achievable with the normal controls should be done there, because CSS is not checked for you and a bad rule can hide a download button.

Before you begin

  • Changes apply to every download page or every email, including orders already placed.
  • Nothing validates your CSS. A missing brace can break the layout, so change one thing at a time and check the preview.
  • Email CSS is not web CSS. Email clients ignore much of it, and Outlook ignores more than most. Expect to test.

Set it up

Download page

  1. Click Filemonk in the left menu of your Shopify admin.
  2. Click Settings in the app's menu, then open the Download page tab.
  3. Click Customize to open the download page editor.
  4. In the editor's left sidebar, click CSS.
  5. Add your rules and save, watching the preview as you go.

Email

  1. Click Settings in the app's menu, then open the Email tab.
  2. Click Customize email to open the email editor.
  3. Find Email CSS in the controls.
  4. Add your rules and save.

Check your setup

For the download page, open a real order's page in a private window rather than trusting the preview, and check it on a phone as well as a desktop. For the email, send yourself a test and open it in more than one place: a webmail client, a phone mail app, and Outlook if your customers use it.

Troubleshooting

My CSS has no effect

Two usual causes:

  1. A more specific rule in the page's own styles is winning. Make your selector more specific rather than reaching for !important everywhere.
  2. A syntax error earlier in your CSS stopped the rest being read. Remove your rules, add them back one at a time, and watch where it breaks.
The email looks right in Gmail and wrong in Outlook

Normal, and not something to fix with more CSS. Email clients support wildly different subsets. Keep email CSS to simple, well-supported properties: colors, font sizes, padding. Layout tricks that work on the web will not survive.

I hid something important by accident

Clear the CSS box, save, and confirm the page is back to normal before adding rules again. The controls in the rest of the editor are unaffected by your CSS.

The page looks fine for me and broken for a customer

Check a phone. Rules written with a desktop width in mind often collapse on a narrow screen, and most customers open download emails on a phone.

FAQ

Can I use CSS to hide the Powered by Filemonk line?

Use the setting instead, which is the supported way and available on paid plans. See Remove Powered by Filemonk.

Will my CSS survive Filemonk updates?

Your rules are kept, but they target the page's existing structure, so a redesign can leave a selector pointing at nothing. If a customization stops working after an update, re-check your selectors.

Can I add JavaScript too?

No, these boxes are for CSS.

Can I use different CSS per product?

No. Both boxes are store-wide. For product-specific content, add a message to the product instead. See Add custom messages and download instructions.

Built withSourcey
About FilemonkContactPrivacy policyTerms