Manage Assets: CSS, JavaScript, HTML Editor

❗️

Recommended For Advanced Users Only

Custom code can change how your store looks and works, and mistakes can break pages for customers. Zoey Support can help you use the Asset Manager, but can't write or debug custom code.

The Asset Manager, titled Site code & files, is where you add custom CSS, JavaScript and HTML to your store, and manage your theme's logo, favicon and fonts. Files can load on your whole site, or only on the pages and templates you choose.

Use it for:

• Advanced design and CSS styling of a theme
• Adding scripts or tracking pixels to all pages
• Adding third-party JavaScript widgets, such as pop-ups
• Custom design features (for advanced users and developers)

Manage Theme Assets

Go to Theme, click the gear icon, and select Manage Theme Assets. The Asset Manager opens as Site code & files, with the name of the theme you're editing under its title.

Edit an existing Asset File, or Add/Upload New Files

The file list on the left shows every file in your theme.

• Search finds a file by name.
• The filters show only CSS, JavaScript, HTML, Images or Fonts. Click All to see everything again.
• Whole Site lists the files that load on every page. Below it, each page or template that has its own files has its own group. Click a group's name to collapse or expand it.

Every theme starts with these files in Whole Site:

Edit a File

1. Click a file in the list. It opens in the editor in the middle of the panel.
2. Make your changes and save. Your store shows the change as soon as you save.

Add a File

Click + Add at the top of the panel to create a new CSS, JavaScript or HTML file, or to upload an image or font. Choose whether the file loads on the whole site or only on specific pages or templates, including category and product templates.

📘

A file only affects the pages it loads on. This lets you add code to specific pages without affecting the rest of your store.

To add HTML to just one page, you can also drag an HTML Block onto that page in the Visual Design Editor.

Versions and History

Zoey saves a version every time you save a file. You can see who changed what, compare versions, and restore an earlier one if something goes wrong.

Versions of One File

1. Click a file in the list.
2. The Versions panel on the right shows the file's saved versions, newest first, with who saved each one and when.
3. Compare that version to the current code, or restore it to a previous state.

Everything That Changed

Click History at the top of the panel to open Everything that changed, a list of recent changes across all of your files, newest first.

Each change shows:

• Who made it: their name and email, for example "Example User edited "root_javascript"".
• When: for example "6 h ago".
• What changed: for example "Changed the code (831 B → 0 B)", which shows the file's size before and after the save.

On any change, you can compare it or restore it.

Compare a Version

Click Compare on a change. A What changed in screen opens for that file. It shows the code Before and After side by side, and highlights the changes the way a code editor does.

Use the toggle to switch between:

• Only changes: shows only the lines that changed.
• Whole file: shows the full file with the changes highlighted.

Restore a Version

1. Click Restore on an earlier version.
2. Zoey asks you to confirm, for example: "Go back to the version from Nov 11, 10:17 AM? The current version stays in the history, so you can switch back any time."
3. Confirm to restore it. Your store shows the restored code right away.

The version you replaced stays in History, so you can restore it again if you need to.

📘

Before history started

The oldest entry for a file, Before history started, is the code it had when version history was added to Zoey. Restore it to go back to that point.

Changes to your files are also recorded in the audit log.

👍

Save often while you work. Each save creates a version you can go back to.

Add a Custom Font

Click + Add and upload your font file. The file needs to be .woff. The font then appears under Fonts, and you can assign it in Theme Fonts & Colors.

HTML Variables

Any variables in the Global HTML Variables can be used in an HTML file.

Restrictions / Things to Watch Out For

• You can add to your theme's styles, but you can't edit the theme's own style sheet.
• Server-side (PHP) variables aren't available in JavaScript files.
• Zoey already loads jQuery (in noConflict mode). Loading another version of jQuery will cause critical errors.
• The Zoey storefront still uses PrototypeJS, which uses $. In custom JavaScript that uses jQuery, call jQuery directly instead of $.
• Snippets that look like <script>...</script> are HTML. Don't paste them into a JavaScript file; add them to HTML Before Body or HTML After Body instead. Zoey won't save or upload a JavaScript file that contains HTML tags. If you see an error, remove the <script> and </script> tags and keep only the code between them, or move the whole snippet to an HTML file.

👍

Using code from an AI tool or a developer?

Tell them where the code will go in Zoey:

• JavaScript files take plain JavaScript only, with no <script> tags.
• Snippets with <script>, <style> or other HTML tags go in HTML Before Body or HTML After Body, or in an HTML Block on a single page.
• Zoey already loads jQuery (in noConflict mode) and PrototypeJS. Call jQuery directly instead of $, and don't load another copy of jQuery.

📘

Storefront monitoring

Zoey monitors storefront JavaScript errors and files that fail to load, with extra attention on cart and checkout. Errors from your own custom code are tracked separately from platform errors. If we find a problem in your custom code that affects customers, Zoey will let you know.

Learn more: How Zoey Now Catches Storefront Issues Before Your Customers Report Them