Skip to content
FilemonkHelp center
Open Filemonk

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

Section titled “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

Section titled “Set it up”

Download page

Section titled “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. In the Customize page card, click Customize Download page.

  4. In the editor’s section list, under Page, click Advanced.

  5. Add your rules in the CSS box, then click Save in the save bar at the top of the editor.

    The Advanced section of the Filemonk download page editor, with arrows numbered 1 to 3 marking the Advanced heading, the CSS box and the note that CSS changes cannot be previewed

CSS changes don’t appear in the preview, so open a real download page to check them.

Email

Section titled “Email”

  1. Click Settings in the app’s menu, then open the Email tab.

  2. Click Customize email to open the email editor.

  3. In the editor’s section list, under Advanced, click Advanced settings.

  4. Scroll to Email CSS at the bottom of that section. Click Selectors beside the label for the class names the template uses.

  5. Add your rules, then click Save. Email CSS can’t be previewed either, so send yourself a test email.

    The Advanced settings section of the Filemonk email editor, with arrows numbered 1 to 3 marking the Email CSS label with its Selectors link, the Email CSS box and the note that CSS changes cannot be previewed

Check your setup

Section titled “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

Section titled “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 CSS box isn't in the download page editor

Customers download from the Customer Account page, which hides it. That page is styled in your Shopify Checkout editor instead. See Let customers download from the account page.

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

Section titled “FAQ”
Can I use CSS to hide the Powered by Filemonk line?

Use the setting instead, which is the supported way and available on every plan. 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.

Section titled “Related guides”
Was this page helpful?

Still stuck? Ask Quinn or chat with support