Where to add custom code?

This page will explain the various ways to add custom code to your site. The main difference is the scope of where the code is inserted. You can insert code site-wide (included on all pages) or on individual pages.

Site-wide Head Code (Settings > Analytics)

In the admin at Settings > Analytics you can enter script code that will be included in the head section of every page of the website. (The head section of the website is where a lot of metadata and other behind-the-scenes code for the site resides; it's not actually visible as content on the website pages).

The most common reason for adding site-wide third-party code is to insert an analytics script (like Google Analytics gTag) to track traffic statistics, and in this case (or for similar cases) the code needs to be included on every page of the site.

At Settings > Analytics, there are two input fields for head code: Any code that does tracking (like Analytics) needs to go into the "Analytics and Tracking Code" field. Other non-tracking code (like site-wide CSS, or maybe a site verification tag, for instance) should go into the "Other Non-Tracking Script Code" field.

Single Page Head Code

If you have head code that you only need to include on certain pages, you can also do this. 

☝️ First you will need to activate the "Code Inputs" in the admin at Settings > Admin. These are disabled by default to avoid clutter since the vast majority of clients will never need to use these.

Once the code inputs are enabled, you will then see a "Head Scripts/Code" input field when modifying every page, gallery, product, or the homepage, cart, order confirmation, or contact pages. For the photo pages, at Photos > Settings you can enter code that will be included on every photo page.

A few examples of when this method might be useful would be if you need to include certain conversion tracking scripts into the cart or order confirmation pages, or perhaps if you wanted to add custom CSS styles to specific pages.

Inserting Code into the Text Areas

The final method of inserting code is to enter it into the admin text editors. In this case the code would be included within the page content itself, not in the head section like the other methods above.

If you need to enter actual HTML content or scripts that insert content, this is the method you would use. The most common uses for this would be inserting videos, or perhaps a Google Map, a Google Calendar, or some other third-party widget like from a form builder app.

⚠️ IMPORTANT: Whenever you insert code into the admin text areas, you cannot just write the code directly into the text; you MUST click the "Video or Embedded Code" button first, then paste your code into the input box that pops up

💡 The admin text editors can occasionally be finicky about not allowing some embedded HTML code. To avoid these headaches, whenever possible it's best to embed code via iframes or scripts. For example, if you want to insert a custom form from a third party form builder app, the best way to do this is by inserting a script code that the app provides which will insert the form via javascript, rather trying to embed the raw HTML code of the entire form.