Manage Assets: CSS, JavaScript, HTML Editor

❗️

Recommended For Advanced Users Only

Improper use of this tool can create visual problems in rendering your store.

Go to Theme. On the gear icon and select Manage Theme Assets.

1280

Use the Settings Icon to find "Manage Theme Assets"

Zoey allows you to add custom CSS/Javascript/HTML that will load on every page or just some pages of your website.

This is useful for the following:

  • Advanced Design/CSS styling of a theme
  • Adding HTML, scripts or tracking pixels to all pages
  • Adding 3rd Party Javascript widgets (like pop-ups)
  • Implementing custom design features (for Advanced users & Developers only)
1781

The Manage Asset is the gateway to CSS, FavIcon, HTML, Javascript, Logo and more

TabUse
CSSGlobal (Override) CSS
JavascriptAdding Javascript (note, avoid HTML Script Tags)
FaviconBrowser tab icon
HTML HeadFor adding scripts or HTML snippets AKA "Head"
HTML Body StartFor adding scripts or HTML snippets AKA "Body"
HTML Body EndFor adding scripts or HTML snippets AKA "Footer" or "Foot"
LogoFor adding your Logo to your Theme

Add a Favicon

The favicon is a browser icon or logo on your website page tabs.

553

Click on Favicon > Edit Favicon to upload an image. We recommend the image be a 64 x 64px square and PNG file format.

1708

HTML Variables

VariableDesrcriptionFormatting
'[customerId]'The ID of the customer if logged in.Int
'[customerEmail]'The email address of the customer if logged in.String
'[customerFirstName]'The first name of the customer if logged in.String
'[customerLastName]'The last name of the customer if logged in.String
'[cartId]'The ID of the current cart if there are items or if the customer is logged in.Int

Restrictions / Things to Watch Out For

  • This tool does not give you access to the entire style-sheet for editing, only adding.
  • It does not give you access to PHP or Back-end Variables for use in JS snippets.
  • Zoey natively has jQuery and NoConflict loaded on the front-end. Adding external references to different versions of jQuery will result in critical issues.
  • The Zoey front-end currently still relies on PrototypeJS which uses $. If you are writing custom Javascript that uses jQuery, modify the code to call jQuery directly.
  • Snippets that look like this: are HTML. Do not paste snippets like this into the Javascript window. Add them to the HTML windows instead.