{"title":"Adding custom JavaScript, CSS and head content","slug":"adding-custom-javascript-css-and-head-content","url":"https://support.storeconnect.com/articles/adding-custom-javascript-css-and-head-content","url_markdown":"https://support.storeconnect.com/articles/adding-custom-javascript-css-and-head-content.md","subtitle":null,"summary":"Choose between head content blocks, script blocks, the External Javascripts field, and body content blocks to add custom JavaScript, tracking scripts, and head tags to a store, and debug custom JavaScript that never runs.","type":"Help_Documentation","video_url":"","keywords":"custom javascript, custom css, head content block, script blocks, body content block, external javascripts, channels, tracking scripts, google tag manager, live chat scripts, facebook pixel, domcontentloaded, store customization, liquid code","last_modified":"2026-08-21T07:12:35+0000","body_markdown":"Quite often you will need to add custom CSS, JavaScript, or a head content tag such as\nGoogle Tag Manager to your online store. StoreConnect provides several ways to insert\ncontent into your site on a per store basis, most of them configured on the Store record\nor on their own records in the\n[Content Management (CMS)](content-management) area.\n\n## On this page\n\n1.  [Which method to use](#which-method-to-use)\n2.  [Head content block](#head-content-block)\n3.  [JavaScript and script blocks](#javascript-and-script-blocks)\n4.  [External Javascripts field](#external-javascripts-field)\n5.  [CSS and custom styles](#css-and-custom-styles)\n6.  [Body content block](#body-content-block)\n7.  [Debugging custom JavaScript](#debugging-custom-javascript)\n\n## Before you start\n\n-   You need edit access to the **Store** record for the store you are changing.\n-   To use script blocks, you need access to the **Script Blocks** tab. If you cannot see\n    it in the App Launcher, ask your Salesforce administrator to grant tab and object\n    access.\n-   Custom code is applied per store. If you run more than one store, repeat the steps for\n    each one.\n\n## Which method to use\n\n| Method | Use it for | Liquid | Where it renders |\n| --- | --- | --- | --- |\n| [Head content block](#head-content-block) | Head tags, font links, meta tags, and JavaScript that has to contain Liquid | Yes | End of `\u003chead\u003e` |\n| [Script blocks](#javascript-and-script-blocks) | JavaScript libraries and snippets you want to keep as separate, individually ordered records | No | `\u003chead\u003e`, before the head content block |\n| [External Javascripts field](#external-javascripts-field) | One block of global JavaScript held directly on the Store record | No | `\u003chead\u003e`, before script blocks |\n| [Body content block](#body-content-block) | Live chat widgets and other scripts that must load after the page content | Yes | Just before the closing `\u003c/body\u003e` tag |\n\nFor CSS, see [How to add custom CSS](adding-custom-css).\n\n## Head content block\n\nUse the head content block for global custom Liquid code, font links, and JavaScript\nthat contains Liquid code. For JavaScript libraries and snippets there are better\noptions, covered in the next section.\n\n1.  Go to the **Content Blocks** list and select **New** (`s_c__Content_Block__c`).\n2.  Set the **Template** to **No added styling**.\n3.  Provide a name such as \"Head Content Block\", or a name of your choice.\n4.  Use the **Content** field to paste the code, script, or tag you need in the head\n    section of your site.\n5.  Select **Save**.\n6.  Open your store's **Store** record and point it at the block:\n    1.  Under the **Global Content** section, select the **HTML Head Content Block**\n        field (`s_c__Head_Content_Block_Id__c`).\n    2.  Search for your head content block.\n    3.  Select **Save**.\n\nYour content now renders in the head of every page on that store.\n\n:::warning\n\n**HTML Head Content Block** is in the **Global Content** section of the Store record, not\nthe **Content Management System (CMS)** section. Do not confuse it with **Page Header\nContent Block**, which sets the visible header of your store.\n\n:::\n\nFor example, to add Google Tag Manager, paste its container snippet into **Content**:\n\n```html\n\n\u003c!-- Google Tag Manager --\u003e\n\u003cscript\u003e(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\nnew Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\nj=d.createElement(s),dl=l!='dataLayer'?'\u0026l='+l:'';j.async=true;j.src=\n'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n})(window,document,'script','dataLayer','GTM-XXXXXXX');\u003c/script\u003e\n\u003c!-- End Google Tag Manager --\u003e\n```\n\n## JavaScript and script blocks\n\nScript Blocks hold JavaScript that is included on your web store, and keep your scripts\norganized and maintainable as a set of records rather than one long block of code. Each\none is an `s_c__Script_Block__c` record, so you can also create them through the API or\nData Loader. See the [Script Block object reference](script-block-object-reference) for\nevery field.\n\n1.  Go to the **Script Blocks** list and select **New**.\n\n    ![Salesforce App Launcher open, with Script Blocks being searched for](https://res.cloudinary.com/hzkr6fi81/image/upload/v1781677787/documentation-media/style-blocks.gif)\n\n2.  Give it a useful name.\n3.  Set the configuration:\n    -   **Store** — the store this script block belongs to.\n    -   **Active** — only active script blocks are included on the website.\n    -   **Channels** — the surfaces the script runs on. Select **Web** for your online\n        store, **POS** for the point of sale app, or both. This field is required, and a\n        script block without **Web** never loads on your online store even when it is\n        active and global.\n    -   **Global** — include the script automatically on every page. Leave it unchecked\n        and the script block is not included on your store at all.\n    -   **Position** — the order script blocks load in. Lower numbers load first, and\n        this only applies when **Global** is checked.\n4.  Provide the script itself, using one of:\n    -   **Script URL** — the URL of an external JavaScript file, for example\n        `https://example.com/script.js`. If you set this, any value in **Content** is\n        ignored.\n    -   **Content** — the JavaScript itself, written **without** `\u003cscript\u003e` tags.\n        StoreConnect adds them for you.\n5.  Select **Save**.\n\nAn active, global script block set to the **Web** channel is rendered in the `\u003chead\u003e` of\nevery page on your store, wrapped in `\u003cscript\u003e` tags, or as\n`\u003cscript src=\"...\"\u003e` when you set **Script URL**.\n\nYou can also add code such as a Facebook pixel or a domain validation meta tag here, as\nlong as it is not already wrapped in `\u003cscript\u003e` tags.\n\n:::warning\n\nLiquid code does not work inside Script Blocks. If your script needs Liquid, use the\nhead content block above instead.\n\n:::\n\n:::note\n\nIf you link a script block to a **Cookie** record for privacy compliance, it only loads\nfor visitors who have consented to that cookie. Script blocks with no linked cookie\nalways load. See [Cookie management and privacy compliance](cookie-management-and-privacy-compliance).\n\n:::\n\n## External Javascripts field\n\nThe **External Javascripts** field on the Store record\n(`s_c__External_Javascripts__c`) holds a single block of JavaScript that renders in the\n`\u003chead\u003e` of every page, wrapped in `\u003cscript\u003e` tags. Use it for a quick global script when\nyou do not need the ordering and on/off control that separate script blocks give you.\n\n1.  Open your store's **Store** record.\n2.  Under the **Global Content** section, select the **External Javascripts** field.\n3.  Paste your JavaScript, written **without** `\u003cscript\u003e` tags.\n4.  Select **Save**.\n\nYour script now runs in the head of every page on that store, before any script blocks.\nLiquid code does not work in this field.\n\n## CSS and custom styles\n\nSee [How to add custom CSS](adding-custom-css).\n\n## Body content block\n\nThe **Body Content** field links to a CMS content block holding anything you want\ninserted at the end of the `\u003cbody\u003e` of your store.\n\nCommon uses are live chat scripts, or other custom JavaScript that needs to load after\nthe page has loaded.\n\n1.  Go to the **Content Blocks** list and select **New** (`s_c__Content_Block__c`).\n2.  Set the **Template** to **No added styling**. The body content block is rendered\n    through its template, so any other template wraps your code in that template's\n    markup.\n3.  Provide a name such as \"Body Content\", or a name of your choice.\n4.  Use the **Content** field to paste the code, script, or tag you need in the body\n    section of your site.\n5.  Select **Save**.\n6.  Open your store's **Store** record and point it at the block:\n    1.  Under the **Global Content** section, select the **Body Content** field\n        (`s_c__Body_Content_Block_Id__c`).\n    2.  Search for your body content block.\n    3.  Select **Save**.\n\nYour content now renders just before the closing `\u003c/body\u003e` tag on every page on that\nstore.\n\n## Debugging custom JavaScript\n\nThe most common problem with custom JavaScript is a script that never runs, despite\ncorrect syntax and no errors in the console. This usually means the script ran before\nthe elements it needs existed.\n\nWrap your code in a `DOMContentLoaded` or `load` event listener so it runs once the page\nis ready.\n\n```js\n\n// Run the logic inline\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n  console.log('Hello!');\n});\n\n// Or define the function first, then reference it\nconst init = () =\u003e {\n  // logic here\n};\n\ndocument.addEventListener('DOMContentLoaded', init);\n```\n\n:::note\n\nIn the second example, `const init` must be declared before the line that references it.\nA `const` cannot be used above its own declaration, so listing the event listener first\nthrows a `ReferenceError` and the script silently does nothing.\n\n:::\n\nYour script now runs once the page is ready, and the `console.log` appears in the browser\nconsole on load."}